Custom Button

Choose this approach if you want complete control over the try-on button’s design and placement, but still want Genlook’s pre-built widget to handle photo uploads, generation, and result display. There are two ways to set this up, depending on how much control you need.

Method 1: Widget Block + Hide Button
Method 2: Global Block + Liquid Snippet

This is the simplest approach. You keep the standard Genlook Widget app block on your product template but hide its built-in button, then place your own button anywhere in the theme.

Setup

Hide the built-in button

In the Shopify Theme Editor, click the Genlook Widget block and enable the Hide Built-in Button checkbox. This keeps the SDK and widget config active on the page without rendering the default button.

Add your custom button

Place this HTML anywhere in your product template (or a Liquid snippet rendered on product pages):

<button class="genlook-custom-button" onclick="window.Genlook.cabin.open()">
  Virtual Try-On
</button>

How it works

The widget block continues to load the SDK, read product data, and inject the genlook-cabin-config on the page. Your button simply calls Genlook.cabin.open() to launch the modal.The genlook-custom-button CSS class is automatically hidden when try-on is not enabled for the current product. This means you can safely add the button to your global product template without conditional logic - it will only appear where it should.

Choose this method if you want a fully custom Liquid integration without adding the Genlook Widget block to the product template. Instead, you enable the lightweight global app embed and wire everything up manually in Liquid.

Setup

Enable the Genlook Try-On app embed

In the Shopify Theme Editor, open App embeds (bottom of the left sidebar) and toggle on Genlook Try-On. This loads the Genlook SDK globally on every page.

Shopify Theme Editor showing the Genlook Try-On app embed toggle enabled

Add the Liquid snippet to your product template

Paste the following snippet into your product template (or a Liquid snippet rendered on product pages). It provides the widget configuration, product data, and your custom button.

{% comment %} Genlook cabin config - required for the widget to read settings {% endcomment %}
<script type="application/json" id="genlook-cabin-config">
  {"preload": true}
</script>

{% comment %} Page product data - tells the widget which product to try on {% endcomment %}
{% if product and product.id != null %}
  <script type="application/json" id="genlook-page-product">
    {
      "id": {{ product.id | append: '' | json }},
      "title": {{ product.title | json }},
      "url": {{ product.url | json }},
      "featured_image": {{ product.featured_image.src | json }},
      "variants": [
        {%- for variant in product.variants -%}
          {
            "id": {{ variant.id | json }},
            "featured_image": {{ variant.featured_image.src | json }}
          }{% unless forloop.last %},{% endunless %}
        {%- endfor -%}
      ]
    }
  </script>
{% endif %}

{% comment %} Your custom button {% endcomment %}
<button onclick="window.Genlook.cabin.open()">
  Virtual Try-On
</button>

How it works

The Genlook Try-On app embed loads the SDK and store-level configuration on every page. Your Liquid snippet adds the two remaining pieces the widget needs:

genlook-cabin-config - a JSON script tag the SDK reads on initialization. Set "preload": true to eagerly load the widget JS in the background (see the options below).
genlook-page-product - product data so the widget knows which item to try on. If you omit this, you can pass a product object directly to Genlook.cabin.open(product).

The id="genlook-cabin-config" attribute is required. Without it, the SDK cannot read the widget configuration, and the widget will not preload.

`genlook-cabin-config` Reference

The genlook-cabin-config script tag is a JSON object that the SDK reads on initialization. When using Method 1, the Genlook Widget block generates this automatically from the Theme Editor settings. When using Method 2, you provide it manually.

<script type="application/json" id="genlook-cabin-config">
{
  "preload": true,
  "showRemainingTryOns": false,
  "gender": "default",
  "theme": {
    "color": "#0A1810"
  },
  "copy": {
    "uploadInfo": "",
    "title": "",
    "subtitle": ""
  }
}
</script>

Options

preload

boolean

default:"false"

Eagerly load the widget JavaScript in the background when the page loads. When true, the first open() call is near-instant. When false or omitted, the widget JS is loaded on-demand when open() is first called - still fully functional, just slightly slower on first open.

showRemainingTryOns

boolean

default:"false"

Display a counter inside the widget showing how many try-on generations the visitor has left for the current period (daily or weekly).

gender

string

default:"default"

Grammatical gender for languages like Hebrew and Arabic that have gendered grammar. Accepted values: "default", "male", "female".

theme

object

Visual theming for the widget modal.

Show Theme properties

theme.color

string

default:"#0A1810"

Primary accent color used inside the try-on modal (loaders, secondary buttons). Accepts any valid CSS color string (e.g. "#0ea5e9").

copy

object

Override the default text shown inside the widget.

Show Copy properties

copy.uploadInfo

string

Custom message displayed above the upload buttons (e.g. "Please upload a full body photo with long sleeves"). Leave empty or omit to hide.

copy.title

string

Override the header title. Defaults to "Try It On" when empty or omitted.

copy.subtitle

string

Override the header subtitle. Defaults to "See how it looks on you" when empty or omitted.

Setting preload to false does not disable the widget. You can always call Genlook.cabin.open() regardless of the preload setting - the SDK will lazy-load the widget automatically.

SDK Reference

`Genlook.cabin.preload`

Type: boolean Indicates whether the widget JS was eagerly loaded on page initialization. This reflects the preload value from the genlook-cabin-config JSON.

if (window.Genlook?.cabin?.preload) {
  // Widget JS was preloaded - open() will be near-instant
}

`Genlook.cabin.open()`

Opens the try-on widget modal. If the widget JS hasn’t been loaded yet, it is automatically fetched, and the modal opens as soon as it’s ready.

window.Genlook.cabin.open();

You can optionally pass a product object if you’re not on a standard product page or want to override the detected product:

window.Genlook.cabin.open({
  id: '123456789',
  title: 'Classic T-Shirt',
  url: '/products/classic-t-shirt',
  featured_image: 'https://cdn.shopify.com/...'
});

`Genlook.cabin.fetch(url, options)`

Performs an authenticated fetch request through the Shopify app proxy. Use this helper for all endpoint calls if you need to make direct API requests without handling the proxy path yourself.

const response = await window.Genlook.cabin.fetch('/check-credits');
const { allowed } = await response.json();

The base proxy path (/apps/proxy_genlook-x/public) is prepended automatically.

Next Steps

Want to abandon the pre-built modal and build a completely custom UI? See the Full Custom Flow.

Getting Started

Advanced

Help

API Reference (Developers)

Setup

How it works

Setup

How it works

`genlook-cabin-config` Reference

Options

SDK Reference

`Genlook.cabin.preload`

`Genlook.cabin.open()`

`Genlook.cabin.fetch(url, options)`

Next Steps

Getting Started

Advanced

Help

API Reference (Developers)

​Setup

​How it works

​Setup

​How it works

​genlook-cabin-config Reference

​Options

​SDK Reference

​Genlook.cabin.preload

​Genlook.cabin.open()

​Genlook.cabin.fetch(url, options)

​Next Steps

Setup

How it works

Setup

How it works

`genlook-cabin-config` Reference

Options

SDK Reference

`Genlook.cabin.preload`

`Genlook.cabin.open()`

`Genlook.cabin.fetch(url, options)`

Next Steps