LogoLogo
DocumentationWebsiteCommunityPortal
  • Get Started
    • Quickstart
    • Tutorials
    • Wizards
  • Features
    • Release Notes
      • 2024
        • 04-05 Apr Update
        • 03-27 Mar Update
        • 02-07 Feb Update
        • 01-23 Jan Update
        • 01-05 Jan Update
      • 2023
        • 12-18 Dec Update
        • 11-30 Nov Update
        • 10-30 Oct Update
        • 10-04 Oct Update
        • 09-18 Sep Update
        • 09-11 Sep Update
        • 08-28 Aug Update
        • 08-14 Aug Update
        • 07-23 July Update
        • 07-14 July Update
        • 06-16 June Update
        • 06-6 June Update
        • 05-16 May Update
        • 03-31 Mar Update
        • 03-16 Mar Update
        • 03-10 Mar Update
        • 02-07 Feb Update
        • 01-24 Jan Update
        • 01-10 Jan Update
      • 2022
        • 12-08 Dec Update
        • 11-13 Nov Update
        • 11-07 Nov Update
        • 10-26 Oct Update
        • 10-14 Oct Update
        • 10-01 Oct Update
        • 08-26 Aug Update
        • 08-02 Aug Update
        • 07-01 July Update
        • 06-08 June Update
        • 05-20 May Update
        • 05-05 May Update
        • 04-25 Apr Update
        • 02-11 Feb Update
        • 01-28 Jan Update
        • 01-10 Jan Update
      • 2021
        • 12-10 Dec Update
        • 12-01 Dec Update
        • 11-26 Nov Update
        • 11-17 Nov Update
        • 11-12 Nov Update
        • 11-09 Nov Update
        • 11-02 Nov Update
        • 10-26 Oct Update
        • 10-21 Oct Update
        • 10-14 Oct Update
        • 09-27 Sep Update
        • 08-31 Aug Update
        • 07-20 July Update
        • 07-02 July Update
        • 06-31 June Update
  • Metaverse
    • Building
      • Portal
        • Team Members
        • Defining Global Variables
      • Editor
        • File Manager
          • Selecting a file
          • Sketchfab Integration
        • Placement in 3D Space
        • Project Settings
          • Preferences
          • Branding
          • Collaborators
          • Menu
          • Variables in Settings
          • Lead Generation
          • Tour Mode
          • Advanced
          • E-Commerce in Settings
        • Preview
          • Headset Testing - WebXR Emulator
        • Viewport Properties
        • Editor Keyboard Shortcuts
      • Scenes
        • 3D Scene
          • Avatar System
          • Colliders
          • Zones
          • Lights
        • 360 Scene
        • Orbit Scene
      • Elements
        • Image
        • Video
        • Audio
        • GIF
        • Text to Speech
        • Character
        • Character AI
        • Actionbar
        • Timer
        • Polygon
        • Linked Popups
        • Variants
      • Rules
        • Shared Rules
        • How Rules Work
        • Number Variable Rules
        • String Variable Rules
        • Boolean Variable Rules
      • Variables
        • Autogenerated Variables
        • String Substitution
        • Capturing User Input
      • Build FAQs
    • Publishing
      • URL or QR Code
      • Embed on your Website
      • Full-Page HTML
      • Embedding within Apps
        • Android Embed
        • React Native Embed
      • Export as SCORM package
      • Authentication
        • SSO
        • Password With Expiry
        • Email with OTP
        • Custom List
        • Token
        • Load from another Experience
      • Publishing FAQs
      • Private Cloud Deployment
    • Multiplayer
      • Host Mode
      • Broadcast Mode
      • Voice Chat
      • Text Chat
      • Video Chat
      • Screenshare
      • Comments
      • Share Reactions
      • Notifications
      • Troubleshooting webcam and microphone
    • Analytics
      • Advanced Analytics
      • Leaderboard
      • Viewer Sessions
    • Integrations
      • GMetri with SCORM
        • Embed a SCORM package in a GMetri experience
      • Live Stream on GMetri
        • Live Stream Zoom on YouTube
        • Live Stream Zoom on Vimeo
          • Zoom Setup
      • E-Commerce with GMetri
        • Shopify Integration
        • WooCommerce Integration
        • Custom Integration
        • Using an E-Commerce Plugin
      • Adding a Chatbot
      • Sending data to GMetri Deployment
    • Viewing
      • Avatars
      • First/Third Person
      • Concurrency
      • Oculus Controls
      • Viewer Keyboard Shortcuts
      • IT Permissions
        • Whitelisting for Viewing Experiences
        • Whitelisting for Editing Experiences
        • Whitelisting for Analytics
        • Subprocessors
    • GMetri SDK
      • GMetri Player
      • GMetri SDK APIs
        • Project
        • Deployment
        • File
        • Viewer Group
      • GMetri Webhooks
      • API Token
      • Examples
  • Guidelines/Compatibility
    • Guidelines
      • Content Creation Guidelines
        • XR Experience Storyboard
        • 360 Degree Video Shoots
        • Avatars vs Characters
        • Designing 3D Models for Immersive VR mode
      • Asset Guidelines
        • 3D Models
          • Export GLB/GLTF from 3DS Max
          • Export GLB/GLTF from Blender
        • 360 Pano Images Render
        • Resources for Assets
        • Asset FAQs
        • Image Aspect Ratio
      • Experience Optimizations
        • Scene Optimizations
          • Performance Monitor
        • Image Optimizations
        • Audio Optimizations
        • Video Optimizations
        • 3D Model Optimizations
      • Workflows
        • Green Screen
          • Apply Green Screen to Videos
          • Accurate Color Selection
        • QR Code Scanner
        • Adding Sprites
        • Adding Background Music & Persistent Logo
        • EmbedHTML Snippets
    • Compatibility
      • Platform Requirements - Viewer
      • Platform Compatibility Matrix
      • Supported File Formats
      • Supported Browsers
      • Capture Network and Console Logs from Chrome Browser
    • Limitations
      • iOS Limitations
      • VR Mode Limitations
  • Platform
    • Billing
    • Platform FAQs
    • Security
    • Legal
Powered by GitBook
On this page
  • Shopify Integration
  • Prerequisites​
  • Integration with GMetri​
  • Testing the integration​

Was this helpful?

Edit on GitHub
Export as PDF
  1. Metaverse
  2. Integrations
  3. E-Commerce with GMetri

Shopify Integration

Shopify Integration

This tutorial will demonstrate how to integrate a Shopify Storefront within a GMetri experience.

Prerequisites​

There are a few steps that are required to enable Shopify Storefront API access on your shopify account.

  1. Login to you Shopify account using the admin account.

  2. From your Shopify admin, click Settings > Apps and sales channels.

  3. Click Develop apps.

  4. Click Create an app button on the top right and enter a friendly name.

  5. Select the app created in the previous step and click API Credentials tab.

  6. Click API credentials.

API credentials​

On the API credentials page,

  1. Click on Configure Storefront API Scopes

  2. Check all options available and save. These permissions allow GMetri experiences to pull information about products and manage cart and checkout sessions.

  3. Now click on Install app button and accept the terms and conditions.

  4. Note down the API access key generated, this will be required later.

Domain name​

Shopify creates a unique domain name for each of the stores created on their platform. The domain name is required in conjunction with the API credentials to enable a successful integration.

  1. From your Shopify admin, click Settings

  2. Your domain name will be printed on the top left of the page. Note it down for later.

Getting the product SKU​

To get a product's SKU

  1. From your Shopify admin, click Products > Select a product

  2. Note the URL in your browser window. The product SKU is the last part of the address like so:

    • If the URL in address bar is: https://my-store.myshopify.com/admin/products/7309350764729

    • Then the product SKU is 7309350764729

  3. Note the product SKU for later.

Integration with GMetri​

The Shopify Plugin will be automatically enabled based on your access and organization subscription. If you do not see the option to select Shopify, consider upgrading your subscription.

If you are the admin or a collaborator, then you can configure Shopify integration with GMetri.

  1. From you GMetri homepage, open the experience editor.

  2. From within the editor, click Settings > E-Commerce > Select Shopify from the dropdown

  3. Enter the Access token noted during Shopify API credentials configuration

  4. Enter the domain name noted during Shopify domain name configuration

  5. Check Show Cart Icon to enable showing a cart counter and checkout link to the shopify store from within a GMetri experience.

To link shopify products to interactions inside the experience, you need to follow the below steps:

  1. Click on Add New Product button

  2. Select a scene from the Scene Name dropdown. This the scene where the integration will work. Integration can be done with multiple scenes within a single experience.

  3. Select an element from the Element Name dropdown.

  4. Enter the Product SKU in the text field next. Ensure that the product SKU is correct.

Above setup will internally create a set of rules to open and pull information for the relevant products from shopify storefront whenever an element is clicked. The resulting rules would read out like so: "When Laptop-Image is clicked, then show product with SKU"

Testing the integration​

  1. From your GMetri editor, close the Settings page.

  2. Click on Play icon on the top right of the page and open a preview link

  3. Click on an element which was selected in the Ecommerce section.

  4. This should open up the product page with information from the shopify store, including pricing details, pictures and variants.

  5. Try adding the product to cart, increase and decrease the quantity of purchase.

  6. Click on Cart Icon on the top left of the page to goto shopify store and start the payment process.

PreviousE-Commerce with GMetriNextWooCommerce Integration

Last updated 3 months ago

Was this helpful?