Last Update: 25/08/2026
Add to Cart from the VTO
Shoppers can add the frame they are trying on straight to the cart, without leaving the virtual try-on. The button appears inside the VTO, next to the controls.
The feature is off by default. You turn it on, and configure it entirely, from the theme editor — no code and no new app permissions.
The variant being tried on must be matched to a Shopify variant by product synchronisation. A frame whose variant is not synced cannot be added to the cart, and the button stays disabled for it.
Turning it on
- In the Shopify Theme Editor, open the App embeds tab.
- Expand the settings of ARShades VTO Embed.
- Scroll to the Add to Cart section and tick Enable Add to Cart button in VTO.
- Choose what happens after the shopper adds, then Save.
After the shopper adds
The setting is After adding to cart. Three choices:
| Option | What the shopper sees |
|---|---|
| Go to checkout (default) | The try-on closes and the shopper lands directly on the checkout |
| Go to cart page | The try-on closes and the shopper lands on the cart |
| Stay (show confirmation) | A short confirmation appears; the shopper can keep trying other frames |
Which one converts best depends on your assortment: Go to checkout shortens the path to purchase, Stay suits catalogues where shoppers compare several frames in one session.
Button text
Add to Cart button text sets the label shown inside the try-on. Leave it as it is to use the default, or write your own — it is a good place for the wording your store already uses elsewhere.
Appearance
These settings mirror the ones you already know from the VTO button, so the two can be made to match.
| Setting | What it controls |
|---|---|
| Background color | Button background |
| Hover color | Colour on mouse-over |
| Text/icon color | Label colour |
| Button border radius | Corner rounding, 0–30 px |
| Button padding | Inner spacing, e.g. 10px 18px |
| Font size | Label size, 6–24 px |
An empty colour is not "no colour": it means use the catalogue's brand colour. That is why these fields deliberately start empty. Fill one in only when you want the button to depart from your brand palette.
Placement
Three settings decide where the button sits. They are independent of one another, so they combine freely.
Button position — where the button is mounted in the stack of controls:
| Option | Where |
|---|---|
| Above the controls | At the top, above the row of buttons |
| Above the variant menu (default) | Between the controls and the colour menu |
| Below the variant menu | At the bottom, under the colour menu |
Button alignment — Left, Center (default) or Right.
Horizontal offset and Vertical offset — a fine adjustment of up to ±120 px on each axis, for when a theme needs the button nudged a little from one of the nine positions above. Negative moves left and up, positive moves right and down.
Alignment is relative to the controls, not to the browser window. The controls sit in a column narrower than the screen, so Left means the left edge of that column — the button stays inside the try-on layout instead of floating into a corner.
In single view there is no colour menu, so Above the variant menu and Below the variant menu place the button in the same spot, below the controls. Only Above the controls stays distinct.
How it works, briefly
The try-on never talks to Shopify directly: it signals the intent, and your storefront performs the add. This is why the feature needs no additional app permission, and why a shopper who double-taps the button never ends up with two units in the cart.
Custom integrations
If your theme does not use the ARShades app blocks and the VTO is embedded with your own code, the same button is available — see Manual Integration.