Overview
This guide walks you through connecting Terrific to your VTEX store. The integration has two parts:
Back-to-Back Integration. Syncs your product catalog and connects Terrific's cart to VTEX's checkout. This ensures product data, prices, and purchases flow correctly between both platforms.
Front-End Embedding. Places Terrific components (Live Shopping, Shoppable Video, Timeline, etc.) on your storefront. How you do this depends on which VTEX version your store runs: VTEX Legacy or VTEX IO.
Step 1. Generate API Credentials
Terrific connects to VTEX using an API Key and Access Token. You'll need to create these in your VTEX Admin.
1. In your VTEX Admin, go to Account Settings → API Keys.
2. Click Generate Key:
3. Give it a label like Terrific Integration:
4. Assign permissions for: Catalog API, Checkout API, Pricing, and Logistics. If no custom roles exist, Owner-level access works:
5. Copy both the Key and Token immediately. the token is only shown once.
6. Share them securely with the Terrific team.
We use the latest version of the REST API available as of today (September 19, 2026) as our reference.
You can watch the detailed video here.
Step 2. Embed Terrific on Your Storefront
Which VTEX version are you on?
| VTEX Legacy | VTEX IO |
Tech stack | HTML/CSS/JS templates via Portal CMS | React + Node.js, deployed via VTEX IO CLI |
Complexity | Low. Edit templates directly | Medium. requires CLI and app deployment |
Best for | Traditional stores | Modern, custom storefronts |
Option A: VTEX Legacy
No build tools needed: you edit templates directly in the VTEX Admin.
Add the global script (once, site-wide)
1. Go to Storefront → Layout → CMS:
2. Open CMS and find the base template used by most pages:
3. Paste this inside the <head> tag, replacing YOUR_STORE_ID with your Terrific Store ID. You can ask your CSM for your Store ID:
<script src="https://terrific.live/terrific-sdk.js" storeid="YOUR_STORE_ID" async></script>
Embed a Terrific component (e.g., homepage, product page)
4. Navigate to the page or section where you want the component.
5. Add a Custom HTML module
6. Paste the embed tag:
<div data-source="terrific" embedding-id="YOUR_EMBEDDING_ID"></div>
Option B. VTEX IO
This requires VTEX IO CLI and familiarity with VTEX workspaces.
Terrific Embedding App
1. Downoload the project here.
2. Open it, and in the manifest.json file, replace the vendor name with your own:
3. Authenticate and set up your workspace:
vtex login {accountName}
vtex use {workspaceName} # creates workspace if it doesn't exist
Your Store-Theme
4. Run vtex link in store-theme using the same workspace.
5. Reference the component in store-theme's manifest.json in the dependencies using the format:
"{vendor}.terrific-embedding-app": "0.x"Replace the {vendor} name with your own.
6. 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:
7. Run some tests using the same workspace.
Using the component
1. In the VTEX Admin of your workspace, go to Apps > App Management, find the Terrific App, and click Settings:
2. 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.
3. Head to Storefront > Site Editor in your workspace VTEX Admin:
4. 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:
5. 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.
6. Hit Save, and check the live preview on the left. Then refresh your store in the browser. You will find your embed alive.
7. Promote your changes to production in both workspaces, following the VTEX guideline. Start with the Terrific Embedding App workspace, and then repeat the process for Store-Theme.