How to Add HTML to BigCommerce with Page Builder and Scripts

Whether you want a social gallery on a product page or a chat button across the catalogue, you can add HTML to BigCommerce without editing theme files. Below are the two tools the platform provides, where each ElectricBlaze widget fits and how checkout restrictions shape placement.

Two routes for custom code in a store

  • Page Builder HTML widget. You drag it into a region on the home page, a product, category or brand page, a web page, a blog post or the cart. The content stays inside that region. Page Builder belongs to Stencil themes.
  • Script Manager (Storefront, then Script Manager). It injects code into the head or footer of a chosen group of pages. There is nothing to position, which makes it ideal for anything that floats.

The built-in BigCommerce widgets handle text, images, banners, carousels and product lists. For content they cannot produce, like a live Instagram grid, the HTML block is how BigCommerce custom widgets from outside services get onto the page.

Headless storefronts built on Catalyst have no Page Builder regions; a developer adds the HTML to the storefront code.

Place an HTML block with Page Builder

First copy the snippet from Add to website in the ElectricBlaze editor. Then, in the control panel:

  1. Open the storefront section and click Customize on the live theme. Page Builder loads in the same tab.

  2. Use the page selector at the top to reach the template you want to change, for example Home or a single product.

  3. Open the Widgets list on the left, find HTML and drag it onto one of the highlighted drop zones.

  4. Select the new block, paste the snippet into its HTML field and save it.

  5. Click Publish. Review the live storefront, because the editing preview may show an empty frame where script-driven content should be.

Drop zones labelled Global repeat on every page whose template includes them. Choose an unlabelled zone when the widget should appear on one page only.

Matching widgets to the right tool

Feeds on home, category and product pages

Instagram, TikTok and Facebook galleries in an HTML block act as social proof. Under a product description, a single-row slider adds little height and keeps the Add to Cart button where shoppers expect it. A multi-row grid is better on the home page or a dedicated community page. These are the typical BigCommerce page builder widgets use cases: visual, inline and tied to a page.

Chat buttons and background music

Popup Chat and the floating Music Player belong in Script Manager. Click Create a Script, set the location to Footer, choose Store pages, keep the script type as Script, paste the snippet and pick a category. Store pages leaves out checkout and order confirmation, where a floating icon would sit next to payment fields.

The category matters when the built-in cookie consent banner is switched on: a shopper who declines a category does not load its scripts. Functional is a sensible label for a chat button or player.

Checkout

Page Builder has no access to checkout pages, and marketing content there tends to distract buyers anyway. Keep social feeds on browsing pages.

Widget not visible on the storefront

  • Empty HTML block in Page Builder. Publish and look at the live store.
  • Shows on one page, missing elsewhere. The HTML block sits in a local zone. Move it to a Global zone or load the code through Script Manager.
  • Chat button missing for some shoppers. They declined the script category in the consent banner.
  • No drop zone where you need one. The theme template has no region there. A theme developer can add one.
  • Floating icons overlap. A review badge or another app uses the same corner. Change the position in the Layout tab of the widget.

Changes made in ElectricBlaze reach the store automatically; return to BigCommerce only to move a block.

Widget guides for BigCommerce

Store-specific instructions for each widget, with the page, region and settings that suit it.

Custom code in BigCommerce: FAQ

Does the HTML widget work with every theme?

It works in Stencil themes that include Page Builder regions, which covers the default Cornerstone theme and most current marketplace themes. Legacy Blueprint themes and headless builds need a different method.

Do I need a developer to add HTML to BigCommerce?

Not for Page Builder or Script Manager. Both are point-and-click tools in the control panel. A developer is only needed for headless storefronts or new regions.

Where is Script Manager?

In the control panel under Storefront. Only staff accounts with permission to manage the storefront can create or edit scripts.

Will the snippet slow down page rendering?

The loader script is marked defer, so the browser finishes drawing the page before running it.

What do widgets cost for a store?

Page Builder and Script Manager come with every plan. ElectricBlaze Free includes 5 widgets and 1,000 views a month; a store with steady traffic may outgrow that and move to Start at $5/month billed yearly with unlimited views.

Get the code for your store

Build a widget for free, copy the snippet and drop it into Page Builder or Script Manager.

Create a widget