# Install on a vintage theme

> Add the Virtual Try-On button to a vintage Shopify theme with a code snippet.

Source: https://docs.tryicona.com/virtual-try-on/set-up-the-app/vintage-theme/  
App: Icona: AI Virtual Try On  
Last updated: 2026-10-19

Older Shopify themes, called vintage themes, can’t hold app blocks. If you try to add the **Icona Virtual Try On** block to one, Shopify shows this error:

> Liquid templates don’t support sections and blocks

You can still use Virtual Try-On on a vintage theme. Instead of adding the block in the theme editor, you upload two files and paste a short code snippet into your theme. It takes about 10 minutes.

> **Tip**
>
> If you move to an Online Store 2.0 theme later, such as Dawn, switch to the theme block in [Activate the app embed](https://docs.tryicona.com/virtual-try-on/set-up-the-app/activate-app-embed/). The block updates automatically and uses your **Customize** settings.

## Check if your theme is vintage

In Shopify admin, go to **Online Store → Themes**. Click the **…** button on your current theme, then click **Edit code**. Open the **templates** folder.

If you see `product.liquid` and no `product.json`, your theme is vintage and this guide is for you.

## Before you start

- **Publish a funnel.** The button appears only on products in a published funnel. See [Create your first funnel](https://docs.tryicona.com/virtual-try-on/set-up-the-app/first-funnel/).
- **Back up your theme.** On the **Themes** page, click the **…** button on your current theme, then click **Duplicate**. If anything goes wrong, you can publish the copy.

## Step 1: Download the widget files

Download both files to your computer:

- [icona-try-on.js](https://docs.tryicona.com/downloads/virtual-try-on/icona-try-on.js)
- [icona-try-on.css](https://docs.tryicona.com/downloads/virtual-try-on/icona-try-on.css)

## Step 2: Upload the files to your theme

1. In the code editor, right-click the **assets** folder and click **Upload…**.
2. Select `icona-try-on.js` and click **Open**.
3. Repeat for `icona-try-on.css`.

Keep the file names exactly as they are. The snippet looks for these names.

## Step 3: Create the snippet

1. Right-click the **snippets** folder and click **New file…**.
2. Name it `icona-try-on.liquid`, then press **Enter**.
3. Paste the code below into the new file, then click **Save**.

snippets/icona-try-on.liquid

```
{% comment %}
  Icona AI Virtual Try On: manual install for vintage themes.
  Change the values below to style the button and match your Icona settings.
{% endcomment %}
{% assign icona_button_label = '✨ Virtual Try-On' %}
{% assign icona_button_label_generating = '✨ Generating...' %}
{% assign icona_button_label_generated = '✨ View your try-on' %}
{% assign icona_button_animation = true %}
{% assign icona_button_bg_color = '#000000' %}
{% assign icona_button_text_color = '#ffffff' %}
{% assign icona_button_hover_bg_color = '#333333' %}
{% assign icona_button_hover_text_color = '#ffffff' %}
{% assign icona_button_padding_vertical = 20 %}
{% assign icona_button_padding_horizontal = 20 %}
{% assign icona_button_border_radius = 4 %}
{% assign icona_weekly_limit = 5 %}
{% assign icona_email_capture_after = 2 %}
{% assign icona_form_selector = 'form[action*="/cart/add"]' %}


{% if product.metafields.iconaai_virtual_try_on.icona_funnel_id %}
  {{ 'icona-try-on.css' | asset_url | stylesheet_tag }}


  <div class="icona-virual-try-on">
    <button
      type="button"
      class="icona-ton-icona-try-on-button"
      style="background-color: {{ icona_button_bg_color }}; color: {{ icona_button_text_color }}; padding: {{ icona_button_padding_vertical }}px {{ icona_button_padding_horizontal }}px; border-radius: {{ icona_button_border_radius }}px;"
    >
      {{ icona_button_label }}
    </button>
  </div>


  <script>
    window.iconaTryOnData = window.iconaTryOnData || {
      productId: {{ product.id }},
      variantId: {{ product.selected_or_first_available_variant.id }},
      productTitle: {{ product.title | json }},
      productUrl: {{ product.url | json }},
      featuredImage: {{ product.featured_image | json }},
      funnelId: {{ product.metafields.iconaai_virtual_try_on.icona_funnel_id | json }},
      funnelTemplate: {{ product.metafields.iconaai_virtual_try_on.icona_funnel_template | json }},
      funnelDiscountOptions: {{ product.metafields.iconaai_virtual_try_on.icona_funnel_discount_options.value | json }},
      blockSettings: {
        button_label: {{ icona_button_label | json }},
        button_label_generating: {{ icona_button_label_generating | json }},
        button_label_generated: {{ icona_button_label_generated | json }},
        enable_animation: {{ icona_button_animation | json }},
        button_bg_color: {{ icona_button_bg_color | json }},
        button_text_color: {{ icona_button_text_color | json }},
        button_hover_bg_color: {{ icona_button_hover_bg_color | json }},
        button_hover_text_color: {{ icona_button_hover_text_color | json }},
        button_padding_vertical: {{ icona_button_padding_vertical | json }},
        button_padding_horizontal: {{ icona_button_padding_horizontal | json }},
        button_border_radius: {{ icona_button_border_radius | json }},
        custom_form_selector: {{ icona_form_selector | json }}
      },
      variants: {{ product.variants | json }},
      options: {{ product.options_with_values | json }},
      currencyCode: {{ cart.currency.iso_code | json }},
      locale: {{ request.locale.iso_code | json }},
      tryOnSettings: {
        weeklyLimit: {{ icona_weekly_limit | json }},
        emailCaptureAfter: {{ icona_email_capture_after | json }}
      },
      widgetSettings: {}
    };
  </script>
  <script src="{{ 'icona-try-on.js' | asset_url }}" defer></script>
{% endif %}
```

## Step 4: Show the snippet on product pages

1. Open the **sections** folder and click `product-template.liquid`. If your theme doesn’t have this file, open `product.liquid` in the **templates** folder instead.

2. Search the file for `{% endform %}`. Pick the one that closes the add-to-cart form, which starts with `{% form 'product'`.

3. Paste this line directly after it:

   ```
   {% render 'icona-try-on', product: product %}
   ```

4. Click **Save**.

The button appears wherever you paste this line. To show it somewhere else on the product page, move the line.

## Step 5: Test the button

Open a product from your published funnel on your storefront. The **✨ Virtual Try-On** button should appear below the add-to-cart button. Click it and [make a test try-on](https://docs.tryicona.com/virtual-try-on/set-up-the-app/first-try-on/).

If the button doesn’t appear, check that:

- The product is in a published funnel.
- The snippet is named exactly `icona-try-on.liquid`.
- The `render` line is saved in the file that shows your product page.

See [Why the button isn’t showing](https://docs.tryicona.com/virtual-try-on/troubleshooting/button-not-showing/) for more checks.

## Change the button and settings

The Icona **Customize** and **Settings** pages can’t reach a manual install. To change how the button looks or behaves, edit the values at the top of the snippet and click **Save**.

| Value in the snippet              | What it controls                                                                                        | Default                     |
| --------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------- |
| `icona_button_label`              | Button label                                                                                            | ✨ Virtual Try-On            |
| `icona_button_label_generating`   | Label while generating                                                                                  | ✨ Generating…               |
| `icona_button_label_generated`    | Label after generated                                                                                   | ✨ View your try-on          |
| `icona_button_animation`          | Catching button animation, `true` or `false`                                                            | `true`                      |
| `icona_button_bg_color`           | Background color                                                                                        | #000000                     |
| `icona_button_text_color`         | Text color                                                                                              | #ffffff                     |
| `icona_button_hover_bg_color`     | Background color on hover                                                                               | #333333                     |
| `icona_button_hover_text_color`   | Text color on hover                                                                                     | #ffffff                     |
| `icona_button_padding_vertical`   | Top and bottom padding, in pixels                                                                       | 20                          |
| `icona_button_padding_horizontal` | Left and right padding, in pixels                                                                       | 20                          |
| `icona_button_border_radius`      | Corner roundness, in pixels                                                                             | 4                           |
| `icona_weekly_limit`              | [Maximum weekly try-ons per user](https://docs.tryicona.com/virtual-try-on/settings/weekly-limit/)      | 5                           |
| `icona_email_capture_after`       | [When the email form appears](https://docs.tryicona.com/virtual-try-on/settings/email-capture-timing/)  | 2                           |
| `icona_form_selector`             | [Add to cart form selector](https://docs.tryicona.com/virtual-try-on/customize/advanced-form-selector/) | `form[action*="/cart/add"]` |

Keep text values inside the quotes, for example `'✨ Try it on'`. Numbers and `true` or `false` go without quotes.

For `icona_email_capture_after`, use one of these numbers:

| Number | When the email form appears |
| ------ | --------------------------- |
| -1     | Never                       |
| 0      | Before the first try-on     |
| 1      | After the 1st try-on        |
| 2      | After the 2nd try-on        |
| 3      | After the 3rd try-on        |
| 5      | After the 5th try-on        |

The popup and email form use their default wording.

## Things to know

- **Updates are manual.** The files you uploaded don’t update on their own. To get the latest version of the widget, download the files from this page again and upload them over the old ones.
- **The setup guide can’t see it.** The **App embed status** in the Icona setup guide checks for the theme block, so it shows Inactive or Unknown. Your button still works.
- **The button stays visible when credits run out.** With the theme block, the button hides once the Free plan’s credits are used up. With the snippet it stays visible, and shoppers see a message that try-on is unavailable. See [Error messages](https://docs.tryicona.com/virtual-try-on/shopper-experience/error-messages/).
- **Switching themes.** The snippet lives in your current theme only. If you change themes, repeat these steps or use the theme block if the new theme supports it.

## Remove the manual install

To remove Virtual Try-On from your vintage theme:

1. Delete the `{% render 'icona-try-on', product: product %}` line from your product file.
2. Delete `icona-try-on.liquid` from the **snippets** folder.
3. Delete `icona-try-on.js` and `icona-try-on.css` from the **assets** folder.

## Need help?

If you’d rather not edit theme code, [contact support](https://docs.tryicona.com/virtual-try-on/troubleshooting/contact-support/) with your store URL and theme name, and we’ll help you set it up.