Ideal House
Skip to content

SHOPLINE integration#

Integrate Room Visualizer with a SHOPLINE online store through a theme app extension or a controlled custom-theme block.

Verification status: SHOPLINE Online Store 2.x/3.0 theme documentation reviewed on September 7, 2026. No partner app or merchant test store was available. Template syntax and supported extension types vary by Online Store generation, so validate against the exact store version.

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 an integration surface#

  • For a reusable public app on Online Store 2.0/2.1, SHOPLINE recommends a Theme App Extension with an App Block and optional App Embed Block.
  • Online Store 3.0 themes provide reusable blocks with optional JavaScript assets and App Blocks.
  • Script Tag/Asset APIs are legacy or version/app-type dependent; do not choose them without checking SHOPLINE's compatibility table.
  • For a one-store theme customization, use the active version's block/template and asset structure.

Prepare a development store, extension/theme access, Shop ID, Publishable Key, and imported variant codes.

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 Product Code must match the ideal.house catalog sku. This documentation does not claim an installable ideal.house SHOPLINE app exists.

Build the theme block#

Create an App Block or public theme block that renders a host on product detail pages. Use the exact product/variant object and escaping helpers documented for your Online Store generation. The final storefront HTML must be:

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

In the template source, replace CHAIR-OAK-01 with the current selected variant SKU/code expression. Do not paste a Shopify Liquid expression into SHOPLINE 3.0 Handlebars templates; these are different languages and object contracts.

For an App Block, add it to the product section in Theme Editor. For an App Embed, use it to load the SDK globally without visible UI. App Blocks usually require the merchant to enable/place them after installation.

Load the SDK once#

In the extension/theme JavaScript asset, create the script with the two public settings before appending it:

js
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

Use extension configuration/dynamic parameters for multi-merchant credentials. Only expose the Publishable Key; keep app secrets on your server.

Selected variants and dynamic sections#

Connect the active theme's documented product-selection callback to a customer adapter:

js
function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

SHOPLINE themes are customizable, so this guide does not invent a universal storefront variant event. Online Store 3.0 documents theme-editor section/block events, but those are editor lifecycle events, not shopper variant-selection events.

When sections, filters, pagination, quick view, or theme-editor preview rerender a product node, create a fresh container. Clean up listeners when a block unloads in Theme Editor. Product-card buttons need an item-level SKU; omit the control when a final variant is not known.

Import products#

Export SHOPLINE product and variant data, and map the selected storefront code to ideal.house sku. Use Product upload and the approved guides for import, job status, listing, updates, deletion, and retry handling.

SHOPLINE Admin API synchronization, webhooks, app OAuth, and app-store distribution are customer adapter work.

Verify and remove#

Test installation and merchant block enablement, a simple product, each variant, missing/unknown codes, cards, quick view, filters, SPA-style navigation, mobile, consent, theme editor preview, and every supported Online Store version. Confirm one SDK request and exact code/SKU mapping.

To remove, disable the App Block/Embed and uninstall the extension, or remove the custom block and asset. Publish the clean theme, clear caches, and verify no SDK URL or data-idealhouse-* markup remains.

Official platform references#