Shopify connector

The Shopify connector turns the manual cart wiring into a paste. It reads your own storefront’s product data — no app install, no API keys, no theme code:

1. Maps your Shopify variants to the configurator by SKU — the SKUs you typed in the Togenar editor are the join key, so there is nothing to configure twice.
2. Pushes each variant’s price and stock into the configurator — the summary shows a live total in your store’s currency, sold-out options dim.
3. Wires any button marked data-togenar-add-to-cart: disabled until the selection maps to your catalogue, then one click adds every configured part to the cart, with the configuration’s share link stored on each line item.

Install

The panel writes this snippet for you: open the project’s Embed code dialog and pick Shopify (Custom Liquid) — the project ID, scene and configurator flags are already filled in, ready to paste. The block below is the same snippet for reference.

In the theme editor, add a Custom Liquid block to your product template and paste:

<script type="module" src="https://model.togenar.com/embed/togenar-embed.js"></script>
<script type="module" src="https://model.togenar.com/embed/togenar-shopify.js"></script>

<togenar-embed
  project="YOUR_PROJECT_ID"
  configurator
  ar-button
  shopify
  shopify-handles="{{ product.handle }}"
  shopify-currency="{{ cart.currency.iso_code }}"
  shopify-locale="{{ request.locale.iso_code }}">
</togenar-embed>

<button data-togenar-add-to-cart disabled>
  {{ 'products.product.add_to_cart' | t }}
</button>

Replace YOUR_PROJECT_ID with the ID from your project’s share dialog. That is the entire integration.

Two domains to allowlist

Add both your custom domain and your *.myshopify.com domain to the workspace embed allowlist — the theme editor previews through the .myshopify.com host.

Attributes

Attribute	Meaning	Default
shopify	Enables the connector for this embed.	—
shopify-handles	Comma-separated product handles to map.	The current /products/{handle} page
shopify-currency	ISO code shown with prices.	window.Shopify.currency.active
shopify-locale	Locale used to format prices.	The page language
shopify-goto-cart	cart redirects to the cart page after a successful add.	Stay on the page
shopify-ar-return	off disables the automatic add when a shopper returns from the AR hand-off.	On

Multi-product configurations

A configurator whose parts are sold as separate Shopify products works the same way — list every handle:

shopify-handles="oslo-sofa,oslo-legs,oslo-cushions"

Each selected part becomes its own cart line. A selected SKU that none of the listed products carries is left out of the cart and logged in the browser console, so a missing handle surfaces during your first test click, not in an order.

What the merchant sees

Every cart line added by the connector carries the configuration’s share link as a hidden line-item property. It travels through checkout onto the order, where clicking it reopens the exact configuration the shopper bought.

Events

The connector dispatches the standard commerce events on the embed element: togenar:commerce:add_to_cart_success (with Shopify’s cart response) and togenar:commerce:add_to_cart_fail (with Shopify’s error message, e.g. sold out). Themes with a cart drawer can listen for the success event to open it.

Requirements and limits

• The store must run on the Online Store channel — the connector reads the storefront’s own product and cart endpoints, which headless or Buy-Button-only setups don’t serve.
• Products must be published to the Online Store channel, or their product JSON is not available.
• Variant SKUs in Shopify must match the SKUs entered in the Togenar editor — the SKU rules apply unchanged.
• Prices come from Shopify’s own storefront API, so Shopify Markets multi-currency works; third-party currency-converter apps that rewrite prices in the DOM do not affect what the connector shows.

Prefer to wire things yourself, or on another platform? The manual pattern remains fully supported — the connector is the same contract, packaged.