Introduction

Shoppable videos are an excellent way to showcase your products in an engaging, interactive manner. By connecting your Mindstamp account to Shopify, you can quickly add your products to your Mindstamp page, create a customizable shopping cart, and have your users checkout seamlessly while remaining engaged in your content.

Below is an example of what can be done using the power of shoppable videos:

Connecting to Shopify

Prerequisites

In order to start using the Shopify <> Mindstamp integration, you will first need an active Shopify store. You will also need administrative access to the store. With both of these things, connecting your store to Mindstamp can be done quickly and easily.

Getting Started

Below we will walk through how to connect your Mindstamp account to your Shopify store. The process requires you to create a custom application and install it to your store.

Connecting Shopify to Mindstamp

In order to connect your Mindstamp account to Shopify, you will need to go to Account > Integrations in your Mindstamp account.



From the Integrations page, you will need to select the Shopify integration and select "Connect."



After clicking "Connect," you will see fields for your Shopify URL and you Storefront API access token. Both of these items can be found on you Shopify Admin Dashboard.

First, we will need to go to "Settings" in your Shopify Admin Dashboard:



From the Settings page, you can select "Domains" to find your Shopify site URL. In order to connect to Mindstamp, you will need your site that ends in "myshopify.com." Make note of one of the domains ending in "myshopify.com" because we will need it soon.



Next, we can go to "Apps and sales channels" to create a new application. From this page, select "Develop apps."



After clicking "Develop apps" you will be taken to a new window where you can click "Create an app."



You will then be prompted to provide a name. This name doesn't really matter, but for this demonstration, you can call it "Mindstamp" and click "Create App."



After creating the app, you will need to update the Storefront API access scopes by clicking "Configure Storefront API scopes."



The scopes that need to be updated are unauthenticated_write_checkouts, unauthenticated_read_checkouts, and unauthenticated_read_product_listings. Once checked, click "Save"





After saving the scopes, you can install the app by clicking "Install app".



After clicking "Install app" you will need to confirm by clicking "Install".



Next, we will see the Storefront Access Token needed for Mindstamp. You can click on the clipboard to copy your token.



You are now done with Shopify and can go back to Mindstamp where you can enter your myshopify domain and you access token from Shopify.



After clicking "Submit," you will see that you are now connected to Shopify as shown by the "Re-Connect" button.

Creating a Shoppable Video

Adding Individual Products

Using an existing Mindstamp video, you can add individual products to your videos. From the video editor, you can use the "Add To Cart" click action on Buttons, Images, Hotspots, and Text interactions.



For this demonstration we will create a button and select the "Add To Cart" Click Action.



From there, you are able to select the products that you would like to use for the video.



After selecting "Choose Product," you will see a dialog with all of the products in your store.



From this window, you will need to select one of your products that you would like to add to your video. Then, you will need to select a variant of that product. If you don't have a variant set up on your product, you will see the default value provided by Shopify.



After selecting the variant, you can save your interaction.



After adding a product to your video, you can use the {{checkout_url}} variable on any interaction or navigation or in the End Call-To-Action. This will take the viewer directly to the checkout page.

You will then see the button in your video. Once you click on the button, you will see the shopping cart icon with the number of products in your cart.



Clicking on the Shopping Cart, you will see all of the products you have clicked on. From there, you can see the details of all of the items in your cart and you can increase or decrease the number of items you have in your cart by clicking the plus icon or the trash icon. You can also go to checkout by clicking "Checkout."



Upon clicking the "Checkout" button, the viewer will be taken to the checkout page for payment.



Need help or want to know more about using Shopify with Mindstamp? We're here for you! Contact [email protected] to learn more

Updated on: 03/01/2024