Shopify 1.0 Dynamic Source: Collections Template
Overview
To add a dynamic source in Shopify 1.0, as part of the add to collections page process as outlined in the embed journey guide, you will need to do so within the Shopify code editor.
The steps are straightforward and involve creating a Novel collections liquid file from a code snippet and then referencing the file within the product.liquid products template file.
Access Shopify Admin Code Editor
Open the Shopify admin interface and navigate to the Edit code for Debut section.
Create Collections Liquid File
In the left sidebar, click + add a section and name it novel-shoppable-video-collections for clarity.
Copy and paste the below code snippet into this new section.
## REQUIRED CODE SNIPPET FOR SHOPIFY 1.0 USERS ADDING DYNAMIC EMBEDS TO COLLECTION PAGES
<style>
#embed-video--{{ section.id }} {
background-size: cover;
background-repeat: no-repeat;
}
@media (max-width: 480px) {
.headline-column.column {
display: none;
}
.content-column.column section {
position: absolute;
left: 0;
right: 0;
width: 100%;
padding: 15px;
border-radius: 10px;
}
}
</style>
<div id="embed-video--{{ section.id }}"></div>
{%- assign journeyId = collection.metafields.custom.novel_journey_id -%}
<script>
;(async () => {
const journeyId = `{{ journeyId }}`
const embedSectionId = 'embed-video--{{section.id }}'
const embedElem = document.getElementById(embedSectionId)
const OVERLAY_EMBED_TYPE_UNIQUE_NAME = 'overlay'
const loadEmbedScript = (release) => {
window[`prefetchedJourneyRelease_${journeyId}`] = release
// const embedJsUrl = 'https://embed-js-dev.cadenza-dev.com/embed/index.js'
// const embedJsUrl = 'https://embed-js-staging.cadenza-dev.com/embed/index.js'
const embedJsUrl = 'https://embed-js.benovel.com/embed/index.js'
const script = document.createElement('script')
script.setAttribute('src', embedJsUrl)
script.setAttribute('journey-id', journeyId)
script.setAttribute('async', '')
embedElem.appendChild(script)
}
// const apiBaseUrl = 'https://qcv8n6d82k.execute-api.us-west-2.amazonaws.com/dev'
// const apiBaseUrl = 'https://hkngubjh1k.execute-api.us-west-2.amazonaws.com/stage'
const apiBaseUrl = 'https://eg2o7r7cs9.execute-api.us-west-2.amazonaws.com/prod'
const response = await fetch(
`${apiBaseUrl}/api/v2/journeys/${journeyId}/releases?type=PUBLISH&sort=createdAt&order=DESC&size=1`,
)
const releases = await response?.json()
if (
releases?.length &&
releases[0].isPublished &&
releases[0].embedConfigs[0]?.embedType?.uniqueName?.toLowerCase() === OVERLAY_EMBED_TYPE_UNIQUE_NAME
) {
const handleScroll = () => {
if (document.documentElement.scrollTop >= 25) {
loadEmbedScript(releases[0])
window.removeEventListener('scroll', handleScroll);
}
}
window.addEventListener('scroll', handleScroll);
} else {
const options = {
root: null,
rootMargin: '300px',
threshold: 0,
}
const observer = new IntersectionObserver((entries, observer) => {
if (entries) {
for (const entry of entries) {
if (entry.target.id === embedSectionId && entry.isIntersecting) {
observer.unobserve(entry.target)
loadEmbedScript(releases[0])
break
}
}
}
}, options)
observer.observe(embedElem)
}
})()
</script>
{% schema %}
{
"name": "Novel - Embed - Collection",
"tag": "section",
"settings": [
{
"type": "header",
"content": "JOURNEY CUSTOMIZATION",
"info": "To customize your video journey, please see our [Journey Customization Guide](https:\/\/novel.beehiiv.com\/p\/spotlight-carousel)"
},
{
"type": "header",
"content": "JOURNEY SELECTION"
}
],
"presets": [
{
"name": "Novel - Embed - Collection"
}
]Click the Save button located in the top-right corner to create the section.
Reference Section
Locate the collection template file in the Shopify code editor. Open the collection.liquid file. In this file, find the appropriate place where you want to add the shoppable video section. For instance, you might want to place it between the collection-template and collection-recommendations sections.
Add a reference to the new section by inserting the following line of code in the desired location.
{% section 'novel-shoppable-video-collection' %} Adjust the section name if you used a different name when creating the section.
After adding the reference, click the Save button at the top-right corner of the page to save your changes.