Shopify

Whilst we work on a Shopify plugin to make installation super simple, you must install Zyler on Shopify manually. The following instructions aim to make it as simple as possible for you.

Installation

Once you have a partner ID, installation can be complete in 1 simple step.

Add the "Try-On" Button

To add the try-on button, you need to edit the product-template.liquid theme file. This can be found from the shopify admin interface by clicking on "themes" under "Sales Channels" on the left-hand panel. On your live theme, click on the "Actions" dropdown and then click "Edit code". Now, locate product-template.liquid and open it.

Copy and paste in the following code snippet in your desired location on the page - usually a good place to add this is right after the "Add to cart" button.

<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>
<button type="button" class="zyler-try-on" data-outfit-id="{{ product.handle }}" style="display: none;">Try On</button>
<script type="text/javascript">
window.onload = function() {
Zyler.init({
partnerId: '{partner-id}', // Replace {partner-id} with your own partner ID.
testMode: true
});
}
</script>

Note: If you change your theme, the above script will need to be added again.

Test Mode

As testMode is set to true, the "Try-on" button will not appear on your products page yet, so don't worry about your customers seeing the button that you haven't tested yet! For you to be able to see the "Try-on" button yourself, add ?show_zyler to the end of the URL of the product page desired. See configuration for more details.

Button Styling

The button is not styled in anyway so add any classes and/or styling required for it to fit into your site. If you're struggling with this, a good place to start is to find the style classes that a current button in your theme has. For example, on Google Chrome, find a button on your site, right-click and choose inspect and copy the classes from the highlighted element.

Move to Production Mode

Once you are happy with how the button looks, change testMode: true to testMode: false or replace all of the code you pasted in before with below - remember to set the button styling. You're now production ready!

<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>
<button type="button" class="zyler-try-on" data-outfit-id="{{ product.handle }}" style="display: none;">Try On</button>
<script type="text/javascript">
window.onload = function() {
Zyler.init({
partnerId: '{partner-id}' // Replace {partner-id} with your own partner ID.
});
}
</script>