You can conditionally render elements in your Shopify Liquid templates based on whether virtual try-on is enabled for a product. This avoids layout shifts since the decision is made at render time, not client-side.
The Genlook app stores configuration in Shopify metafields under the namespace:
Inside Genlook’s own theme extension blocks, the alias $app is used. In your custom Liquid code, use the full namespace above.
Checking Try-On Availability
Product-level
A product has try-on enabled when its genlook_enabled metafield is true:
{%- assign genlook_ns = 'app--283488092161' -%}
{%- if product.metafields[genlook_ns].genlook_enabled.value -%}
<button class="genlook-custom-button" onclick="window.Genlook.cabin.open()">
Virtual Try-On
</button>
{%- endif -%}
Collection-level
Products inherit try-on from their collections. If a collection has genlook_enabled set to true, all products in that collection are eligible:
{%- assign genlook_ns = 'app--283488092161' -%}
{%- assign tryon_enabled = false -%}
{%- if product.metafields[genlook_ns].genlook_enabled.value -%}
{%- assign tryon_enabled = true -%}
{%- else -%}
{%- for collection in product.collections -%}
{%- if collection.metafields[genlook_ns].genlook_enabled.value -%}
{%- assign tryon_enabled = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if tryon_enabled -%}
<button class="genlook-custom-button" onclick="window.Genlook.cabin.open()">
Virtual Try-On
</button>
{%- endif -%}
| Metafield | Type | Description |
|---|
genlook_enabled | boolean | Try-on enabled (product or collection) |
ai_try_on_image_main | image | Custom try-on reference image for the product |
ai_try_on_image_variant | image | Custom try-on reference image for a variant |
product.metafields['app--283488092161'].genlook_enabled.value
Combine the Liquid check with the genlook-custom-button CSS class for a belt-and-suspenders approach: Liquid controls SSR rendering, and the CSS class acts as a client-side fallback.
