Terrific's Embedding App for VTEX IO lets you place any of our three embed types: Shoppable Video, Live Shopping, and Carousel directly into your store's pages using native VTEX blocks. No custom code required beyond a couple of config files.
đĄ Before you start: We recommend setting up a test workspace in VTEX before making changes in production. That way you can preview everything safely first.
Step 1. Add the app as a dependency in your Store Theme
Open the manifest.json file of your store's Store Theme and add the following line inside the dependencies block:
"{{vendor}}.terrific-embedding-app": "0.x"
Replace {{vendor}} with your VTEX account name. For example:
"mystore.terrific-embedding-app": "0.x"
Step 2. Place the component on your pages
In the .jsonc files for the pages where you want the embed to appear (for example, home.jsonc), add terrific-embed as a block:
Or as a child inside a flex-layout component:
Using more than one embed on the same page? No problem: just give each instance a unique name using VTEX's standard block naming convention:
"terrific-embed#carousel-1"
"terrific-embed#pop-up"
Once you've added the block reference, declare the component in the blocks list with empty curly braces. This step is required, skipping it will throw a console error:
When you're done, deploy the changes to your store.
Step 3 . Connect your Terrific Store ID
In your VTEX Admin, go to Apps > App Management, find the Terrific App, and click Settings:
Enter your Terrific Store ID in the available field and click Save:
Don't have your Store ID yet? Reach out to your Terrific CSM and they'll get it to you. You'll only need to do this step once.
Step 4. Configure your embeds
Head to Storefront > Site Editor in your VTEX Admin:
Navigate to the page where you placed the component (e.g., the Home). You'll find it listed as Terrific Toolbelt in the Blocks panel on the right side:
Click on it to open its settings:
Embedded ID. Paste your Terrific embed ID here. This works for all three embed types: Popup, Inline, and Carousel.
Enable popup. Keep this toggled on. It's what makes the component actually render on the page.
Custom CSS. Optionally, you can add custom CSS in the field to style the embed's parent container.
Hit Save, and check the live preview on the left. Then refresh your store in the browser: your Terrific embed is live. đ