How to add UGC and shoppable video to a BigCommerce store
A BigCommerce install is one script tag in the Stencil theme and a product feed. Here is what goes where, what works on day one, and what still needs the platform to catch up.
The BigCommerce merchant had four thousand tagged Instagram posts, a Stencil theme nobody on the team had opened in a year, and a developer quote for "a UGC section" that ran to three weeks. The section shipped in an afternoon. The three weeks had been the theme surgery, not the widget.
In this article
BigCommerce merchants ask the same two questions in the first ten minutes: where does the script go, and will it slow the page down. The answers are the footer template and no. The rest of this piece is the order of operations, with the honest line on what the platform does and does not let a widget do.
Where the script goes in a Stencil theme
Open the theme editor, choose Edit Theme Files, and find the footer template under templates/components/common/footer.html (some themes use layout/base.html for global scripts). Paste the Idukki loader script just before the closing body tag. The loader is a single deferred request of about 37 KB gzipped; it does not block render and it mounts nothing until it finds a placeholder.
<!-- Idukki loader: once per site, in the footer template -->
<script async src="https://widget.idukki.io/idukki.js"></script>
<!-- Placeholder: anywhere a gallery should render -->
<div data-ugc="idukki" data-guid="YOUR-WIDGET-GUID"></div>For a homepage gallery, the placeholder goes in templates/pages/home.html. For a product-page gallery, it goes in templates/pages/product.html, usually below the description tabs, and you add data-filter-pid with the product id so the gallery shows only posts tagged to that product. BigCommerce exposes the id in Stencil as product.id, so the attribute reads data-filter-pid="{{product.id}}".
Getting the catalog in so posts can be tagged
Idukki tags posts to products by matching against your catalog, so the catalog has to exist in the dashboard first. BigCommerce exports products as CSV from Products, then Export; the Idukki import accepts that file directly and maps SKU, name, price, image and URL. If you already run a Google Shopping feed, paste its URL instead and set a re-sync schedule; that keeps prices and stock current without another export.
Once the catalog is in, AI tagging suggests matches for each approved post and you confirm or correct them in bulk. The tagging model and its costs are covered in the build-versus-buy cost model; for a BigCommerce catalog of a few thousand SKUs the first pass usually finishes inside an hour.
What works on day one, and what waits on the platform
| Capability | BigCommerce today | Notes |
|---|---|---|
| Galleries, carousels, reels, review walls | Yes | Any layout, any page, via the placeholder div |
| Product tagging and click tracking | Yes | From CSV or feed import |
| Rights requests and moderation | Yes | Platform independent |
| Add to cart inside the gallery | Opens the product page | In-gallery cart writes are Shopify only |
| Order attribution to a post | Rolling out | Order webhooks are live (connect an API account in settings); matching orders back to posts is rolling out |
| Core Web Vitals impact | None measurable | Deferred loader, reserved gallery height |
The afternoon plan
- 1Connect Instagram or TikTok and let the first pull finish (a few minutes).
- 2Approve twenty to thirty posts so the first gallery is not empty.
- 3Import the catalog by CSV or feed URL; run AI tagging on the approved posts.
- 4Create a homepage gallery and a product-page gallery in the dashboard; copy each guid.
- 5Paste the loader in the footer template, the placeholders in home.html and product.html; publish the theme.
- 6Open the embed page in the dashboard and wait for the install check to turn green.
Download the BigCommerce UGC setup checklist
FAQs
Does Idukki have a BigCommerce app in the marketplace?
Not yet. The install is a script tag in the Stencil theme, which takes about as long as installing an app and does not depend on the theme having app-block support.
Will the widget hurt my Core Web Vitals?
The loader is deferred and the gallery reserves its height before content arrives, so it does not shift layout. The widget speed programme post has the measured numbers.
Can shoppers add to cart without leaving the gallery on BigCommerce?
Today the gallery opens the product page. In-gallery cart writes use platform cart APIs that are wired for Shopify; BigCommerce support follows the order-webhook integration.
Sources
Continue reading
1 piece in this clusterThese long-form pieces on the Idukki blog link back to this article, go deeper on the cluster.
More from Rohin Aggarwal
- Industry playbook
Seasonal UGC Playbooks: Valentine's, Mother's Day & Back-to-School
The quieter peaks convert as well as BFCM when you collect customer content ahead of them: a 6-week pre-season calendar with rights secured at entry.
- Industry playbook
TikTok Shop's developer platform changes (July 2024): what they mean for shoppable UGC
TikTok rebuilt its TikTok Shop developer docs and opened Widgets without an access request. What the TikTok Shop API actually covers (catalogue, orders, fulfilment, finance, affiliate), what it does not (your on-site video), and what a brand should ask its vendors.
- Industry playbook
How to run a delivery photo booth in a car showroom (and what to look for in one)
The handover is the one moment almost every buyer is in the showroom and happy to be there. What makes a handover photo worth sharing, four ways to take one compared side by side, consent and privacy (including India's DPDP Act), and a checklist. We make Idukki's Delivery Booth, and say so.