How to Embed an Instagram Feed on BigCommerce (Step-by-Step)
How to put a shoppable Instagram feed on a BigCommerce store: connecting the store with a store-level API account, placing the embed with Page Builder's HTML widget (or Script Manager when that fits), what Instagram's API changes mean for your account, and how to fix the usual faults.
In this article
BigCommerce gives you two built-in ways to add third-party code to a Stencil storefront, and choosing the wrong one is the most common reason an Instagram feed ends up in the wrong place or loads on pages that don't need it. This guide walks through the connection, the placement and the checks, using BigCommerce's documented tools.
Page Builder or Script Manager?
Page Builder, HTML widget
Storefront › Themes › Edit in Page Builder, then drag the HTML widget into a region on the page.
Wins at
- Feed appears exactly where you place it
- Works on homepage, product, category, brand and custom pages
- Products can be opened in Page Builder directly from the product list
Struggles with
- Placement is per region, so check whether a region is shared (layers ending "-- Global" appear on every page)
- Invalid HTML can upset the editor preview
Script Manager
Storefront › Script Manager: header or footer placement, chosen page sets, a consent category and a load method.
Wins at
- One entry covers every storefront page
- Integrates with the cookie consent banner
- Choice of async or defer loading
Struggles with
- Places code in the header or footer, not mid-page
- Loads on every page in the chosen location, even where no feed is shown
For an Instagram gallery, the answer is almost always Page Builder. Idukki's embed code is a small block of HTML: a placeholder element carrying your account and widget IDs, plus a script that loads the widget into it. The placeholder has to sit where the gallery should appear, which is what the HTML widget does. Script Manager is worth using when your developer has added the placeholder to a theme template and only needs the loader added site-wide, or for a floating element that isn't tied to a place on the page.
Step by step with Idukki
Instagram feed on BigCommerce
- 01
Create an API account
In BigCommerce, go to Settings › Store-level API accounts and create an account. Copy the client ID and access token; BigCommerce won't show the token again.
- 02
Connect in Idukki
In Idukki's settings, open the BigCommerce integration, enter your store hash, client ID and access token, and run Test connection before saving.
- 03
Add Instagram
Add Instagram as a source: your handle, reels, a hashtag, or posts you're tagged in. Curate a collection and tag products.
- 04
Copy the embed code
Open the collection's publish step and copy the embed code.
- 05
Place it in Page Builder
Drag an HTML widget into the region you want, paste the code, save and publish.
Where to find the store hash. It's the short code in your control panel address: in `store-abc123.mybigcommerce.com`, the hash is `abc123`. Idukki's setup screen asks the API account for read access to products and orders.
Getting products ready to tag. Tagging needs your products in Idukki's catalogue. If they aren't there after connecting, the Products area can import a CSV or a product feed URL. Start with your 20 best sellers rather than the whole catalogue. Our guide to adding shoppable UGC to BigCommerce covers the wider rollout.
Two widgets on one page. The embed code checks whether the Idukki loader is already on the page before adding it, so a homepage with a gallery and a reels strip loads the script once.
The Instagram side: account type and permissions
Meta switched off the Instagram Basic Display API on 4 December 2024. Its replacements, the Instagram API with Facebook Login and the Instagram API with Instagram Login, are aimed at professional accounts; Meta describes the Instagram Login version as for "Instagram professionals: businesses and creators". If an older feed on your storefront froze that month, that is why, and the fix is a business or creator account plus a tool on the current API.
Permission is a separate question from access. Your own posts are yours to reuse; a customer's post found by hashtag isn't, until they agree. Instagram UGC rights request templates give you wording that works, and rights management explains how approvals are tracked.
Where the feed should go on a BigCommerce store
| Page | How to add it | What the feed does there |
|---|---|---|
| Homepage | Page Builder, homepage region | Brand proof for first-time visitors; a broad collection works. |
| Product page | Open the product in Page Builder from the product list's action menu | Shows the item in real use; tag the product on the posts you show. |
| Category page | Page Builder, category region | Styling ideas across a range. |
| Custom "Shop the feed" page | Page Builder, Create new page | A shoppable lookbook you can link from Instagram. |
For a feed that filters itself to each product across the whole catalogue, the widget supports a product filter attribute on the placeholder. On BigCommerce that means a developer adding the placeholder to the product template with the product's ID, which must match the ID in your Idukki catalogue. Check the IDs line up before rolling it out.
Performance and consent
Add `data-ugc-lazy="1"` to the placeholder element in your embed code for any feed below the fold: the widget then waits until the placeholder is within a few hundred pixels of the viewport before mounting. Reserve space so the page doesn't jump when images arrive (Google's good threshold for Cumulative Layout Shift is 0.1 or less); a wrapping `div` with a `min-height` in the HTML widget does the job. If you do use Script Manager, choose a script category honestly. BigCommerce's consent banner lets shoppers opt out of non-essential categories, and a feed is a functional feature, not an essential one. Core Web Vitals and UGC widgets explains how to read the before-and-after reports.
Troubleshooting
| Symptom | Likely cause | Fix |
|---|---|---|
| Feed appears on every page | Widget dropped into a Global region | Move it to a page-specific region in the Layers menu. |
| Feed shows in the header or footer, not mid-page | Embed added through Script Manager | Remove it there and use Page Builder's HTML widget. |
| Editor preview looks broken | HTML pasted with a missing closing tag | Re-copy the embed code in full; check on the live storefront. |
| Test connection fails | Mistyped store hash or token, or a deleted API account | Create a fresh API account and re-enter the details. |
| Feed missing for some shoppers | Script categorised in Script Manager and the shopper declined that category | Expected behaviour; don't recategorise a feed as essential to avoid it. |
| Posts stopped updating | Source account private, or relying on the retired Basic Display API | Make the account public and professional, then reconnect. |
FAQs
How do I add an Instagram feed to BigCommerce?
Get the embed code from your feed tool, open Storefront › Themes › Edit in Page Builder, drag an HTML widget onto the page and paste the code. Save, publish and check the live storefront.
Should I use Script Manager or Page Builder?
Page Builder for anything that appears in a specific spot on a page, such as a gallery. Script Manager for code that belongs in the header or footer across many pages, like a site-wide floating widget or a loader your theme template already calls.
Does BigCommerce have a built-in Instagram feed?
BigCommerce's Page Builder includes widgets for text, images, video and HTML, but a live, shoppable Instagram feed needs an app or an embed from a feed provider.
Why did my Instagram feed stop updating?
Most often because the tool relied on Meta's Basic Display API, which was switched off on 4 December 2024, or because the account went private. Convert to a business or creator account and reconnect.
Will an Instagram feed slow down my BigCommerce store?
Only if it loads everything at once or shifts the layout. Lazy-load feeds below the fold, reserve their height, and avoid loading the script on pages that don't show a feed.
Sources
- 1BigCommerce Help Center: Page Builder · Edit in Page Builder, HTML widget, global regions, pages that accept widgets
- 2BigCommerce Help Center: Using Script Manager · Placement, location, script category and consent banner, load method
- 3BigCommerce Docs: API accounts · Store-level API accounts; credentials shown once
- 4Meta for Developers: Update on Instagram Basic Display API · Unavailable from 4 December 2024
- 5Meta for Developers: Instagram API with Instagram Login · For Instagram professionals: businesses and creators
- 6web.dev: Cumulative Layout Shift (CLS) · Good CLS threshold of 0.1 or less
More from Rohin Aggarwal
- Strategy
Post-purchase and thank-you-page UGC
The thank-you page does two jobs: it reassures a fresh buyer (cutting remorse and returns) and recruits the next wave of UGC while goodwill is at its peak.
- Strategy
Exit-intent UGC: a last, honest word to the leaving shopper
Exit-intent is usually a coupon nobody asked for. Show a leaving shopper one piece of real customer proof instead: it answers the doubt without spending your margin.
- Strategy
Reducing cart abandonment with social proof
Social proof cannot touch the shipping bill, but it closes the doubt half of cart abandonment: light reassurance on the cart, customer proof in recovery flows.