Getting started with VIZBL on Shopify

Step 1: Upload your 3D models

Before you can enable AR and 3D viewer functionality on your Shopify product pages, you’ll need to upload your product models to VIZBL.

1. Open the VIZBL app from your Shopify Admin panel (Apps > VIZBL)
   
   
2. Log in to your VIZBL account. If you don’t have one yet, click Sign Up to create an account.
   
   
3. Upload 3D models of your products if you haven't already.

‍

Мore information on model upload steps, supported file types and optimization tips.

You’ll be able to assign these objects to your Shopify products in the next steps.

‍

Step 2: Connect your Shopify products to VIZBL 

To display the correct AR experience for each product, VIZBL uses a unique identifier called TINUUID. You’ll need to make sure each product in your store has this value set in its metafields.

‍

Check for an Existing TINUUID Metafield

1. Go to your Shopify Admin and open any product.
   
   
2. Scroll down to the Metafields section.
   
   
3. Look for a field labeled TINUUID.
   

If the field exists

Copy the TINUUID value from Vizbl Object Manager and paste it into this field for each product. (You can skip the next section and go directly to “Add the TINUUID to each product” below.)

If the field does not exist

You’ll need to add it manually. Follow the steps below.

‍

Add the TINUUID Metafield Manually

1. In your Shopify Admin, go to Settings > Custom data > Products.
   
   
2. Click Add definition.
   
   
3. Set the Name to TINUUID.
   
   
4. Choose Content type as Single line text.
   
   
5. Click Save.

‍
You’ll now see the TINUUID field available for all products.

‍

 Add the TINUUID to Each Product

1. Go to Products in your Shopify Admin.
   
   
2. Open any product where you’d like to enable the AR experience.
   
   
3. Scroll to the Metafields section.
   
   
4. You’ll now see the new TINUUID field.
   
   
5. Copy the matching TINUUID value from your VIZBL account and paste it into this field.
   
   

Complete this step for all products that will use VIZBL’s AR feature.

‍

Step 3: Set up the AR button or 3D viewer block

Now that your products are connected to VIZBL via the TINUUID metafield, you can display the AR experience directly on your storefront.

1. Open the Shopify Theme Editor (Online Store > Themes > Customize).
   
   
2. Navigate to the page or template where you want the AR button or 3D viewer to appear.
   
   
3. Select the appropriate section or block (e.g. product details or media).
   
   
4. In the right-hand settings panel, click the database icon to connect the block to product data.
   
   
5. From the list, choose the TINUUID metafield.
   
   
6. Click Save.
   ‍

‍

Once this is set, each product with a TINUUID will automatically show the AR button or viewer, connected to the correct 3D model.

Note: The button or viewer will only appear on products that have a TINUUID value assigned.

‍

You’re all set!

Your Shopify store is now connected to VIZBL. Customers can view your products in augmented reality directly from your product pages.

‍