How to Embed Augmented Reality Try On Links Anywhere in the Shopify Product Page

Follow the directions in this tutorial to embed and display your Jewelry Hub Augmented Reality Try On links anywhere you would like in your Shopify product page.

1. In the Shopify Admin portal navigate to and click on "Settings."

2. In the settings section, click on "Metafields."

3. Click on "Products."

4. Click on "Add Definition."

5. Create a name for the Metafield, for example "picupmedatryon."  Do not touch the "Namespace and key" input fields, leave them with the default values.  In the description field add a description for the Metafield, for example "Try Me On Augmented Reality button from Picup Media."

6. Click on “Select Content Type” and select the "Text" option from the menu list.

7.  Select “Multi-line Text” and in the top right corner click “Save.”

Now that you have created a “Product Metafield” that will be available for all products within your Shopify website, you need to update your Shopify Theme's Product Template to display the Augmented Reality Try On Link button if a product has a “Try Me On” button.  

To add the “Try Me On” button to your template please follow the steps below, you only need to do this once.

8. Click on the “Online Store” in the left hand menu.

9. Click on "Themes" and then "Customize."

10. In the top left hand side click on the three dot menu and select “Edit Code.”

 

11. In the search box, search for your main product template. This may vary depending on your

theme but in the “Dawn” theme shown in this tutorial, it is “main-product.liquid”. The editor will then open up the liquid template for your main product page.

12. Inside of the product template code look for the position where you would like the button to

appear. If you want the button to appear just below the Product Title then search for “product__title”.  Paste the code below into the place in the template where you want the button to appear:

Once the code has been pasted, press "Save."

13. Once you have created the “Product Metafield” then the next step is to get the embed code for the “Try Me On” button from the Picup Media Jewelry Hub.  In the Jewelry Hub 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.

14. In the Share link pop up select the "Embed Button" tab.

15. Once in the "Embed Button" tab, select your button style and press on "Copy."

16. In your Shopify Admin Portal, navigate to the products section and select the product for which you would like to add the augmented reality button. 

17. In the product page scroll down until you see the “Metafields” section.

18. In the Metafield “Try On Link Button” section, paste the code for the embed button which you copied from the Jewellery Hub and then press "Save."

19. Repeat this process for each product where you want to display the “Try Me On” button in the location which you specified in your Shopify theme template.