Ideal House
Skip to content

BigCommerce integration#

Add Room Visualizer to a BigCommerce Stencil storefront by loading the SDK once and rendering the current product or variant SKU into a generated-button container.

Verification status: BigCommerce developer documentation reviewed on September 7, 2026. No test store was available. Stencil and Catalyst have different rendering and navigation models; this guide provides an actionable Stencil path and directs Catalyst storefronts to a framework adapter.

Before loading the SDK: Open Dashboard → Settings, add your storefront origin to Allowed Origins (CORS), and click Save. Include the published hostname and any preview or staging origins you use; separate multiple origins with commas. See configuration steps.

Choose a storefront path#

  • Stencil: install the loader with Script Manager or the Scripts API, then add the container in a custom theme template.
  • Catalyst: add the script and component in the Catalyst React/Next.js app; follow React / Next.js.
  • Legacy Blueprint: migrate to a supported storefront or have a BigCommerce developer identify a safe insertion point. The current Scripts API documentation treats Blueprint separately.

You need theme-edit access, a staging theme/channel, ideal.house Shop ID and Publishable Key, and at least one BigCommerce SKU imported into ideal.house.

Minimal SDK contract#

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

The container's Product Code must exactly match the imported catalog sku. This guide does not assume an ideal.house BigCommerce app.

Install on Stencil#

In Storefront → Script Manager, create a footer script for the relevant storefront/channel and product pages. Paste only the SDK script tag from the example, with your browser-safe credentials. Script Manager is the control-panel counterpart of the channel-aware Scripts API.

For a reusable app, use BigCommerce's Scripts API instead. That API operation and app OAuth flow are your integration service's responsibility; do not expose its access token in storefront code.

Confirm only one SDK tag exists. Do not also include it in templates/layout/base.html.

Render the initial product#

In a custom Stencil theme, add the container near the product form in the product-view partial used by your theme:

handlebars
{{#if product.sku}}
  <div
    data-idealhouse-button-container
    data-product-code="{{product.sku}}"
  ></div>
{{/if}}

The exact partial differs by theme. Use Stencil CLI to preview the customized theme and keep the change in a version-controlled theme instead of editing generated storefront HTML.

For cards, render the container only when the card context exposes the exact SKU you imported. A product with options may not have a final variant SKU on a category page; link to the product page unless the shopper has selected a complete variant.

Synchronize product options#

Stencil theme JavaScript receives product option changes through theme-specific product-details code. Add a customer adapter at the point where the current theme has resolved the final variant response:

js
export function replaceIdealhouseContainer(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Pass the resolved variant SKU from your theme callback. BigCommerce themes can customize or replace the default product-details implementation, so this guide does not invent a global option-change event. Remove the old container before inserting the new one.

Quick view and dynamic pages#

Quick View, faceted search, pagination, and client-side navigation can replace product DOM. Add a clean container in every rendered template and invoke the same bridge after the theme's documented render callback. Do not clone a container already populated by the SDK.

Catalyst uses client-side React rendering and has no Stencil Handlebars context. Load the SDK once in the app shell and key the visualizer component by selected variant SKU as shown in the React/Next.js guide.

Import and map product data#

Map BigCommerce sku values to ideal.house sku; for variants, use each variant SKU rather than the parent product ID. BigCommerce catalog data is not synchronized by the browser SDK.

Use Product upload for the approved import contract, then check import products, job status, list products, update products, delete product, and errors and retries. Any BigCommerce API export, webhook, or scheduled sync is a customer-operated adapter.

Verify and remove#

Before launch, test a simple product, every option combination, a product without a SKU, and a SKU missing from ideal.house. Check the product page, category cards, Quick View, faceted navigation, browser Back/Forward, mobile layout, consent behavior, and each active storefront channel. In DevTools, verify one successful SDK request and an exact Product Code/SKU match.

To remove the integration, delete the Script Manager entry or Scripts API record, remove all theme container markup and adapter code, publish the clean theme, then purge storefront/CDN caches. Confirm the SDK request is absent from every channel.

Official platform references#