Contents:

There are two ways to embed your Smartzer project/playlist on your Shopify store.

First click the share tab in the top right corner of the Smartzer editor.

To embed a single project on your Shopify store, first select the ‘Shopify’ tab on the left hand side.

At this point, you need to pick the Theme that you would like to embed the project on

If you have not embedded a Smartzer project before, you may be prompted to ‘Click here to enable your SDK’. This allows you to toggle the Smartzer Project App Block on.

Once you have toggled on the Smartzer SDK, click save. Return to the Smartzer editor, and you will notice the share tab has been updated. If you do not see a change, check you clicked save in Shopify, then click the ‘I’ve done it’ button.

At this point there are 2 different experiences you may see, depending on if your store supports App Blocks or not.

If your screen looks like the below, app blocks are supported on your store and the embedding process is much easier. If not, skip to Experience 2 here.

Copy the ID of the project, and click ‘Add Smartzer Player To Store’.

This will automatically open your Theme Editor for you, and create a Smartzer Project block. If you don’t want the block on that page, you can remove it and add to the page you desire by doing the following:

Add a section to the page you wish to embed the player on. Here, select apps, and select Smartzer Project.

Next, paste the Project ID into the box, and configure any player settings to your liking. Save the changes and the project will now be embedded on the page.

If your screen looks like the below, your theme does not support app blocks. Here you can embed the player via a Custom HTML element.

Next, configure the relevant player and distribution settings to your preferences. Copy the embed code, and click ‘Go to My Theme Editor’.

This will automatically redirect you to your Shopify store. Check you are on the page you would like to embed the player on, then click ‘Add Section’ on the left. Select ‘Custom Content’ from the list.

Once this is added, add a block to your Custom Content section, and select Custom HTML.

Paste the embed code you copied over into the HTML box, and you will see the project is now embedded on your store. Configure the container width to your preference. Here we recommend 100%.

**Shopify add to cart automatically works - if you need custom code for updating the cart icon, please contact your Account Manager**

You can also embed your project within a Smartzer Playlist. To do this, click on ‘Playlist’ on the left hand side of the share area. Select the playlist you would like to add the project to, and click ‘add’. You can also edit this playlist by clicking the ‘edit’ button.

Alternatively, you can create a new playlist by clicking on the plus in the top right corner.

For details on how to embed a playlist on your Shopify Store, please read the steps within this article.