Open Virtual Try-On from your own button

The Icona Virtual Try On block adds its own ✨ Virtual Try-On button to your product pages. If you’d rather open the popup from something you designed, such as a button in your theme’s style, a text link, or an image, you can connect it to Virtual Try-On with a short code snippet.

This guide is for Online Store 2.0 themes, such as Dawn. It takes about 10 minutes.

Note

Using a vintage theme? Follow Install on a vintage theme first, then paste the code from Step 2 into your product file next to the render line.

How it works

The Icona block still loads Virtual Try-On on the page. You give your own element a CSS class or ID, and a small script opens the popup when a shopper clicks it. The same script can hide the Icona button, so shoppers only see yours.

Before you start

• Add the Icona block. The Icona Virtual Try On block must be on your product template, even if you hide its button. See Activate the app embed.
• Publish a funnel. Virtual Try-On only opens on products in a published funnel. See Create your first funnel.
• Back up your theme. In Shopify admin, go to Online Store → Themes. Click the … button on your current theme, then click Duplicate. If anything goes wrong, you can publish the copy.

Step 1: Add a Custom Liquid block

1. In Shopify admin, go to Online Store → Themes → Customize.
2. Switch the editor to the Products → Default product template.
3. In the product information section, click Add block, then choose Custom Liquid.
4. Drag the block to where you want your button to appear.

Most Online Store 2.0 themes, including Dawn, have a Custom Liquid block. If yours doesn’t, see Add it in theme code instead.

Step 2: Paste the code

Paste the code below into the block’s Custom Liquid field, then click Save.

Custom Liquid block

{% comment %}
  Your own Virtual Try-On button. It only shows on products in a published funnel.
  Swap it for any HTML you like, as long as it keeps the icona-try-on-trigger class.
{% endcomment %}
{% if product.metafields.iconaai_virtual_try_on.icona_funnel_id %}
  <button type="button" class="button icona-try-on-trigger">
    Try it on
  </button>
{% endif %}

{% comment %} Hides the Icona button. Delete this style tag to show both buttons. {% endcomment %}
<style>
  .icona-virual-try-on { display: none !important; }
</style>

<script>
  (function () {
    // The class or ID that opens the popup. Separate several with commas.
    var triggerSelector = '.icona-try-on-trigger';

    // A second copy of this script would open the popup twice and count
    // every click double in Analytics.
    if (window.iconaTryOnTriggerReady) return;
    window.iconaTryOnTriggerReady = true;

    document.addEventListener('click', function (event) {
      var trigger = event.target.closest(triggerSelector);
      if (!trigger) return;

      // Stops a link from jumping, or a button inside the product form from submitting it.
      event.preventDefault();
      var iconaButton = document.querySelector('.icona-virual-try-on .icona-ton-icona-try-on-button');
      if (iconaButton) iconaButton.click();
    });

    // No Icona block on the page means try-on isn't available here: the product
    // isn't in a funnel, or the plan has run out of credits.
    function hideTriggersWithoutIcona() {
      if (document.querySelector('.icona-virual-try-on')) return;
      document.querySelectorAll(triggerSelector).forEach(function (trigger) {
        trigger.style.display = 'none';
      });
    }

    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', hideTriggersWithoutIcona);
    } else {
      hideTriggersWithoutIcona();
    }
  })();
</script>

The code does three things:

• Shows a Try it on button, only on products in a published funnel.
• Opens the Virtual Try-On popup when a shopper clicks anything with the icona-try-on-trigger class.
• Hides the Icona button, so shoppers only see yours.

After you save, the Icona button disappears from the theme editor preview. That’s expected. The Icona Virtual Try On block is still listed in the sidebar, and it needs to stay there.

Step 3: Test it on your storefront

The theme editor doesn’t load the popup, so clicking your button there does nothing. Test on your storefront instead.

1. Open a product from your published funnel on your storefront. To check a theme that isn’t published yet, click Preview in the theme editor.
2. Click your button. The Virtual Try-On popup should open.
3. Make a test try-on.

If the popup doesn’t open, check that:

• The Icona Virtual Try On block is still on the product template and isn’t hidden.
• The product is in a published funnel.
• Your element has the class or ID set in triggerSelector. Class names and IDs are case-sensitive.

See Why the button isn’t showing for more checks.

Use your own HTML

The Try it on button is only a starting point. Replace it with any HTML you like and give it the icona-try-on-trigger class. A few examples:

<!-- A link -->
<a href="#" class="icona-try-on-trigger">See how it looks on you</a>

<!-- A secondary button in Dawn's style -->
<button type="button" class="button button--secondary icona-try-on-trigger">Try it on</button>

<!-- An image or badge -->
<img src="https://cdn.shopify.com/your-image.png" alt="Try it on" class="icona-try-on-trigger">

button and button--secondary are Dawn’s button styles. Other themes use different class names, so copy them from an existing button in your theme if you want a match.

Use a class or ID you already have

If your element already has a class or ID, change triggerSelector near the top of the script instead of adding a new class.

You want to use	Set triggerSelector to
A class	'.my-try-on-button'
An ID	'#try-on-link'
More than one	'.my-try-on-button, #try-on-link'

Keep the quotes. A class starts with a dot (.) and an ID starts with a hash (#).

Put your element somewhere else

Your element can sit anywhere on the product page, for example in another Custom Liquid block, in a Custom Liquid section, or in your theme code. Wrap it in the same {% if product.metafields.iconaai_virtual_try_on.icona_funnel_id %} check so it only shows on try-on products.

Paste the script only once per page. A second copy does nothing, so list all of your selectors in the first one.

Keep the Icona button too

To show the Icona button and your own element together, delete these lines from the code and click Save:

<style>
  .icona-virual-try-on { display: none !important; }
</style>

Add it in theme code instead

If your theme has no Custom Liquid block, or a developer manages your theme code:

1. In Shopify admin, go to Online Store → Themes. Click the … button on your current theme, then click Edit code.
2. Open the file that shows your product page. In most Online Store 2.0 themes it’s sections/main-product.liquid.
3. Paste the code from Step 2 where you want your button to appear, then click Save.

Keep the Icona Virtual Try On block in the theme editor as before.

Things to know

• Keep the Icona block. It loads Virtual Try-On on the page. If you remove it, or hide it with the eye icon in the theme editor, your button stops working. Use the code above to hide the Icona button instead.
• Your button’s text doesn’t change. The Icona button switches to ✨ Generating… and ✨ View your try-on during a try-on. Your element keeps its own text. Shoppers can click it again at any time to check progress or see their result.
• Button settings don’t apply to your element. The labels, colors, and layout on the Button settings style the Icona button only. Your Popup and Email capture settings still apply.
• Analytics keep working. Clicks on your element count as clicks in Analytics, just like clicks on the Icona button.
• Your element hides when credits run out. On the Free plan, the Icona block hides once the credits are used up. The script hides your element too, so shoppers never see a button that does nothing.
• Product pages only. Your element opens Virtual Try-On on product pages that show the Icona block.
• Switching themes. The Custom Liquid block lives in your current theme only. If you change themes, add it again.

Remove your custom button

Delete the Custom Liquid block in the theme editor, or the code you added to your theme file, then click Save. The Icona button shows again on its own.

Need help?

If you’d rather not edit your theme, contact support with your store URL, your theme name, and the element you want to use, and we’ll help you connect it.