Objective
The purpose of this document is to outline the process for creating a custom HTML component in Shopify themes that don’t have it enabled by default, allowing you to embed any Terrific component using SDK 2.0.
Step by Step
Requirements
Admin access to Shopify.
Active theme without custom HTML components enabled.
Terrific scripts with specific keys (
storeId,embeddingId).
Create an Custom HTML component
Go to Online Store > Themes.
In the published theme, click the three-dot button (...) and select Edit code.
In the code editor, find the Sections block in the sidebar and click New file.
Create a file named
custom-code.liquidPaste 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>
Terrific Embeds
Once our component is created, we proceed to embed our Terrific component.
Add the SDK in the <head>
To add the SDK in the
<head>, go back to the code editor following the previous steps, but now navigate to Layout > theme.liquid.Open the file and insert the following line of code just before the closing
</head>tag:
<script defer src="https://terrific.live/terrific-sdk.js" storeId="YOUR-STORE-ID"></script>and click Save.
A member of the Terrific staff will provide you with your storeId.
Add a Terrific block to your store
Go back to Online Store > Themes. On the same theme where you added the custom HTML component and the SDK script, click Customize.
Navigate to the section where you want to add your Terrific component (Live Session, Timeline, Shoppable Video, Polls, etc.).
In the left menu, under Template, click Add Section, find the component you created “Custom Code,” and select it.
A new component will be added to your section.
Click on it and replace the default content:
<div>Insert your custom code here...</div>
with this code:
<div>
<div data-source="terrific" embedding-id="YOUR-EMBEDDING-ID"></div> </div>
A member of the Terrific staff will provide your embedding-id.
5. You will see your Terrific block in the theme preview. Click Save and you’re done.
NOTE: Once the component is created, you can drag and drop it to position it wherever you want. You can also add styles directly in the Custom Code block you created to adjust sizes, add text, etc.