Add virtual try-on to your Shopify theme

Work on an unpublished duplicate of your theme and keep a copy of the original layout. Start with one garment that has a clear product image and known variants. For the commercial overview and prerequisites, read Shopify virtual try-on.

Export the selected product from Shopify's Products screen and import the CSV through Closku's Products workspace. Review names, images, active status, and color/size combinations before committing the import. See Shopify's product export guide and Closku catalog management.

Arrange the allowed storefront origins with Closku support if your workspace has no domain editor. Provide the actual browser origin for the storefront you will test, such as your custom-domain URL or the relevant Shopify preview hostname. The protocol and hostname matter. A preview URL path does not turn one hostname into a different origin.

Keep the live storefront domain configured when you publish. If configuration loading is rejected, compare the browser's origin with the allowed-domain setting before troubleshooting theme placement. The store setup guide explains the workspace flow.

Copy the exact install line from Your Widget in Closku. In your unpublished Shopify theme's code editor, open layout/theme.liquid and insert the line just before </body>. Include it once rather than once per product card. If your theme uses a different document layout, have its developer select the matching insertion point.

<script src="https://closku.com/widget/YOUR-STORE-SLUG.js" defer></script>

YOUR-STORE-SLUG is an example placeholder. Replace the whole example with the line from your workspace; it is not a usable demo merchant. The slug script loads the configured Closku widget for your store.

Record the Closku product ID of your imported garment. The widget passes data-product-id to the Closku try-on service, so a Shopify numeric product ID, variant ID, or SKU is not a substitute.

One explicit mapping approach is a Shopify product metafield with namespace custom and key closku_product_id, created and populated by your team as text. This is a theme integration example, not a field automatically installed by Closku. Place the following Liquid in the product section near the purchase form:

{% assign closku_id = product.metafields.custom.closku_product_id.value %}
{% if closku_id != blank %}
  <div data-product-id="{{ closku_id | escape }}"></div>
{% endif %}

Populate the metafield with that garment's actual Closku catalog ID. Inspect the rendered HTML to confirm the correct value. The loader adds a try-on button after elements with data-product-id; inspect existing theme attributes too, so you do not accidentally bind a second button to a Shopify ID.

This example establishes product context. Do not assume a Shopify variant selector automatically synchronizes every size or color with Closku. Verify the expected garment and variant behavior for your theme before promising that behavior to shoppers.

1. Open the selected product in the unpublished theme preview on desktop and mobile.
2. Confirm the script loads once and the try-on button appears in the intended position.
3. Confirm the active Closku garment matches the selected product page.
4. Open and close the widget, and confirm the Shopify cart form still works.
5. For a full render, use an approved isolated test merchant and a photo you have permission to upload.
6. Test any quick views, collection cards, or dynamically replaced sections separately.

A full try-on request can consume plan usage. The simulated walkthrough and workspace preview demonstrate the interface without establishing production rendering or sizing accuracy. Record the theme, garment, origin, device, and result of your real validation.

• No button: check the script URL, store configuration, and rendered product context.
• Domain rejection: check the actual preview/live origin in Closku's allowed domains.
• Wrong garment: check the Closku catalog ID rather than assuming the storefront SKU is the API ID.
• Missing image or inactive product: review the import result and product's active status.
• Problems after dynamic navigation: have the theme developer verify widget initialization for that context.

Catalog import does not create automatic Shopify sync. Review changes in Closku when products, images, or variants change, and verify the existing-product update process before importing again. Avoid creating duplicate catalog entries and changing mapped IDs accidentally. Detailed guidance is in the docs.

Compare plans and allowances, or contact the Closku team with your theme and mapping question. For other storefronts, start with the virtual try-on guide.