Install on Shopify

Before you start

• You're on Shopify (any plan, including Basic).
• You have access to Online Store → Themes.
• For try-on: add your myshop.com (and your .myshopify.com if you use it) as allowed domains in the agent's Profile tab.

Path A — Site-wide chat embed (5 minutes)

Best for the chat widget on every page.

1. Shopify admin → Online Store → Themes.
2. Click … → Edit code on your live theme.
3. Open layout/theme.liquid.
4. Just before the closing </body> tag, paste:

<script async src="https://askthe.bot/embed.js" data-agent="YOUR-SLUG"></script>

5. Click Save. Visit your store — chat bubble bottom-right.

Path B — Try-on button on product pages (10 minutes)

Adds a "Try it on" button to every product page, scoped to the product being viewed.

1. Edit code on your theme.
2. Open sections/main-product.liquid (Dawn-based themes) or your product template's main section.
3. Find the buy box — usually a <product-form> or near the {% form 'product' %} tag.
4. Paste this snippet just below the buy buttons:

<button type="button" id="atb-tryon" class="button button--secondary" style="width:100%;margin-top:8px;">
  Try it on
</button>

<script async
  src="https://askthe.bot/tryon.js"
  data-agent="YOUR-SLUG"
  data-auto-button="false"></script>

<script>
  document.getElementById('atb-tryon').addEventListener('click', function () {
    var open = function () {
      window.AskTheBotTryOn.open({
        productImage: {{ product.featured_image | image_url: width: 1200 | json }},
        productLabel: {{ product.title | json }},
        productUrl: {{ shop.secure_url | append: product.url | json }},
      });
    };
    if (window.AskTheBotTryOn) open();
    else setTimeout(open, 400);
  });
</script>

5. Save. Open any product page — the button is there.

Variant-aware try-on

If you want the currently-selected color to be the one rendered, swap the click handler for this version:

<script>
  var product = {{ product | json }};
  document.getElementById('atb-tryon').addEventListener('click', function () {
    var sel = document.querySelector('[name="id"]');
    var v = product.variants.find(function (x) { return String(x.id) === (sel && sel.value); }) || product.variants[0];
    var img = (v.featured_image && v.featured_image.src) || product.featured_image;
    window.AskTheBotTryOn.open({
      productImage: img,
      productLabel: product.title + (v.title && v.title !== 'Default Title' ? ' — ' + v.title : ''),
      variantLabel: v.title,
    });
  });
</script>

Path C — Theme App Embed (no code edits)

If your theme supports App Embeds and you don't want to touch code, you can also drop the script via a custom HTML block in Customize → Theme settings → App embeds if your theme exposes a "Custom HTML" or "Custom code" embed. The snippets above work unchanged.

Troubleshooting

• Button doesn't appear: view source of the product page and confirm the <script src="https://askthe.bot/tryon.js"> is present. If your theme caches aggressively, hard-refresh.
• "This try-on bot has no store domain configured": add your .myshopify.com domain (and your custom domain) to the agent's Profile → Allowed domains.
• Click does nothing: check the browser console for [askthe.bot tryon] warnings. Most often the script tag is missing data-agent.
• See general troubleshooting.