Novel User GuideUser Guide
Generated with DocsHound AI
Quick Start

Setup

Overview

Begin your journey with Novel by installing the Novel App on the Shopify app store, followed by a guided onboarding process, in which you can create your first journey from your Instagram/TikTok content while completing the installation process.

Click Install from Shopify

  1. Go to the Shopify App Store and search for the Novel app. Alternatively, click here to get straight to the Novel app page within shopify.

  2. Click on 'Add app' to install the Novel app to your Shopify store.

  3. Follow the on-screen prompts to connect your Shopify store with the Novel app.

After installing Novel through Shopify, you will be taken through a guided onboarding flow.

Connect & Import

Within this flow, the first step is to bring five of your short-form video content into Novel via either Instagram, TikTok, or both. While optional, we recommend that you import videos now so you can create your first journey and complete the installation process at the same time.

Enable (Shopify 2.0)

Click Enable Novel App

If you are on Shopify 2.0, you will be prompted to copy the journey ID that has been generated from your uploaded video content, and then click Enable Novel App. You will only need to click Enable Novel App once, and Novel will always be available as a section within your Shopify theme editor.

Enable (Shopify 1.0)

Most likely you are on Shopify 2.0 and can ignore this section. However, 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.

If you are on Shopify 1.0, you will need to complete an additional step to finalize the installation process before then embedding the journey on your homepage. This additional step will guide you to manually create a new Novel section using a code snippet.

If you do not complete this step, you will need to do so before embedding your first Novel journey. Specific instructions if you skipped this step during onboarding and you are on Shopify 1.0 can be found in our Shopify 1.0 installation prerequisite guide.

One Time Installation Prerequisite to Enable Novel on 1.0

  1. Open your Shopify theme editor and click on the three dots next to your theme name.

  2. Select Edit code to open the code editor.

  3. Scroll down to the Sections folder and click Add a new section.

  4. In the Add a new section modal, make sure the liquid radio button is checked and then in the File name field enter novel-shoppable-video and click Done.

  5. You will be in the Shopify code editor where you will see prepopulated code. Highlight and delete this code.

  6. Copy and paste the code in the block underneath this text and then click Save.

  7. When you are back in your theme editor, refresh the page.

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 %}

This allows the app to function similarly to the Online Store 2.0 architecture.

Frequently Asked Questions

  • At this time, you are unable to change the email address tied to your Novel account within the Novel interface. If you wish to do so. please reach out to us directly via our in-app knowledge assistant

  • Yes, if you need to do so, please request customer support to do this manually at support@benovel.com

  • Novel supports content from TikTok and Instagram.

  • We strongly recommend you import / upload at least 5 videos. Our popular carousel layout is built to have a minimum of 5 videos.

  • You can upload videos from Dropbox by dragging and dropping them into the Upload section in Novel. Make sure you're logged into Dropbox for seamless uploading.

  • Yes, you can set up Novel for different Shopify stores. To do this, install the app individually on each store. Log out of the Shopify store where Novel is already installed, and log into another store to repeat the installation process. Use the same main account and different emails for each store. Contact Novel support to ensure you're billed for only one account.

  • Install the Novel app separately on each Shopify store. Use unique emails by adding a plus sign and a unique identifier to your main email (e.g., joe+store1@benovel.com). Ensure you're logged out of any existing Novel-installed store before proceeding. Contact support to confirm single account billing and assist with content migration between accounts, if needed.