Adding AI Try-On to your BigCommerce store

The setup has two parts. The script goes in through Script Manager, once for the whole store. The Try on button goes into your theme’s product page template, and fills in with each product’s name, image, price, and link.

This guide is for Stencil themes, the standard BigCommerce storefront. Catalyst storefronts are set up differently: pass this guide to your developer.

Before you start

• In your AI Try-On dashboard, create a widget for the type of product you sell and add your store’s domain.

• In the Your widgets block, open the install window of that widget. In the button code, copy two values:

  • data-neurodyn-ai-try-on-product-type — the widget type, like full-body or upper-body;
  • data-neurodyn-ai-try-on-api-key — the widget’s key.

  Each widget type has its own key, and they work only as a pair.

Adding an AI Try-On widget to your website

Adding the script

1. In your BigCommerce control panel, go to Storefront › Script Manager. With several storefronts, go to Channels › Channel Manager, click your storefront’s name, and open Script Manager there.

2. Click Create a Script.

3. Fill in the fields:

• Script name — for example, Vizbl AI Try-On.
• Placement — Head.
• Location — Storefront pages.
• Script category — Functional.
• Script type — Script.

4. Paste this into Script contents and click Save:

<script defer src="https://cdn.neurodyn.ai/@neurodyn/ai-try-on/dist/ai-try-on.embed.min.js"></script>

The script can take up to 20 seconds to appear on your storefront.

Adding the button

You can’t edit the files of a theme installed from the Theme Marketplace, so you’ll work on a copy. The copy won’t get the theme’s future updates.

1. Go to Storefront › Themes. Next to your current theme, open the Advanced menu and select Make a Copy. Name the copy and click Save a Copy.

2. When the copy is ready, click its action icon and select Edit Theme Files. The theme code editor opens.

3. Open templates/components/products/product-view.html and find this line:

{{> components/products/add-to-cart with_wallet_buttons=true}}

This is where the Add to cart button is. The line above is from Cornerstone, BigCommerce’s default theme. In other themes, it may look different or sit in another file. If you can’t find it, pass this guide to your developer.

4. On a new line right after it, paste this code:

{{!-- Change the first two lines: copy both values from the same widget's install window.
      Product name, image, price, and link are filled in automatically from each product. --}}
<button type="button" class="button"
    data-neurodyn-ai-try-on-product-type="full-body"
    data-neurodyn-ai-try-on-api-key="PASTE_WIDGET_KEY_HERE"
    data-neurodyn-ai-try-on-dialog
    data-neurodyn-ai-try-on-product-name="{{product.title}}"
    data-neurodyn-ai-try-on-product-image-src="{{getImage product.main_image 'zoom_size'}}"
    data-neurodyn-ai-try-on-product-price="{{#if product.price.with_tax}}{{product.price.with_tax.formatted}}{{else}}{{product.price.without_tax.formatted}}{{/if}}"
    data-neurodyn-ai-try-on-product-url="{{product.url}}">
    Try on
</button>

5. In the first lines of the code, paste the two values you copied from the install window:

• replace full-body with the value of data-neurodyn-ai-try-on-product-type;
• replace PASTE_WIDGET_KEY_HERE with the value of data-neurodyn-ai-try-on-api-key.

To change the button text, replace Try on. Leave the rest of the code as it is.

The product name, image, price, and link — data-neurodyn-ai-try-on-product-name, -product-image-src, -product-price, and -product-url — you don’t fill in. The theme fills them in from each product automatically, including the product’s main image that the AI uses for the try-on.

6. Save the file, then apply the copy as your store’s theme. The button appears on your product pages.

Checking that it works

1. Open any product page in your store. The Try on button is under Add to cart.
2. Click Try on. The try-on window opens with your product’s image.

If the button is there but the window doesn’t open:

• Check that the widget type and key come from the same widget’s install window.
• Check that the domain in your dashboard matches your store’s address.
• Check that your token balance isn’t zero. At zero, try-ons pause and the widget turns off for shoppers.
• Check that the script is in Script Manager with Head placement.

If the window asks for the wrong photo, like a full-length shot for a T-shirt, the widget type in the code doesn’t match your products. Take the widget type and key from the widget of the right type.

The template puts the same button with the same widget type on every product page. If you sell several types of products, or want the button only on some of them, pass this guide to your developer.

Get help in our Discord

Join our Discord to ask questions about these instructions or get technical support. If something isn’t working, open a ticket and our team will investigate.