Try
{%- comment -%}
TryOn — "See it on you" button for themes that can't use app blocks.
Paste this into your product template, right after the Add to cart button.
The button renders only on products you have enabled try-on for; on every
other product it outputs nothing at all.
{%- endcomment -%}
{%- comment -%} ---------- Settings you can change ---------- {%- endcomment -%}
{%- assign tryon_button_text = "See it on you" -%}
{%- assign tryon_button_color = "#000000" -%}
{%- assign tryon_button_text_color = "#ffffff" -%}
{%- assign tryon_button_radius = "8px" -%}
{%- assign tryon_show_helper_text = true -%}
{%- assign tryon_api_base_url = "https://api.integration.tryonvirtual.com" -%}
{%- comment -%} -------------------------------------------- {%- endcomment -%}
{%- if product and product.metafields.tryon.has_asset.value == true -%}
{%- assign tryon_model_type = product.metafields.tryon.model_type.value -%}
{%- if tryon_model_type == 'swap' -%}
{%- assign tryon_helper_text = "Not sure if it's for you? Upload a photo and see yourself in it." -%}
{%- else -%}
{%- assign tryon_helper_text = "Not sure if it's for you? Point your camera. See yourself in it." -%}
{%- endif -%}
{%- comment -%}
Selectors are scoped to two element ids on purpose. Themes and page
builders ship button resets that outrank a single class and silently
strip the styling below.
{%- endcomment -%}
{%- assign tryon_wrap = "#tryon-vt-" | append: product.id -%}
{%- assign tryon_btn = tryon_wrap | append: " #tryon-vt-btn-" | append: product.id -%}
{%- assign tryon_help = tryon_wrap | append: " #tryon-vt-helper-" | append: product.id -%}
{%- if tryon_show_helper_text -%}
{%- endif -%}{{ tryon_helper_text }}
{%- endif -%}