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, which corner it sits in (product image and card image are separate settings) | 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 background, Button text color, Card background (product page) and Card border color (product page).
- Corner radius and Product-page button width.
- Position on the product image — which corner the button sits in on the main product photo, set separately for mobile and desktop. Top left, top right, bottom left or bottom right; the default is bottom right. Move it if another app already owns that corner — sale badges usually sit top left and wishlist hearts top right.
- Card button — mobile and Card button — desktop — the card button’s Size, Label and Position on the card image, set separately 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.
Two buttons, two position settings. “Position on the product image” moves the button on the product page. “Position on the card image”, further down under Card button, moves the button on collection and home-page product cards — a different button. Changing one never moves the other.
Which pages show the button
Under Where the button shows you get one control per surface:
- Show the try-on button on the product image — the button on the main product image of your product pages. Turn it off to place the button manually with the “Tryvio button” block instead.
- 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 |
|---|---|
| Automatic (default) | Shows the button on this surface — unless you once chose specific pages inside the Tryvio app (that choice keeps applying here), or turned off Card buttons: old master switch (legacy) further down the panel. |
| Show | Always show on this surface, whatever was chosen in the app before. |
| Hide | Never show on this surface, whatever was chosen in the app before. |
Turning Tryvio on in your theme is what shows the button, so Automatic means shown. A store that once picked specific pages inside the Tryvio app keeps that choice on Automatic, so an update never changes where its 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 every card surface is set to Automatic. After switching themes, open App embeds → Tryvio and confirm the placement is what you want.
Brand settings
Tryvio has no separate brand settings — no logo or brand-colour controls beyond the button settings above. The wording shoppers read is edited on the Translations tab; see Languages & localization.
Last updated on