How to add an Instagram feed to your BigCommerce store

The short version

1. Create a feed in Social Feed by grip space and copy its embed code (one script tag).
2. In BigCommerce, open Page Builder, drag an HTML widget into a region, paste the code and click Save HTML.
3. Click Save, then Publish, and check the live storefront.

The rest of this article covers each step in detail, which region to choose, and what to do if the feed does not show up.

Before you start

A personal Instagram account can be switched to a professional account for free in the Instagram app. If you are not sure which type you have, see our guide to Instagram professional accounts.

Step 1: Create the feed and copy the embed code

1. Sign up for Social Feed by grip space with your email address. The Free plan needs no credit card.
2. Click “+ Connect Instagram account” and sign in with your Instagram professional account.
3. Open “Settings & preview” and choose a grid or a slider, the number of posts and columns, spacing and what happens when a visitor clicks a post. The preview updates as you go.
4. Save, then click “Copy” under “Add the embed code to your website”. The code looks like this:

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

The feed is drawn right where this script tag sits on the page. That one detail matters a lot when you decide between the HTML widget and Script Manager, as explained further down. Any settings you change later in the dashboard show up on your store automatically; you do not need to paste the code again.

Step 2: Add the feed with a Page Builder HTML widget

These steps follow BigCommerce’s help articles on Page Builder. Labels can change as BigCommerce updates the control panel, so your screen may differ slightly.

1. In the control panel, go to Storefront › Themes and open Page Builder (BigCommerce’s articles call the button Customize or Edit in Page Builder). If you use multiple storefronts, each storefront’s themes are in its own settings in Channel Manager.
2. Navigate to the page you want to change, such as the homepage. To work on a specific product, category or brand, you can also choose View in Page Builder from the Action menu (⋯) in that list.
3. In the Page Builder menu on the left, find the HTML widget and drag it into one of the regions on the page.
4. An HTML code box appears in the left menu. Delete the default code and paste your Social Feed embed code. Expand HTML Editor opens a larger editor if you need it.
5. Click Save HTML. This stores the code and refreshes the preview.
6. Click Save at the top right, then Publish. BigCommerce notes that saved changes are not visible on your storefront until they are published.
7. Open your live storefront in a normal browser window and check the feed on a computer and on a phone.

BigCommerce’s own help uses the same pattern for other third-party code: its guide to adding a GeoTrust site seal has you drag an HTML widget into the footer’s global region and paste the seal script into it. Pasting a third-party script into the HTML widget is a normal use of it.

BigCommerce’s documentation does not say whether scripts run inside the Page Builder editing view. Many site editors do not run embedded scripts while you are editing, so if the feed does not appear in the editor, judge it on the published storefront before assuming something is wrong. Page Builder also has a Preview mode for interacting with the page as a customer would.

Choosing a region: where the feed will appear

Page Builder widgets live in regions that your theme defines. BigCommerce describes two kinds:

In Cornerstone 4.11 and higher, BigCommerce says there is a default global region on every page except checkout, just below the category menu or navigation. BigCommerce’s GeoTrust seal guide also refers to a global region in the footer for Cornerstone 5.4.0 or newer. Other themes have different regions, so check your theme’s documentation.

A global region near the top of every page is usually not the best place for a photo feed: it pushes your products down on every page. If your theme has a footer global region, that is a better fit for a site-wide feed. Otherwise, use page-specific regions on the pages where the feed helps most.

BigCommerce notes that some pages have widget regions built in and that templates without regions can be edited to include them, and that depending on your theme you may need to update the theme or edit template files first. If you cannot find a region where you want the feed, that is the reason.

Product pages and category pages

BigCommerce’s help says widgets can be added to several pages, including the homepage, product pages and category pages. For an online store, product pages are an interesting place for a feed, because photos of real customers or styled shots can help a shopper decide.

Whether a widget you add while viewing one product appears on that product only, or on every product page, depends on the region and your theme. After publishing, open a different product page and check. If you want a feed on just a few products, that check tells you whether the region you chose is the right one.

Two settings in Social Feed are especially useful on product pages:

1. Slider layout: one row of posts that visitors can swipe through. It stays compact and does not push your reviews or related products far down the page.
2. Caption keyword filter: show only posts whose caption contains a word or hashtag you choose, such as a product line name you use in your captions. Combined with one widget per product line, each product page can show related posts. This is a filter on your own posts; it does not pull in posts from a hashtag across Instagram.

Be aware that the feed is not shoppable. Posts are not linked to products, and visitors who click a post see it larger in a lightbox or on Instagram, depending on your setting. The feed works as inspiration and social proof next to your products, not as a product catalog.

Why Script Manager is not the right tool for a visible feed

Script Manager (in the control panel under Storefront › Script Manager) is BigCommerce’s place for site-wide scripts such as analytics or chat tools. It is tempting to use it for a feed too, because it adds code to every page at once. But it works differently from the HTML widget:

The Social Feed widget draws the feed right after its own script tag. With Script Manager, that tag is in the header or the footer of the page:

1. Header placement: the script runs inside the page’s head section, which is not displayed. The feed has no visible place to appear.
2. Footer placement: the script is added in the footer scripts area, so the feed appears near the end of the page rather than in a spot you choose, and you cannot move it with Page Builder.

For a feed, use the HTML widget instead. Script Manager would also put the feed on pages where it does not belong, like checkout, if you choose “All pages”. The same applies to the legacy Footer Scripts field, which BigCommerce still supports but recommends moving to Script Manager.

Advanced option: editing theme files

BigCommerce’s GeoTrust guide mentions editing theme files as another way to add code. If you or a developer are comfortable with Stencil templates, you can paste the script tag directly into a template at the exact place where the feed should appear, for example in a product page template. Keep in mind that changes to theme files may need to be redone when you update or change your theme. For most stores, the HTML widget is simpler.

Choosing settings for a store

The number of posts depends on your plan: up to 16 on Free, 30 on Light and 50 on Standard. You set the number of columns once; the widget measures the width of the space it is placed in and automatically uses fewer columns when images would become too small, so you do not need separate phone settings. The maximum width setting (up to 2,000 pixels) keeps a feed from stretching across a very wide region.

For more on layout choices, see Grid or slider? Choosing a layout for your Instagram feed.

What shoppers see and can do

1. Account header: above the feed you can show your profile picture, username and number of posts, with a follow button. You choose which items to show, and you can change the button text and color.
2. Hover: on a computer, hovering over a post can show an Instagram icon with the number of likes and comments, or you can turn this off for a cleaner look next to your products.
3. Click: open the post larger in a lightbox on your store, open it on Instagram in a new tab, or do nothing. The lightbox keeps shoppers on your store and can show the caption and like count, with a “View on Instagram” link.
4. Carousel posts: the tile shows the first image; in the lightbox you can show only that image or let shoppers page through all of them.

For a store, the lightbox is usually the better choice: shoppers see the photo up close without leaving the page they were about to buy from.

Several feeds in one store

Each widget has its own embed code, design and filters. You can create widgets for the homepage, product lines and a lookbook page, and copy settings from one widget to another. The Free plan includes one widget, the Light plan three and the Standard plan an unlimited number.

Every widget shows posts from the account it is connected to; one feed shows one account. Compare the plans in the pricing section.

Page speed and layout shift

A feed adds images to the page, so it has some effect on loading. Social Feed keeps this small: in a grid, only the first row of images loads right away and the rest load as the visitor scrolls near them. A slider loads all of its images at once, so keep its post count modest. Images and videos are loaded directly from Instagram’s servers.

Because the feed is drawn by a script, it appears slightly after the rest of the page, and content below it moves down. Placing the feed below your product information, rather than above it, keeps that movement out of the way of shoppers and avoids it affecting the most important content on the page.

Cookies and consent

BigCommerce’s cookie consent banner, when enabled, lets shoppers opt out of categories of scripts added through Script Manager. BigCommerce’s article describes these categories for Script Manager; it does not describe consent handling for code in an HTML widget. The Social Feed widget does not set cookies or use browser storage; it loads images from Instagram and counts views of your feed so you can see them in the dashboard and so plan limits can be applied. How you describe embedded third-party content in your privacy policy is your decision.

Troubleshooting

1. Nothing appears on the live store. Check that you clicked Save HTML, then Save and Publish. Then check that the widget is set to Published in the Social Feed dashboard.
2. It shows in one place but not another. The region you chose may belong to a single page. Use a global region, or add the widget to each page.
3. The code appears as text. It was pasted into a text widget instead of the HTML widget. Remove it and use the HTML widget.
4. The feed is in the wrong place or missing after using Script Manager. Remove the script there and use a Page Builder HTML widget instead, as explained above.
5. Only part of the code was pasted. The code must run from <script to </script>. Copy it again from the dashboard.
6. Your store uses a Content Security Policy. Allow scripts and images from https://n246.grip.space, and images and videos from Instagram’s servers. The browser console shows what was blocked.
7. New posts are not showing yet. On the Free plan, the feed is refreshed once a day. On paid plans, the latest posts load when the page is viewed. Filters such as a date range or caption keywords can also hide new posts.
8. The feed stopped showing after a busy period. Check your monthly view count. On the Free plan (3,000 views a month) and the Light plan (30,000), a feed that goes over the limit two months in a row stops showing from the following month, until views come back under the limit. The Standard plan has no view limit.

Frequently asked questions

Short answers to common questions from BigCommerce store owners.

Do I need a BigCommerce app?

No. The Page Builder HTML widget is enough. You only paste one script tag.

Will the feed appear on checkout?

Not through Page Builder: BigCommerce says the default global region in Cornerstone 4.11 and higher appears on every page except checkout. Keeping the checkout free of extra content is a good idea anyway.

Can I tag products in the posts?

No. Social Feed by grip space does not support shoppable posts or product tags. Use the feed as a gallery next to your products.

Can I show a hashtag feed or customer posts?

No. The feed shows posts from Instagram professional accounts you connect yourself. It does not show hashtag feeds or posts from other people’s accounts.

Does it show Reels and videos?

Yes. Video posts and Reels appear as their cover image and play in the lightbox, muted at first with the usual controls. You can show only Reels, leave Reels out, or leave out video posts entirely.

Can I hide the feed for a while, for example during a sale?

Yes. Set the widget to Unpublished in the Social Feed dashboard. The embed code can stay on your store and nothing is shown until you publish the widget again.

Summary

1. Use a Page Builder HTML widget: drag it into a region, paste the embed code, Save HTML, Save and Publish.
2. Choose a global region for a feed across the store, or a page-specific region for one page.
3. Avoid Script Manager for the feed: it puts the code in the header or footer, not where you want the feed to appear.
4. On product pages, a slider with a caption keyword filter keeps the feed compact and relevant.

Want to try it on your store? Create a free account and copy your embed code in a few minutes. For other platforms, see our guides for Shopify, WordPress and any HTML site.

Sources

1. BigCommerce Help Center: Page Builder — support.bigcommerce.com/articles/en_US/Public/Page-Builder
2. BigCommerce Help Center: Using Script Manager — support.bigcommerce.com/articles/en_US/Public/Using-Script-Manager
3. BigCommerce Help Center: Adding a GeoTrust SSL Seal to Your Store’s Footer — support.bigcommerce.com/articles/en_US/Public/Adding-a-GeoTrust-SSL-seal-to-your--footer
4. BigCommerce Dev Center: Page Builder — docs.bigcommerce.com/docs/storefront/stencil/content/page-builder
5. BigCommerce Dev Center: Page widgets overview — docs.bigcommerce.com/developer/docs/admin/widgets-and-scripts/page-widgets/overview