How to integrate TRY ON buttons

We do not recommend making changes to your store's theme if you are unfamiliar with Liquid, Shopify's templating language.

Navigate to Online Store > Themes and select a theme to integrate the button. Click on the Actions button and select Edit code.

Integration of the TRY ON button into the product page

1. Find the template file of your product page. It’s usually located in the Snippets folder and named as "product.liquid".
2. Paste the following code in the desired place

   <button type="button" class="virtooal-tryon-btn virtooal-tryon-btn-product-page" data-virtooal_id="{{product.selected_or_first_available_variant.id}}" style="display:none">TRY ON</button>

3. Save changes

Integration of the TRY ON button into catalog/collection page

1. Find the template file of your collection page’s items. It’s usually located in the Snippets folder and named as "product-grid-item.liquid".
2. Paste the following code in the desired place

   <button type="button" class="virtooal-tryon-btn virtooal-tryon-btn-collection-page" data-virtooal_id="{{product.selected_or_first_available_variant.id}}" style="display:none">TRY ON</button>

3. Save changes

Please be aware that the button should be hidden by default.

Now you can check the results on your product and collection pages. Ensure that at least one of your products is integrated and published in your Magic Mirror; otherwise, the buttons will not be displayed.