Embed Journey
Overview
Learn how to embed Novel journeys into your Shopify storefront to embed your Novel journey to your Shopify storefront pages.
In order to embed a journey, you must have enabled the Novel app, created a Journey and copied the Journey ID. If you have not yet created a journey, follow our Create Journey guide. If you have not yet signed up for Novel, view our setup guide, which will take you to our guided onboarding which will take you through both processes at once.
Key Distinction: Which Pages?
You are a variety of options with Novel to embed journeys onto your Shopify website depending on where you want the embedded videos to appear – in other words, where do you want to add them?
If you want to add a journey your homepage, view the Add to Product Template section.
If you want to add a journey all product pages, view the Add to Product Template section.
If you want to add a journey a single product page, view the Add to Product Page section.
If you want to add a journey all collections pages, view the Add to Collection Template section.
If you want to add a journey a single collection page, view the Add to Collection Page section.
If you want to add a journey all product pages, view the Add to Product Template section.
Add To Homepage
Here, you can learn how to embed your Novel journey onto your Shopify website's homepage.
Add to Homepage (Shopify 2.0)
Copy the video journey ID you generated from the Novel app, in the studio, from the Publish & Install modal, when creating a journey.
Go to admin.shopify.com , log in if necessary, and then go to the Shopify theme editor. Go to your homepage within the theme editor.
This will trigger a modal where you can see two tabs: Sections and Apps. Within the Apps tab, click Novel Embed. You will then see the Video Journey ID field within the Journey Selection section within the Novel Embed modal in the left sidebar menu within your Shopify theme editor. Paste the Video Journey ID here.
Add to Homepage (Shopify 1.0)
Provided you followed the Shopify 1.0 installation prerequisite guide to connect Novel to your Shopify storefront's theme, and you have refreshed the page, go to the theme editor if you are not already on it. In the left sidebar menu, click + Add Section.
This will trigger a modal where you can see two tabs: Sections and Apps. In Shopify 1.0, Novel appears only within the Sections tab. Within the Sections tab, click Novel Embed. You will then see the Video Journey ID field within the Journey Selection section within the Novel Embed modal in the left sidebar menu within your Shopify theme editor. Paste the Video Journey ID here.
Add To Products Template
Here, you can learn how to embed your Novel journey into all of your product pages. This will put your Novel journey embed on all product pages tied to this template.
Add to Products Template (Shopify 2.0)
Copy the video journey ID you generated from the Novel app, in the studio, from the Publish & Install modal, when creating a journey.
Go to admin.shopify.com , log in if necessary, and then go to the Shopify theme editor. Go to your product template (often Default product) within the theme editor.
Then, click Add Section. You will then see a component in the primary content area that has two tabs, Sections and Apps. Click Apps and search for Novel.
Paste the video video journey ID into this field. Make sure to enter the ID correctly to ensure the video loads properly.
After pasting the journey ID, save your changes. This action will update the page with the embedded video content.
On the sidebar, you will see an Apps section with a Novel Embed item. Click it and then paste your video journey ID. Your Novel journey will now appear on all product pages that are tied to the specific product page template on your Shopify website.
Add to Products Template (Shopify 1.0)
Provided you added followed the Shopify 1.0 installation prerequisite guide to connect Novel to your Shopify storefront's theme and you have refreshed the page, go to the theme editor if you are not already on it. In the left sidebar menu, click + Add Section.
This will trigger a modal where you can see two tabs: Sections and Apps. In Shopify 1.0, Novel appears only within the Sections tab. Within the Sections tab, click Novel Embed. You will then see the Video Journey ID field within the Journey Selection section within the Novel Embed modal in the left sidebar menu within your Shopify theme editor. Paste the Video Journey ID here.
Your Novel journey will now appear on all product pages that are tied to the specific products template on your Shopify website.
Add To Collections Template
Here, you can learn how to embed your Novel journey into all of your product pages. This will put your Novel journey embed on all collections pages tied to this template.
Add to Collections Template (Shopify 2.0)
Copy the video journey ID you generated from the Novel app, in the studio, from the Publish & Install modal, when creating a journey.
Go to admin.shopify.com , log in if necessary, and then go to the Shopify theme editor. Go to your collections template within the theme editor.
Then, click Add Section. You will then see a component in the primary content area that has two tabs, Sections and Apps. Click Apps and search for Novel.
Paste the video video journey ID into this field. Make sure to enter the ID correctly to ensure the video loads properly.
After pasting the journey ID, save your changes. This action will update the page with the embedded video content.
On the sidebar, you will see an Apps section with a Novel Embed item. Click it and then paste your video journey ID. Your Novel journey will now appear on all collection pages that are tied to the specific collections template on your Shopify website.
Add to Collections Template (Shopify 1.0)
Provided you added following the Shopify 1.0 installation prerequisite guide in order to add Novel to your Shopify storefront's theme and you have refreshed the page, go to the theme editor if you are not already on it. In the left sidebar menu, click + Add Section.
This will trigger a modal where you can see two tabs: Sections and Apps. In Shopify 1.0, Novel appears only within the Sections tab. Within the Sections tab, click Novel Embed. You will then see the Video Journey ID field within the Journey Selection section within the Novel Embed modal in the left sidebar menu within your Shopify theme editor. Paste the Video Journey ID here.
Your Novel journey will now appear on all collections pages that are tied to the specific collections template on your Shopify website.
Add To Product Page
If you want to embed your shoppable Novel Journey within unique product pages, rather than embedding your Journey at the template and therefore adding it to all product pages, this requires a separate sequence of steps.
Access Settings
First, visit admin.shopify.com, go to your store and click Settings at the bottom left in Shopify's sidebar navigation.
Access Custom Data
Next click Custom Data, from within Shopify's settings.
Create Product Metafield
An essential prerequisite in having the ability to place a unique Novel video journey on a product page is to create a meta field definition.
This enables you to have the ability to add a video journey ID to a single product page. Without creating a product metafield, you will be unable to add a unique video journey ID to an individual product.
To do so, select Products from the Custom data screen.
Enter Novel Journey ID into the Name field so you can easily identify it. Leave namespace blank.
Within the descriptionfield, enter whichever description you want, for example, 'This is the ID for the Novel shoppable video'.
Click on Select type and choose Single line text from the dropdown menu. Then click Save.
Insert Dynamic Source to Products Template
Navigate back to your Shopify admin theme editor and go to your products template. Click Novel Embed within your left sidebar menu where you have previously placed the section.
Please note that if you are using Shopify 1.0, you will need to add the dynamic source separately, Please view our Shopify 1.0 Dynamic Source guide and return here.
Click the stacked discs icon at the top right of the Video Journey ID.A modal will appear where you will see the the option to add a Novel Journey ID: Single line text metafield that we just added.
Click save. Exit the theme editor by clicking the exit icon.
Add Video Journey ID to Individual Product
After completing the previous steps, you will now be able to paste a specific Novel Journey ID into a Metafield tied to that specific product within the Shopify admin interface.
To illustrate how to do this for a single product, first, copy the video journey ID you generated from the Novel app, in the studio, from the Publish & Install modal, when creating a journey.
Navigate to Products
Go back to your Shopify admin interface and access your product catalog by clicking Products. Click the specific product whose page you would like the Novel embed to display. At the bottom of the page, paste the Novel Journey ID into your Novel Journey ID field that appears in the Metafields section. Click Save.
Now, a specific Novel Journey will appear only on that specific product page.
Add To Collection Page
If you want to embed your shoppable Novel Journey within unique product pages, rather than embedding your Journey at the template and therefore adding it to all product pages, this requires a separate sequence of steps.
Access Settings
First, visit admin.shopify.com, go to your store and click Settings at the bottom left in Shopify's sidebar navigation.
Access Custom Data
Next click Custom Data, from within Shopify's settings.
Create Collections Metafield
An essential prerequisite in having the ability to place a unique Novel video journey on a product page is to create a meta field definition.
This enables you to have the ability to add a video journey ID to a collection page.
You will need to create a meta field definition to add a video journey ID to a single collections page.
First, select Collections from the Custom data screen.
Enter Novel Journey ID into the Name field so you can easily identify it. Leave namespace blank.
Within the descriptionfield, enter whichever description you want, for example, 'This is the ID for the Novel shoppable video'.
Click on Select type and choose Single line text from the dropdown menu. Then click Save.
Insert Dynamic Source to Collections Template
Navigate back to your Shopify admin theme editor and go to your collections template. Click Novel Embed within your left sidebar menu where you have previously placed the section.
Access the Insert dynamic source modal by clicking the stacked discs icon at the top right of the Collections Video Journey ID.A modal will appear where you will see the the option to add a Collections Novel Journey ID: Single line text metafield that we just added.
Click save. Exit the theme editor by clicking the exit icon.
Add Video Journey ID to Individual Collections Page
You are now able to paste a specific Novel Journey ID into a Metafield tied to that specific collections page within the Shopify admin interface.
To illustrate how to do this for a single collection, first, copy the video journey ID you generated from the Novel app, in the studio, from the Publish & Install modal, when creating a journey.
Navigate to Collections
Go back to your Shopify admin interface and access your product catalog by clicking Collections. Click the specific collection whose page you would like the Novel embed to display. At the bottom of the page, paste the Novel Journey ID into your Collections Novel Journey ID field that appears in the Metafields section. Click Save.
Now, a specific Novel Journey will appear only on that specific collections page.
The method of adding a dynamic source is separate. After creating the metafield, view our Shopify 1.0 Dynamic Source guides for Products template and Collections.
If you cannot find Novel within the apps modal once you click Add Section in Shopify, you are most likely using a legacy Shopify 1.0 theme and did not complete the 1.0 specific installation during onboarding. Please reference our Shopify 1.0 Installation guide.