Adding a Terrific Carousel to your website is a great way to bring a social media-style video experience to your pages, and it only takes two small code snippets to get it live!
Before you start, make sure you have your Terrific Store ID and your Carousel Embedding ID handy. We'll walk you through how to find both below.
Step 1. Add the SDK to your site's <head>
First, paste the following script inside the <head> section of your website. This loads the Terrific SDK and tells your site which store it belongs to:
<script src="https://terrific.live/terrific-sdk.js" storeid="YOUR_STORE_ID" async></script>
Before saving, replace YOUR_STORE_ID with your actual Store ID. Not sure what yours is? Just ask your Customer Success Manager, they'll send it right over.
Heads up: The SDK only needs to be added once per site: even if you're using multiple Terrific features like Live Sessions and Carousels. If you've already added it for another Terrific integration, you can skip this step and go straight to Step 2.
Step 2. Add the Carousel block to your page's <body>
1. Log in to your Terrific store and click on your name in the top right corner:
2. A menu will open, select "Admin Panel":
3. In the left-hand menu, click Carousels:
4. Find your carousel, click the three dots (⋯) and select Preview & Embed:
5. Copy the script:
6. Paste the script inside the <body> of the page where you'd like the carousel to appear.
And that's it! Once both snippets are in place, your carousel will start showing up on your site. 🎉
A couple of tips before you go live
Best placement: We recommend placing the carousel in the header area of your homepage, right below your main advertising banners: it tends to get the most visibility there.
Expand your reach: Consider adding the carousel to your product and content pages as well. The more places it appears, the more chances your visitors have to engage with your content.
Embedding on Shopify via Custom Liquid
If your store runs on Shopify, you can use the Custom Liquid component to embed your carousel: no need to touch your theme's code directly.
Heads up: This method is only for the script body (Step 2). The SDK script from Step 1 still needs to go in your site's <head> tag.
1. Log in to your Shopify store and go to Online Store → Themes, then click Edit theme:
2. Navigate to the page where you'd like to show the carousel:
3. In the Template section on the left, click Add section:
4. Search for and select Custom Liquid:
5. Paste your carousel snippet into the Custom Liquid box and save.
Tip: You can drag and drop the Custom Liquid block to position the carousel exactly where you want it on the page.
Embedding on Shopify directly in the code
Prefer to work directly in the code? No problem:
1. In your Shopify store, go to Online Store → Themes, click the three-dot button, and select Edit code:
2. Choose the theme or template where you'd like the carousel to appear.
3. Find the right spot in the <body> and paste your carousel snippet there:
4. Save your changes and you're all set!
Still have questions? Your Customer Success Manager is always happy to help you get everything set up just right.