Install on a Liquid theme

Classic (“vintage”) themes use Liquid templates, which Shopify does not allow app blocks to be added to. If the theme editor shows “Liquid templates don’t support sections and blocks,” this guide is for you.

We ship a self-contained snippet that renders the exact same widget. You paste it once into your product template.

Note

This is a Shopify platform limitation, not a Hero ID limitation. The snippet below delivers the identical verification experience.

1. Open your product template

1. In your Shopify admin, go to Online Store → Themes.
2. On your live theme, click ⋯ → Edit code.
3. Open the file that renders your product page — usually sections/product-template.liquid or templates/product.liquid.

2. Paste the snippet

Download the snippet and paste its full contents where you want the widget to appear — most stores place it just below the Add to Cart button:

➡ Download hero-id-manual-embed.liquid

The snippet includes three things the widget needs — a mount point, a small settings block, and the script tag:

<div class="hero-id-root">
  <div class="hero-id-root__content">Active Military and Veterans qualify for discounts</div>
  <button class="hero-id-root__button">Get Discount</button>
</div>

<script type="application/json" id="hero-id-settings">
  { "content": "Active Military and Veterans qualify for discounts", "button_text": "Get Discount" }
</script>
<script type="application/json" id="hero-id-shop">
  { "shopDomain": {{ shop.permanent_domain | json }} }
</script>

<script src="https://flow.hero-id.com/main.js" defer></script>

The downloadable file also carries the full stylesheet so the verification, camera, and success screens are styled to match — keep it intact.

3. Customize the look

Edit the Appearance variables at the top of the snippet to match your brand:

{%- assign hero_content            = 'Active Military and Veterans qualify for discounts' -%}
{%- assign hero_button_text        = 'Get Discount' -%}
{%- assign hero_background_color   = '#ffffff' -%}
{%- assign hero_text_color         = '#000000' -%}
{%- assign hero_button_color       = '#108043' -%}
{%- assign hero_button_hover_color = '#0d6b35' -%}

4. Save

Click Save. Reload a product page — the widget hydrates automatically.

Caution

Do not change the script src to a development URL. Only https://flow.hero-id.com/main.js is supported on a live storefront; the dev bundle mocks Shopify’s globals and will break the page.

Prefer we install it for you?

Add us as a staff or collaborator account with theme access and we’ll place the snippet and confirm it works — usually under five minutes. Reach out to support and we’ll send the exact access steps.