How to Integrate AR Experiences to Shopify Using Aryel’s Shopify Plugin?

Aryel is a powerful tool that allows you to enhance your customer's shopping experience by integrating immersive augmented reality (AR) experiences into your product pages.

This step-by-step guide will walk you through the process of enabling the Aryel app, assigning experiences to products, adding blocks to your theme, setting up the blocks, and managing them efficiently.

Step 1: Get your Aryel API key and authorize your Shopify connection

If you've got an Enterprise plan and have activated your API key, you can find your API key at any time by accessing your account page.

Now connect your AR experiences from Aryel with your Shopify website via this API key to proceed to the next steps.

Step 2: Enable the Aryel script tag

To begin integrating Aryel's experiences, you need to enable the Aryel script tag. Simply click on the 'Enable Script' button to activate it.

Press on the 'save' button (in the top right) to save these changes and 'exit' button (in the top left) to come back to the main screen.

Step 3: Assign a campaign to a product

To showcase the 3D preview on your product pages, you must link Aryel experiences to their corresponding products.

Navigate to the product for which you want to add the AR campaign, click on "More Actions," select "Add Aryel Campaign," and enter the campaign ID.

If you are unsure where to find the ID, please refer to this article.

Step 4: Add blocks to your theme

Aryel offers two blocks that can be added to every product page: AR Button and AR Embed. The AR button provides a direct link to the AR experience, while the AR Embed block allows you to embed a 3D viewer of the product within the page itself.

To add these blocks, please navigate to Sales Channels (Main Screen) > Online Store > Themes > Customize > Click on a product > Add Block (under Apps Section in left side bar) to add them to your product.

Remember, each block can also be added as an independent section for complete customization.

Step 5: Setup your blocks

Utilizing the Editor, you can customize the style and text of the buttons in both the AR Button and AR Embed blocks (once enabled).

The AR Embed block also allows you to modify the viewer's dimensions, spinning loader colors, gestures, auto-rotation of the 3D model, and the initial position of the product using scale, position, and rotation parameters.

Additionally, advanced settings enable you to configure the output encoding (linear or sRGB) and camera & bloom settings.

Experiment with the values to achieve the desired result. The preview of the viewer automatically updates to assist you in finding the perfect fit.

Step 6: Reorder, delete, and hide blocks

From the Editor section of your product page, you have the flexibility to manage your blocks effectively. You can reorder blocks by using the handles icon and dragging them through the list of available blocks.

If necessary, delete blocks using the bin icon located in the actions menu when hovering over each block or at the end of the list of block functions. Additionally, you can hide or show blocks by using the eye icon in the same actions menu or from the list of blocks, enabling you to deactivate or activate blocks on your page as needed.

By following these steps, you can seamlessly integrate Aryel's AR experiences into your Shopify website to elevate your customer's shopping experience!