Install on a vintage theme

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. 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.
• 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
• 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.

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 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	5
icona_email_capture_after	When the email form appears	2
icona_form_selector	Add to cart 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.
• 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 with your store URL and theme name, and we’ll help you set it up.