What this guide does: Walks you through adding a Terrific live shopping or shoppable video block to your Shopify store, even if your theme doesn't support custom code out of the box.
Before you start, make sure you have:
Admin access to your Shopify store
Your Store ID and Embedding ID (your Terrific contact will send these to you)
Step 1. Create a custom code block in your theme
1. In Shopify, go to Online Store and in the published theme, click the three-dot button (...) and select Edit code.
2. In the left sidebar, find the Sections folder, right click and select New file:
3. Create a file named custom-code.liquid
4. Paste the following code, and click Save:
{% schema %}
{
"name": "Custom Code",
"tag": "section",
"class": "section",
"settings": [
{
"type": "textarea",
"id": "custom_code",
"label": "Custom HTML / Liquid / JS",
"default": "<div>Insert your custom code here...</div>"
}
],
"presets": [
{
"name": "Custom Code"
}
],
"enabled_on": {
"templates": ["index", "product", "collection", "page", "article", "cart"]
}
}
{% endschema %}
<div class="custom-code-block">
{{ section.settings.custom_code }}
</div>
Step 2. Add the Terrific script to your store
1. Go to Layout → theme.liquid:
2. Look for the line that says </head> near the top of the file:
3. Paste the following line just above it, replacing YOUR STORE ID with your actual Store ID:
<script src="https://terrific.live/terrific-sdk.js" storeid="YOUR STORE ID" async></script>
4. Click Save.
Step 3. Place your Terrific block on a page
1. Go back to Online Store → Edit theme.
2. Navigate to the page or section where you want Terrific to appear.
3. In the left menu, click Add Section, search for Custom Code, and select it:
4. Click on the new block that appears, and replace the placeholder text with:
<div data-source="terrific" embedding-id="YOUR-EMBEDDING-ID"></div>
5. Click Save, and that's it! 🎉
Pro tip: Once the block is live, you can drag and drop it anywhere on the page, and even add custom styles (colors, sizing, text) directly inside that same block.