Ideal House
Skip to content

Shoplazza integration#

Add Room Visualizer to Shoplazza with a Theme App Extension or custom Liquid theme and render the selected variant SKU as the ideal.house Product Code.

Verification status: Shoplazza theme, extension, product, and variant documentation reviewed on September 7, 2026. No partner app or merchant test store was available, so installation and variant switching must be validated in a development store.

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.

Prerequisites#

Prepare a Shoplazza development/merchant store, theme or app-extension source access, Shop ID, Publishable Key, and imported records for supported variant SKUs. Duplicate the merchant theme before customization.

A Theme App Extension is the maintainable reusable path. An App Block injects visible UI and must be added by the merchant to a compatible product section; an App Embed can load global behavior.

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>

Shoplazza documents variant.sku; use that exact string as ideal.house sku.

Add an App Block#

Create a theme extension App Block for the product section. Shoplazza Liquid blocks in a product context can access product. Start with an empty host, then use the active theme's product-form state to supply the selected variant:

liquid
<div class="idealhouse-host"></div>

{% schema %}
{
  "name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
  "target": "section",
  "javascript": ["idealhouse.js"],
  "settings": []
}
{% endschema %}

For a single-variant product, the block JavaScript can read the sole documented entry in product.variants from data serialized safely by the theme. For multiple variants, keep the host empty until the theme's existing product form resolves a selection. This avoids relying on an undocumented selected-variant Liquid property.

Load the SDK#

In idealhouse.js, load the SDK once. For a reusable app, provide Shop ID and Publishable Key through sanitized public block/embed configuration rather than hard-coding one merchant:

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);
}

Never expose the app secret or ideal.house Client Secret.

Keep the selected variant synchronized#

Connect the theme's documented product-form callback to this adapter:

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

Shoplazza's variant object documents sku, but themes can implement selection differently. The callback wiring is customer adapter work. Recreate the container after a new selection; do not only mutate SDK-populated markup.

For collection cards, quick view, search filters, and client-rendered sections, add an item-level host and run the bridge after the theme's documented render callback. If no final variant is known on a card, omit the button or link to the product page.

Import products#

Export every supported variant.sku and import it as ideal.house sku through Product upload. See import products, job status, list products, update products, delete product, and errors and retries.

Admin API exports, webhooks, scheduled synchronization, OAuth, and extension distribution are customer implementation.

Verify and remove#

Test App Block placement, Embed enablement, a single-variant product, all multi-variant choices, blank/duplicate/unknown SKUs, collection cards, quick view, filters, browser history, mobile, localization/currency, consent, and theme preview/live modes. Confirm one SDK request and exact variant SKU mapping.

To remove, disable and uninstall the Theme App Extension or remove the custom Liquid/JavaScript, publish the clean theme, clear storefront caches, and verify the SDK and all data-idealhouse-* nodes are absent.

Official platform references#