Installation
You can find instructions on how to install Zyler on Shopify or Woocommerce under "Ecommerce Platforms".
Integration happens in 3 simple steps:
Include our Script
First of all, you must include a small script hosted by us into your webpage. This script contains the least 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.
Add the "Try-On" Button
The "Try-On" button is what your users click to start the Zyler visualisation process. Copy the template html button below and replace the {outfit-id}
data attribute with the id of the outfit you want to be visualised via the click of that button.
The zyler-try-on
class and the data-outfit-id
attribute are both required. style="display: none;"
is set to hide the element initially. This is because the initialisation process in step 3 will hide the element to begin with and only display it when the pre-flight checks have passed.
This button is not styled in anyway so add any classes and/or styling required for it to fit into your site.
Initialize
Finally, you need to initialize the zyler process once the document has loaded. Paste the following javascript snippet in a window.onload
callback.
If you want to be able to test it in a live environment without your customers seeing, add testMode: true
to the configuration object.
This will hide the "Try On" button 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