Skip to main content

Shopify Integration Guide

Welcome to the official integration guide for connecting the GlamAR Virtual Try-On SDK with your Shopify store. This documentation will walk you through the step-by-step process of installing the GlamAR app, generating API credentials, syncing products, and customizing your theme to enable a seamless VTO experience.

Prerequisites​

  • A Shopify Partner or Merchant account
  • Access to console.pixelbin.io
  • Valid GlamAR API Token and Access Key

Installation​

Install the GlamAR App​

Image 1

  1. Visit the Shopify App Store
  2. Search for GlamAR Virtual Try-On.
  3. Click on the app and click Install App to add it to your Shopify store.
  4. After installing the application, the Shopify asset store will redirect you to your Shopify account. Log in to your store with GlamAR as a downloaded application.

Generate API Key & Token​

Image 2

  1. Visit console.pixelbin.io and log in.
  2. If you're a first-time user:
    • Create your organization.
    • Otherwise, select your existing organization.
  3. Navigate to Settings > API Keys.
  4. Click Create Token.
    • If a token already exists, you can Edit or Copy it.
  5. Note down your Access Key and API Token.

These credentials are required to connect your Shopify store with GlamAR services.

Configure GlamAR App in Shopify​

Image 3

  1. Go to your Shopify Admin and open the GlamAR app.
  2. Under Settings, paste your Access Key and API Token.
  3. Click Save.
  4. Optional: Open Shopify Code Editor to tweak the GlamAR SDK styling (CSS updates).

Add & Configure Products​

For accurate virtual try-on experience:

Image 4

  1. Navigate to Products > Add Product or select an existing product.
  2. Fill in all required details.
  3. Under product information, enter the SKU ID to be used by GlamAR.
  4. Click Save.

In GlamAR Console:

Image 5

  1. Return to console.pixelbin.io.
  2. Select your org and open the GlamAR module.
  3. Click Add Product or Select Existing Product.
  4. Fill/update required product metadata.
  5. Click Publish.
  6. Make sure the SKU ID matches with Shopify’s SKU.

Sync Products​

Image 6

To ensure Shopify products are reflected inside GlamAR:

  1. Open the GlamAR app in Shopify.
  2. Click on Feed Sync.
  3. This will sync all your product details from Shopify into GlamAR.

Domain Configuration​

Image 7

To activate GlamAR SDK on your storefront:

  1. In the GlamAR Console, go to Model Config > Domain Config.
  2. Add your Shopify store domain. Example: https://yourstore.myshopify.com
  3. Save the configuration.

This enables secure SDK rendering on your public site.

Customize Your Theme​

Image 8

To display the GlamAR VTO experience on product pages:

  1. Go to Online Store > Themes > Customize.
  2. Select the product page template.
  3. Add the GlamAR VTO block in the desired location (e.g., below Buy Button).
  4. Save the changes.

Image 9

Your Shopify store is now equipped with GlamAR's Virtual Try-On. Customers can interactively try on products like eyewear, makeup, or accessories directly from your product pages.