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

# Shopify Canvas themes

> Run Genlook virtual try-on on a Shopify theme designed with Canvas, where app embeds and app blocks are not available yet, by asking Sidekick to add it.

Themes created or edited in Shopify **Canvas** do not support app embeds or app blocks yet. That is a Shopify limitation, and it means the **Genlook Try-On** app embed and the **Genlook Try-On Button** block from the [standard install](https://docs.genlook.app/docs/virtual-tryon/install/shopify.md) are not available.

You can still run Genlook on a Canvas theme: Sidekick adds a small loader and a try-on button to your product page for you. The loader updates automatically when we ship a new version.

**1. Install the app**

Install [GenLook: AI Virtual Try On](https://apps.shopify.com/genlook-virtual-try-on?utm_source=docs\&utm_medium=website) from the Shopify App Store and approve the permissions.

**2. Ask Sidekick to add Genlook**

Open your theme in Canvas, then copy this whole prompt into Sidekick:

````text theme={null}
Add the Genlook virtual try-on to my product page. Canvas themes cannot turn on app embeds yet, so add it to the theme code:

1. Create a snippet named genlook-tryon.liquid with exactly the code below, unchanged, and render it once in the product template.
2. Add a "Virtual Try-On" button to the product page, right above Add to cart. Style it like my theme's secondary button, full width. Give the button the class genlook-custom-button, and make a click call window.Genlook.cabin.open(). Translate the label into my store's languages.
3. Do not change anything else.

```liquid
<script>
  window.Genlook = window.Genlook || {};
  window.Genlook.cabin = window.Genlook.cabin || { open: function (p, o) { window.Genlook.cabin._pending = [p, o]; } };
</script>

<script type="application/json" id="genlook-store-config">
  {"platform":"shopify","storeId":{{ shop.permanent_domain | json }},"locale":{{ request.locale.iso_code | json }},"localeExplicit":{% if localization.available_languages.size > 1 %}true{% else %}false{% endif %}}
</script>

{% 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 %}

<script type="application/json" id="genlook-page-context">
  {"pageType":{{ template.name | json }},"productId":{{ product.id | json }},"collectionId":{{ collection.id | json }}}
</script>
<script type="application/json" id="genlook-customer-context">
  {"customerId":{{ customer.id | json }},"loginUrl":{{ routes.account_login_url | json }},"returnUrl":{{ request.path | append: '?genlook_open=1' | json }},"realtimeReturnUrl":{{ request.path | append: '?genlook_open=realtime' | json }}}
</script>

<script async src="https://cdn.genlook.app/v1/shopify/boot.js"></script>
```
````

**3. Test and publish**

Preview the theme, open a product page and click the button: the try-on window should open. Run one try-on, then publish the theme.

> [!NOTE]
>
> Prefer to edit the code yourself? Do the same as the prompt: put the code in a snippet, render it in your product template, and add a button as in the [custom button guide](https://docs.genlook.app/docs/virtual-tryon/custom-button.md).

## What works differently

Try-on limits, email collection and the logged-in customers setting still come from the Genlook app. Two settings are only shared with the app embed, so on a Canvas theme:

* **Product visibility**: try-on is on for every product page. The product and collection settings in the Genlook app do not apply.
* **Widget design**: the widget uses the default colors and copy. To match your theme, add a [`genlook-cabin-config` tag](https://docs.genlook.app/docs/virtual-tryon/custom-button#set-widget-design-on-one-page) to the snippet.

> [!TIP]
>
> When Shopify adds app embed support to Canvas, turn on the [standard install](https://docs.genlook.app/docs/virtual-tryon/install/shopify.md) and ask Sidekick to remove the genlook-tryon snippet. Your app settings will then apply again. If both are on at the same time, Genlook loads only once, but remove the snippet anyway.

> [!TIP]
>
> Prefer not to touch your theme? Email [support@genlook.app](mailto:support@genlook.app) and we will set it up for you, free of charge.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.