Novel User GuideUser Guide
Generated with DocsHound AI
Shopify 1.0 Prerequisites

Shopify 1.0 Dynamic Source: Products Template

Overview

To add a dynamic source in Shopify 1.0, as part of the add to product 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 products 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 PDP Liquid File

In the left sidebar, click + add a section and name it novel-shoppable-video-pdp for clarity.

Copy and paste the below code snippet into this new section.

plaintext
## REQUIRED CODE SNIPPET FOR SHOPIFY 1.0 USERS ADDING DYNAMIC EMBEDS TO PDP 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 = product.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 - Product",
  "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 - Product"
    }
  ]

Click the Save button located in the top-right corner to create the section.

Reference Section

Locate the product template file in the Shopify code editor. Open the product.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 product-template and product-recommendations sections.

Add a reference to the new section by inserting the following line of code in the desired location.

plaintext
{% section 'novel-shoppable-video-pdp' %}

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.