Shopify 1.0 Prerequisites

Shopify 1.0 Installation Prerequisite

Overview

The first step in using Novel with Shopify 1.0 is to follow this installation prerequisite guide. This process has to be followed only once. If you do not complete this process, you will be unable to see Novel within the section modal when you click Add Sectionfrom Shopify admun.

Connect to Shopify Theme (1.0 Only)

If you cannot find Novel within the apps modal once you click Add Section in Shopify when embedding a Novel journey, this means you are using Shopify 1.0 and Novel has not yet been connected to your theme. In this instance, you need to follow the instructions below.

Open your Shopify theme editor and click on the three dots next to your theme name.
Select Edit code to open the code editor.
Scroll down to the Sections folder and click Add a new section.
Name the new section, for example, novel-shoppable-video, and click Done.
Copy the code snippet provided by below, click save and go back to your store. Make sure to refresh. You will now see novel.

plaintext

<style>
    div:has(> #embed-video--{{ section.id }}) {
        min-width: 0;
    }

    #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 = section.settings.journeyid -%}

<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.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://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",
  "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"
    },
    {
      "type": "text",
      "id": "journeyid",
      "label": "Video Journey ID"
    }
  ],
  "presets": [
    {
      "name": "Novel Embed"
    }
  ]
}

{% endschema %}

Missing Sections

If you add a section and it's empty, your Shopify theme might still use Online Store 1.0. You will need to add a code snippet to your store. Different snippets are required for the homepage, product page, and collection page.

Once you have added the new section code and refreshed the page, you should see the Novel Embed option available. This allows the app to function similarly to the Online Store 2.0 architecture.