Installation

You can find instructions on how to install Zyler on Shopify or Woocommerce under "Ecommerce Platforms".

Integration happens in 2 simple steps:

  1. Include our Script
  2. Initialize

Include our Script

First of all, you must include a small script hosted by us into your webpage. This script contains the client side logic necessary to contact our servers and display the image in your site.

Copy the following script tag and paste it in either the <head></head> or at the end of the <body></body> of any pages you want to be able to visualise an outfit - usually a product information page.

<script src="https://www.zyler.com/js/integration/v1/modal.js" crossorigin="anonymous" defer></script>

Initialize Zyler

Finally, you need to initialize the zyler process once the document has loaded. Paste the following javascript snippet and replace the {outfit-id} value with the id of the outfit you want visualised on that page in a window load event callback.

window.addEventListener('load', function() {
const myZyler = Zyler.init({
partnerId: '{partner-id}', // Replace {partner-id} with your own partner ID.
floatingButtonOutfitId: '{outfit-id}'
});
});
Replace {partner-id} with your own partner ID.

If you want to be able to test it in a live environment without your customers seeing, add testMode: true to the configuration object.

const myZyler = Zyler.init({
partnerId: '{partner-id}', // Replace {partner-id} with your own partner ID.
floatingButtonOutfitId: '{outfit-id}',
testMode: true
});

This will hide the "Try On" pop-in from your page unless you add show_zyler as a query parameter to the end of the URL on the page you're trying to test visualisation.

e.g

https://www.yourdomain.com?show_zyler