Skip to main content
The Genlook Virtual Try-On widget integrates seamlessly into your Shopify theme as an App Block. You can customize its appearance and behavior directly within the Shopify Theme Editor—no coding required.

​
Adding the Widget to Your Theme

1

Access the theme editor

In your Shopify admin, navigate to Online Store > Themes and click Customize on your active theme.
2

Navigate to a product page template

Using the dropdown at the top of the theme editor, select a Products template (e.g., Default product). Make sure you’re editing the specific template where you want the try-on widget to appear.
3

Add the Genlook block

In the left sidebar, click Add block, then search for and select Genlook Widget from the list of available app blocks.
4

Position the widget

Drag the Genlook block to position it perfectly on the page. We recommend placing it:
  • Just above or below the “Add to cart” button
  • Immediately below the main product pricing or title
Place the widget where shoppers naturally look when deciding whether to buy. Right next to the “Add to cart” button usually drives the highest engagement.
5

Save and preview

Hit Save in the top right, then preview your store on a live product page to make sure everything looks right.

​
Customizing the Try-On Button

When you click on the Genlook Widget block in the Theme Editor, a settings panel will open on the right side. You can use these settings to perfectly match the button to your brand.

​
Visual Styling

  • Button Style: Choose how the button is filled (Full Width, Filled, Outline, or Minimal).
  • Button Size: Select Small, Medium, Large, or Extra Large.
  • Button Primary Color: The main color used for the button background or border.
  • Button Text: Override the default text (e.g., “See how it looks on you”). Leave as “DEFAULT” to use the standard translation.
  • Corner Radius: Adjust the roundness of the button from Sharp to Fully Rounded.
  • Shadow Intensity: Add depth to the button with None, Light, Medium, or Strong shadows.
  • Font Weight: Change the thickness of the button text (Normal, Medium, Semi Bold, or Bold).

​
Icon Settings

  • Icon Type: Choose a visual cue for the button (Camera, Person, or Sparkles).
  • Icon Position: Place the icon on the Left or Right side of the text, or select No Icon to hide it.
Use a high-contrast Button Primary Color and a recognizable icon (like Sparkles or Camera) to ensure the button stands out and encourages clicks!

​
Customizing the Try-On Modal (The “Widget”)

You can also customize the popup modal window where the actual try-on experience happens:
  • Widget Primary Color: The accent color used inside the try-on modal window (e.g., for loaders and secondary buttons).
  • Header Title Override: Change the main title at the top of the modal (default is “Try It On”).
  • Header Subtitle Override: Change the subtext below the title (default is “See how it looks on you”).
  • Upload Info Text: Add a custom instruction message above the photo upload area (e.g., “Please upload a full body photo with long sleeves”). Leave blank to hide.

​
Advanced Behavior Settings

The block also includes a few advanced toggles to control exactly when and how the widget behaves:
  • Disable on Out of Stock Products: Check this box to hide the try-on button when a product is completely out of stock.
  • Show Remaining Try-Ons: Display a subtle counter to logged-in users showing how many try-on generations they have left for the current period.
  • Grammar Gender: Useful for stores operating in gendered languages (like Hebrew or Arabic). You can force the UI translation to use Male, Female, or Default (Neutral) phrasing.
  • Hide Built-in Button: Enable this if you want to use your own Custom Button instead. The widget block stays on the page to load the SDK, but its default button is hidden so you can place your own anywhere in the template.
  • Custom CSS: Write your own CSS rules (e.g., .genlook-button:hover { ... }) to apply highly specific styles that aren’t covered by the default settings.

​
Enabling Products

Adding the widget block to your theme is the first step, but the button will only appear on products that have Virtual Try-On actively enabled. To enable products:
  1. Open the Genlook app from your Shopify admin dashboard.
  2. Navigate to the Products or Collections tab.
  3. Toggle the try-on feature ON for specific items or entire collections.
When you enable an entire collection, the widget automatically applies to all products inside it. Any new products you add to that collection later will be enabled automatically!

​
Troubleshooting

  • Verify the Genlook Widget block is added to your active product page template in the Theme Editor.
  • Double-check that the specific product (or its parent collection) is actively enabled in the Genlook app dashboard.
  • Make sure you clicked “Save” in your Theme Editor.
  • Ensure the product isn’t Out of Stock (if you have the “Disable on Out of Stock” setting checked).
  • Tweak the color, size, and corner radius settings in the Theme Editor block settings.
  • If you added any code to the Custom CSS field, remove it temporarily to ensure it isn’t breaking the layout.
  • Ensure the Genlook app is fully installed and active in your Shopify store.
  • If you’re using a legacy “Vintage” Shopify theme (pre-Online Store 2.0), app blocks may not be supported. Please reach out to our support team for a manual installation.