Customize the widget appearance and placement
Tryvio splits widget configuration so each question has exactly one answer:
| what you want to change | where |
|---|---|
| How the button looks — label, colours, corner radius, size, position on the image | Theme Editor → App embeds → Tryvio |
| Which pages show it — collections, home page, related products, product blocks | Theme Editor → App embeds → Tryvio |
| Which products show it | Tryvio app → Products (per-product toggles + bulk) |
Open the settings
In your Shopify admin: Online Store → Themes → Customize, then open App embeds in the left sidebar and select Tryvio.
The Tryvio app links you straight there — on the Widget screen, use Change this in the Theme Editor →.
These settings live in your theme, so they preview live as you edit and they travel with the theme. If you duplicate a theme, the copy keeps them. If you switch to a different theme that has never been configured, it starts from the defaults — see Switching themes.
How the button looks
- Button label — change the “Try it on” text to match your voice.
- Button colours — button background, text colour, card background and border.
- Corner radius and product-page button width.
- Card button size, position and label — set separately for mobile and desktop, because a phone card has far less room than a desktop one. “Auto” fits the button to the card; “Logo only” keeps the product image clear.
- Attention animation — a subtle pulse that draws the eye, off for shoppers whose device asks for reduced motion.
- Custom CSS for anything else.
Which pages show the button
Under Where the button shows you get one control per surface:
- Product pages — the main product image (on/off, or place the button manually with the “Tryvio button” block).
- Collection pages — a button on each card in your collection grids.
- Home page — featured-product and product-grid blocks.
- Related products on a product page — the “you may also like” cards.
- Product blocks on other pages — product grids on custom pages and the all-collections page.
Each of the four card surfaces has three options:
| option | what it does |
|---|---|
| Use the setting from the Tryvio app (default) | Keeps whatever your Tryvio app account is already set to. Nothing changes. |
| Show | Always show on this surface. The app setting no longer applies here. |
| Hide | Never show on this surface. The app setting no longer applies here. |
The default is deliberately “use the setting from the Tryvio app”, so installing an update never changes where your button appears. As soon as you pick Show or Hide, the theme decides — one switch, one outcome.
Search results never show the button.
Which products show the button
Page-type settings decide which pages. To decide which products, use the Products screen in the Tryvio app — filter by collection or tag and bulk-enable. See Enable per product.
Switching themes
Because these settings live in the theme, a brand-new theme starts from the defaults: the button shows on product pages, and the card surfaces fall back to your Tryvio app setting. After switching themes, open App embeds → Tryvio and confirm the placement is what you want.
Brand settings
For broader brand controls (logo, brand colours used across the experience), see Brand settings.
Last updated on