Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.genlook.app/docs/llms.txt

Use this file to discover all available pages before exploring further.

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

1

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

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.

​
Where the widget reads its settings

The widget gets its appearance and behavior from two layers, and the per-page tag wins for any field it explicitly sets:
  1. Widget Design tab (Genlook admin → Widget Design). Store-wide settings — color, copy, grammar gender, etc. Saved to a shop metafield and auto-rendered on every product page by the Genlook Try-On app embed as <script id="genlook-cabin-config-internal">. Most merchants only need this.
  2. genlook-cabin-config script tag (per page). Overrides individual fields for the page it’s rendered on. Method 1 above generates this automatically from the block’s Theme Editor settings; Method 2 has you write it by hand.
The merge is per-field. A per-page theme.color overrides only the color and leaves dashboard copy/gender/etc. untouched. To “use the dashboard value”, just omit the field from genlook-cabin-config.

​
When to use which

  • No customization needed → install the app, add a button block, done. The widget inherits the button’s primary color out of the box.
  • Brand the widget once across the whole store → set values in the Widget Design tab. No code.
  • Override on a specific product or template → emit genlook-cabin-config on that page with only the fields you want to override.

​
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. Every field shown below is also configurable through the Widget Design tab in the merchant dashboard — values you put here win for the current page. 
<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.
​
copy
object
Override the default text shown inside the widget.
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.