How to integrate TRY ON buttons
Warning: If you are not familiar with Liquid (Shopify's templating language), we do not recommend making any changes to your store's theme.
Go to Online Store > Themes and choose a theme into which you would like to integrate the button. Click the Actions button and choose Edit code.
Integration of the TRY ON button into the product page
- Find the template file of your product page. It’s usually located in the Snippets folder and named as "product.liquid".
- 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> - Save changes
Integration of the TRY ON button into catalog/collection page
- 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".
- 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> - Save changes
Note: Please note that the button has to be hidden by default.
Now you can check the results on your product and collection pages. Make sure that at least one of your products is already integrated and published in your Magic Mirror, otherwise, the buttons will not be displayed.
