How to add the Reliby VTO Button in your Shopify page

Modify your template to add the Virtual Try-on button

Add the Reliby script

In your store management page, under the side bar menu Online Store > Themes, select the theme of your store and now click on Actions > Edit Code.

This will open the editor to modify the " source code" for your page. Don't worry it will look much cooler when we are done with it! 😎

Now, under Layout locate theme.liquid . The code will open in the right side. Now you have to locate the <head> tag inside (all lines indented to the left) and before </head> you can add the Reliby script, this will help to build the button later on.

<script src="https://www.reliby.com//ContentsForBrands/TryOnButton/js/reliby-autoload.js"></script>

Let us know where do you want the button

On the right side menu under Sections locate product-template.liquid, now you have to add the button Reliby Try-on button where you want, we strongly suggest under the buy button, so you don't lose customers because of the doubts.

So under the button code add:

{% if product.metafields.reliby.identifier %}
<div class="product-form__item">
    <div class="reliby-button-placeholder" id={{ product.metafields.reliby.identifier }}></div>
</div>
{% endif %}

And so, you are done with the code, now you have to add the Reliby information to the products so the button knows which glasses to show in the app, let's check the next section.

Add the Reliby data to your products

The button needs to know which glasses to open when your customers push the virtual try-on button, this is done with a little bit of information what we call the Reliby ID. You will be provided with the IDs by the Reliby team.

First of all you need a plugin to edit the metafields of your products (maybe you already have an editor), these apps/plugins are available in the Shopify store. We will use the Metafields Guru plugin.

Now for each product you have to add a metafield with scope reliby and key identifier with the value provided by the Reliby team for each one of the glasses, as shown in the example below.

And you are done! Now all your customers will be able to try-on all your glasses!

Managed by Reliby Team

We can do it for you, the store owner needs to give Staff Access to the contact@reliby.com Shopify account.

Permissions that are needed: