Ideal House
Skip to content

Shopware 6 integration#

Add Room Visualizer through a Shopware 6 plugin or custom theme and use the selected sales-channel product number as the ideal.house Product Code.

Verification status: Shopware storefront documentation reviewed on September 7, 2026. No customer shop was available. This path targets the standard Shopware 6 Twig storefront; headless/composable storefronts need their framework-specific 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.

Prerequisites#

Prepare a development store, plugin/theme source access, a staging sales channel, Shop ID, Publishable Key, and imported product numbers. Work in a plugin or child theme instead of changing Storefront core or a vendor theme.

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>

Map Shopware productNumber to ideal.house sku exactly. The SDK does not query Shopware's Store API.

Extend the product template#

In your plugin, extend the Twig template/block used near the buy widget in your installed Shopware version. Render a host using the current sales-channel product:

twig
{% sw_extends '@Storefront/storefront/component/buy-widget/buy-widget-form.html.twig' %}

{% block buy_widget_buy_container %}
    {{ parent() }}
    {% if page.product.productNumber %}
        <div class="idealhouse-host">
            <div
                data-idealhouse-button-container
                data-product-code="{{ page.product.productNumber|escape }}">
            </div>
        </div>
    {% endif %}
{% endblock %}

Block names and context can change between Shopware releases and themes. Inspect the active version's template, choose the narrowest extension block, and confirm page.product is available there. For a product card, use the card's product context instead.

Load the SDK#

Shopware plugins can add storefront JavaScript and override templates. Add a local storefront entry that creates the SDK script once:

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

Compile the storefront assets and activate the plugin/theme using the process for your Shopware version. Use configuration values for credentials in a reusable plugin; only render the browser-safe Publishable Key.

Variants and dynamic content#

Shopware often represents purchasable variants as distinct products with their own productNumber and canonical URL. On a full navigation, server-rendered Twig naturally emits the new code. If your theme switches variants without a page load, connect its documented completion callback to:

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

This bridge is customer-owned because themes and third-party variant plugins differ. Listings loaded through filters/off-canvas components must render or recreate clean containers after new DOM arrives. Do not clone SDK-generated children.

Product import#

Export each Shopware product/variant productNumber as ideal.house sku. Import through Product upload, then use import products, job status, list products, update products, delete product, and errors and retries.

Any Store API/Admin API sync, scheduled task, or Flow Builder/webhook integration is separate customer code.

Verify and remove#

Test a parent, each visualizable variant, missing and unknown product numbers, listings, filters, off-canvas/quick view, browser Back/Forward, mobile layout, cache/proxy behavior, and all relevant sales channels/domains. Confirm one SDK request and exact productNumber/SKU match.

To remove, deactivate/uninstall the plugin or remove the child-theme Twig and JavaScript, rebuild storefront assets, clear caches, and verify no SDK request or container remains.

Official platform references#