These instructions are intended to show how to implement Augmented Reality “Try On” links into websites on the Shopblocks.com ecommerce platform.
These instructions assume that you have already created a Try On link for the product you wish to embed into your Shopblocks.com website; if you haven't done so already, read this article on how to create Try On links.
-
Adding the JavaScript File to your Template.
This step you only need to complete once and will add the JavaScript file from Picup Media to your website template as Shopblocks.com does not allow JavaScript in their product descriptions so it is necessary to add the JavaScript into your web template.
The first step to implementing Try Me on Links onto your Shopblocks.com website is to login to the administration of your website.
Click on “Settings” on the left hand menu and then scroll down until you get to the “Technical Section” in the panel “Tracking, SEO and JavaScript” and click on the link “Manage Tracking SEO and JavaScript."
-
Once you are in the “SEO, Tracking and JavaScript” section then scroll down to the “Tracking Section” and find the form for “Footer Code”.
Paste the following code into the field:<script async defer src="https://static.cloud.picupmedia.com/static/embed-btn-script.js"></script>
Once the code is pasted into the form field, click “Save.”
The JavaScript code that controls the “Try Me On” buttons is now available in your template. Once you have completed this step then you will not have to do it again.
-
Adding the “Try Me On” button to your product.
Inside of your Shopblocks.com administration site click on “Products” from the left hand menu. This will open up the product manager where you can find and select the product you wish to add the “Try Me On” button to.
Once you have searched for the product then click on the row and you will be taken to the product page for that product.
- In the “Description” click on the button that says “Source” this will put the “Description” editor into HTML mode so that you can see the HTML markup that formats the product description.
- In the GemHub navigate to the Try on link item for which you would like to generate an Augmented Reality button and click on the "Get Share Link" button.
- Select the tab that says “Embed Button”.
- Select the button template that you would like to use.
If you would like to change the button size then enter a new width in the “Button Size” form field in pixels.
As you are placing the button onto an existing e-commerce platform, set the option for “Show Attributes” to “No”, this will prevent any of the product information and images from showing in the background.
Click the “Copy” button to copy the embed code and return to your Shopblocks.com product.
-
In the “Description” in “Source Code” mode, put your cursor where you would like the “Try Me On” button to appear and then paste the code into the description.
The code will be similar to the example below:
<div data-source="picupmedia_gemlightbox" data-env="production" data-type="blink" data-image-type="ar-type-0" data-width="200" data-height="40" data-modal-width=""
data-modal-height="" data-href="https://gallery.cloud.picupmedia.com/embed-resource/a0719017-9152-44c0-83ae-9df1c8148fe 1?tryMeOn=true&withAttributes=true"></div><script async defer src="https://static.cloud.picupmedia.com/static/embed-btn-script.js"></script>
(USE THE CODE SNIPPET WHICH YOU COPIED FROM THE GEMHUB, DO NOT COPY THE CODE SNIPPET ABOVE):
In the Shopblocks.com website it is necessary to make some changes to the code as Shopblocks.com does not accept Javascript in their product descriptions which is why at the start of this tutorial we added the Javascript to the footer of the website template.
You will need to delete the following line from the code snippet which you pasted into the description:
<script async defer src="https://static.cloud.picupmedia.com/static/embed-btn-script.js"></script>
This will leave the code in your website looking something similar to the code below:
<div data-source="picupmedia_gemlightbox" data-env="production" data-type="blink" data-image-type="ar-type-0" data-width="200" data-height="40" data-modal-width="" data-modal-height="" data-href="https://gallery.cloud.picupmedia.com/embed-resource/a0719017-9152-44c0-83ae-9df1c8148fe 1?tryMeOn=true&withAttributes=true"></div>
- Now that you have added the embed code for the “Try Me On” button to your product then click “OK” to close the Description editor and then click the “Save” button in the top right corner of the screen.
Once the product has been saved the “Try Me On” button will be available in the product description of your product on the website.