Use your own try-on button markup anywhere in your theme while keeping Genlook’s try-on widget, with one class and one JavaScript call.
Use your own button when the built-in one does not fit your design. Genlook still handles everything after the click: photo upload, generation, and the result screen.
genlook-custom-button hides the button on products where try-on is off, so you can put it in a shared product template without conditions.
Genlook.cabin.open() opens the try-on widget for the current product.
It needs Genlook loaded on the page:
Shopify: the Genlook Try-On app embed must be on (see install). Skip the button block.
WooCommerce and PrestaShop: the plugin loads Genlook for you. Turn on Hide default button in Genlook → Widget design so shoppers do not see two buttons.
Keep the button visible by default. Genlook only ever hides it, so a button that starts at display: none never appears, and a display rule marked !important stops the hiding from working.
Widget colors and copy come from Widget Design in the Genlook app, and those settings always take priority. A page can still supply values for fields Widget Design leaves unset, with this tag:
<script type="application/json" id="genlook-cabin-config"> { "theme": { "color": "#0A1810" }, "copy": { "title": "Try it on", "subtitle": "", "uploadInfo": "A full-body photo works best" } }</script>
Field
What it does
theme.color
Accent color of the widget buttons and loaders.
copy.title, copy.subtitle
Widget header. Empty uses the default.
copy.uploadInfo
Hint above the upload buttons. Empty hides it.
showRemainingTryOns
Show how many try-ons the shopper has left.
gender
"default", "male", or "female", for languages with gendered grammar.
This tag is a fallback, not an override:
Saving Widget Design stores the header, subtitle, upload hint, remaining try-ons and grammar gender, empty fields included. After that, the tag can only set theme.color, and only while Widget Design has no accent color.
Genlook reads only the first genlook-cabin-config tag on the page. The Try-On button block writes its own, so on a page with the block, your tag is used only if it comes before the block.
The JSON must be valid. A trailing comma is enough for Genlook to ignore the whole tag.
