IdukkiIdukki
Industry playbook

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.

html
<!-- 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

CapabilityBigCommerce todayNotes
Galleries, carousels, reels, review wallsYesAny layout, any page, via the placeholder div
Product tagging and click trackingYesFrom CSV or feed import
Rights requests and moderationYesPlatform independent
Add to cart inside the galleryOpens the product pageIn-gallery cart writes are Shopify only
Order attribution to a postNot yetNeeds the BigCommerce order webhook, on the integration roadmap
Core Web Vitals impactNone measurableDeferred loader, reserved gallery height
What a BigCommerce merchant gets today versus a Shopify merchant.

The afternoon plan

  1. 1Connect Instagram or TikTok and let the first pull finish (a few minutes).
  2. 2Approve twenty to thirty posts so the first gallery is not empty.
  3. 3Import the catalog by CSV or feed URL; run AI tagging on the approved posts.
  4. 4Create a homepage gallery and a product-page gallery in the dashboard; copy each guid.
  5. 5Paste the loader in the footer template, the placeholders in home.html and product.html; publish the theme.
  6. 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

  1. 1BigCommerce Dev Center: Stencil theme templates
  2. 2Idukki: Inside the widget speed program
  3. 3Idukki: BigCommerce platform page
#bigcommerce#shoppable-video#install#stencil

Continue reading

1 piece in this cluster

These long-form pieces on the Idukki blog link back to this article, go deeper on the cluster.

More from Rohin Aggarwal

We use cookies

We use essential cookies to run this site and optional analytics cookies to understand how it’s used. You can change your choice anytime in our privacy policy.