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."

Screen Shot 2022-04-05 at 1.24.52 PM

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

Screen Shot 2022-04-05 at 1.26.35 PM

3. Click on "Products."

Screen Shot 2022-04-05 at 1.29.12 PM

4. Click on "Add Definition."

Screen Shot 2022-04-05 at 1.30.36 PM

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."

Screen Shot 2022-04-06 at 11.10.56 AM

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

Screen Shot 2022-04-05 at 1.37.43 PM

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

Screen Shot 2022-04-06 at 11.12.12 AM

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.

Screen Shot 2022-04-05 at 1.44.42 PM

9. Click on "Themes" and then "Customize."
Screen Shot 2022-04-05 at 2.14.19 PM
10. In the top left hand side click on the three dot menu and select “Edit Code.”
Screen Shot 2022-04-05 at 2.16.41 PM
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.

Screen Shot 2022-04-05 at 2.19.35 PM

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:

Screen Shot 2022-04-06 at 11.21.45 AM

Once the code has been pasted, press "Save."
Screen Shot 2022-04-05 at 2.26.18 PM-1
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.
Screen Shot 2022-04-05 at 12.56.49 PM-1

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

Screen Shot 2022-04-05 at 12.52.47 PM

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

Screen Shot 2022-04-05 at 12.54.45 PM

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. 

Screen Shot 2022-04-05 at 12.45.59 PM

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

Screen Shot 2022-04-05 at 2.36.52 PM

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."

Screen Shot 2022-04-05 at 2.38.39 PM

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.  

Screen Shot 2022-04-06 at 11.17.43 AM