Virtual try-on for older Shopify themes.

1. Prepare your store

1. Install the app and choose a plan. Install Wearbly AI from the Shopify App Store, open it in Shopify admin and approve your selected plan. See pricing and included try-ons.
2. Request manual-script activation. Email [email protected] with your permanent myshopify.com store domain. Wait for confirmation before adding the script. App installation alone does not enable this manual integration; an unactivated store receives an Unauthorized response from the script URL.
3. Duplicate your theme. In Online Store → Themes, open the theme's actions menu and choose Duplicate. Make and test these changes on the copy first.

You need permission to edit theme code. If you are not comfortable working with Liquid and JavaScript, share this guide with your Shopify theme developer or contact us before changing the theme.

2. Choose the product-page placement

Open Edit code for the duplicate theme. Find the Liquid file that renders the product details. Depending on the theme, this may be templates/product.liquid, a product section or a product-form snippet. Theme file names vary; use the existing product template to find the correct section rather than replacing it.

Add the code below near the product options or Add to cart area, outside an existing product form. It needs the Shopify product object, so it belongs in a Liquid file that renders on product pages. Do not paste it into a plain JavaScript asset, a JSON template or the store's text editor.

Keep one integration per product page. Do not add this script alongside a Wearbly app block. If your theme swaps product sections without reloading the page, ask your developer to test that behavior before publishing.

3. Add the Liquid snippet

Copy this complete snippet into the product-page placement. Liquid fills in the product and permanent shop domain. The configuration and target container must appear before the external script.

{% if request.page_type == 'product' %}
  <div id="wearbly-try-on-container"></div>

  <script>
    window.wearblyConfig = {
      targetSelector: '#wearbly-try-on-container',
      product: {
        ...{{ product | json }},
        selected_or_first_available_variant:
          {{ product.selected_or_first_available_variant | json }}
      }
    };
  </script>
  <script async src="https://wearbly.ai/embed/shopify.js?shop={{ shop.permanent_domain }}"></script>
{% endif %}

The script inserts the button and dialog into #wearbly-try-on-container. If you change the container ID, update targetSelector to match. The page guard keeps the snippet on product pages.

4. Match the widget to your store

The settings object is optional. To use this example, add a comma after the closing brace of product in the configuration above, then insert this property inside window.wearblyConfig.

settings: {
  try_on_button_text: "Try it on",
  button_width_behavior: "full_width",
  button_bg_color: "#315b46",
  button_text_color: "#ffffff",
  button_hover_bg_color: "#172d25",
  button_border_radius: 6,
  dialog_title: "Virtual try-on",
  garment_title: "Your selected garment",
  your_image_title: "Your photo",
  generate_button_text: "Generate preview",
  buy_now_button_text: "Add to Cart",
  loading_message_text: "Creating your preview…"
}

Omitted settings use the script's defaults. Check color contrast and the full-width button on mobile. These options describe the manual script; the native app block has its own settings in Shopify's theme editor.

Configuration reference

targetSelector

Required CSS selector for the existing container where Wearbly should render.

product

Required Shopify product data, including its variants. Use the Liquid JSON values shown above.

settings

Optional object containing the appearance and label settings below.

apiHost

Optional service origin. It defaults to https://wearbly.ai; leave it unchanged for your store.

Load https://wearbly.ai/embed/shopify.js with the required shop query parameter set to your activated permanent myshopify.com domain. The script defaults to v=latest; the current implementation also supports v=v1. Use the default unless the Wearbly team gives you other instructions.

Set window.wearblyConfig before loading the script. The current widget reads it on initialization; there is no separate public reinitialization method for dynamically replaced product sections.

Manual-script settings

5. Preview, test, then publish

1. Save the file and open a product page using the duplicate theme's preview.
2. Confirm one button appears and opens the dialog. Check the product image and available variants.
3. Upload a clear JPEG, PNG or WebP photo smaller than 10 MB, then generate a preview. Successful generations count toward your store's usage.
4. Select a variant in the dialog and use Add to Cart after generation. Inspect the cart for the correct product and variant; no checkout is needed.
5. Test a product URL with a selected variant, a variant with its own image, a sold-out variant and the mobile layout.

On opening the dialog, the script checks the variant query parameter and the initial variant supplied in the configuration. It falls back to an available variant. Confirm the selection in the dialog when your theme changes variants without updating the page URL. Variants without an image use the product image.

The preview illustrates clothing on a photo; it does not measure fit or choose a size. When your checks pass, publish the tested theme and verify the live product page. Keep the original theme as your backup.

Troubleshooting

Need help with your theme?

Email [email protected] with your myshopify.com store domain, theme name and product URL. Return to the Shopify installation guide for the app-block setup.

Shopify references: duplicate a theme and app-block support in themes.