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>
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.
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!
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: