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

# Design the Button and Widget

> Style the Genlook try-on button in your Shopify theme and customize the try-on widget's colors, copy, and behavior from the Genlook app.

The try-on experience has two visual layers, styled in two places:

1. **The button** on your product page. On Shopify you style it in the theme editor, on the **Genlook Try-On Button** block.
2. **The widget** that opens when shoppers tap it. You style it in the Genlook app under **Widget Design**, and it applies store-wide without touching your theme.

## Style the button (theme editor)

Click the **Genlook Try-On Button** block in the Shopify theme editor to open its settings:

| Setting                           | Options                                                                        | Notes                                                                                                                                                                                 |
| --------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button Text**                   | free text                                                                      | Leave as `DEFAULT` to use the built-in translated label (Virtual Try-On).                                                                                                             |
| **Primary Color**                 | color picker                                                                   | Background for the filled style, border and text for outline.                                                                                                                         |
| **Text Color**                    | color picker                                                                   | Leave empty for the default (white on filled, primary color on outline and minimal).                                                                                                  |
| **Bold Text**                     | checkbox                                                                       | On by default.                                                                                                                                                                        |
| **Use Default Font**              | checkbox                                                                       | Use a neutral system font instead of your theme's font.                                                                                                                               |
| **Top / Bottom Margin**           | 0 to 60 px                                                                     | Space around the button.                                                                                                                                                              |
| **Style**                         | Filled, Outline, Minimal                                                       |                                                                                                                                                                                       |
| **Full Width**                    | checkbox                                                                       | Stretch the button to the container width.                                                                                                                                            |
| **Size**                          | Small, Medium, Large                                                           |                                                                                                                                                                                       |
| **Corner Radius**                 | Sharp, Rounded, Pill                                                           |                                                                                                                                                                                       |
| **Icon**                          | Sparkles, Magic Wand, Camera, Person, Shirt, Hanger, Eye, Heart, Star, No Icon |                                                                                                                                                                                       |
| **Hide on Out-of-Stock Products** | checkbox                                                                       | Hides the button when the product is unavailable.                                                                                                                                     |
| **Custom CSS**                    | free text                                                                      | Target `.genlook-button`, `.genlook-button:hover`, or `.genlook-try-on-button` for anything the settings do not cover. Example: `.genlook-button { background: #FF6AA0 !important; }` |

<Tip>
  A high-contrast color plus a recognizable icon (Sparkles or Camera) makes the button noticeably more clicked. If the settings do not get you all the way to your brand look, the Custom CSS field will; and if you would rather use your own markup entirely, see the [custom button guide](/docs/virtual-tryon/custom-button).
</Tip>

Button **placement** is also a theme-editor decision: drag the block where shoppers decide whether to buy. Right above or below **Add to cart** drives the highest engagement in our data.

On WooCommerce and PrestaShop, the button label and styling live under **Genlook → Widget design** in your site's admin instead.

## Design the widget (Genlook app)

Open **Widget Design** in the Genlook app. A live preview updates as you change the settings:

* **Accent color**: toggle **Use a custom accent color** and pick a preset swatch or enter your own hex value. It colors the widget's action buttons and loaders so the whole flow matches your brand.
* **Behavior**: choose whether to **show remaining try-ons** to shoppers, and pick the **result page action**: **Add to cart** directly from the result, or **Go to product page**.
* **Text & language**: override the **header title** and **subtitle**, and set the **upload helper text** shown above the photo picker (for example, "Please upload a full-body photo"). **Grammar Gender** adjusts phrasing for gendered languages such as Hebrew or Arabic.

Changes save instantly and apply to every product page. The widget's interface language follows your store; you can change it under [Settings → General](/docs/virtual-tryon/app/tryon-settings#general).

Developers can additionally override design fields on a single page; see [where the widget reads its settings](/docs/virtual-tryon/custom-button#where-the-widget-reads-its-settings).

## Something not looking right?

If the button does not show at all, it is usually [product visibility](/docs/virtual-tryon/app/product-visibility) or a missing app embed, not styling; see [troubleshooting](/docs/virtual-tryon/troubleshooting).