Skip to main content

Overview

The Genlook widget is a customizable button that appears on your product pages, allowing customers to try on your products virtually. This guide covers everything you need to know about setting up, customizing, and managing your widget.

Adding the Widget to Your Theme

1

Access theme editor

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

Navigate to product page template

In the theme editor, select a product page template from the dropdown at the top. Make sure you’re editing the template where you want the widget to appear.
3

Add the Genlook block

Click Add block or Add section (depending on your theme), then find Genlook Virtual Try-On in the list of available blocks. Click to add it to your page.
4

Position the widget

Drag the Genlook block to position it where you want it on the product page. Most merchants place it:
  • Near the “Add to cart” button
  • Below the product images
  • Above the product description
Position the widget where customers naturally look when deciding to purchase. Near the add to cart button typically performs best.
5

Save and preview

Click Save in the theme editor, then preview your changes. Test the widget on a product page to ensure it appears correctly.

Customizing Widget Appearance

You can customize the widget’s appearance directly in the Genlook admin panel under Widget Settings.

Button Customization

  • Button Color: Choose a color that matches your brand. Use your primary brand color for best visibility.
  • Button Text: Customize the text that appears on the button. Default is “Try it on” but you can use “See how it looks”, “Virtual try-on”, or any text that fits your brand voice.
  • Button Size: Adjust the button size to match your product page design. Options include small, medium, and large.
  • Button Style: Choose between filled, outlined, or text-only button styles.
Use high contrast colors for your button to ensure it stands out on product pages. Test different button styles to see which performs best with your customers.

Widget Window Customization

When customers click the button, a widget window opens. You can customize:
  • Widget Size: Control how large the widget appears (small, medium, or large modal)
  • Background Color: Set the background color of the widget window
  • Border Radius: Adjust the rounded corners of the widget
Avoid making the widget too small - customers need enough space to see their try-on results clearly. Medium or large sizes typically work best.

Enabling Products

You have two options for enabling the try-on widget on your products: Most merchants use this method because it’s faster and easier to manage.
1

Go to Collections

In the Genlook admin panel, navigate to Collections.
2

Select collections

Check the boxes next to the collections where you want the widget to appear. You can enable multiple collections at once.
3

Save changes

Click Save to enable the widget on all products in the selected collections.
When you enable a collection, the widget automatically appears on all products in that collection. If you add new products to the collection later, they’ll automatically have the widget enabled.

Option 2: Enable Individual Products

For more granular control, you can enable products one by one.
1

Go to Products

In the Genlook admin panel, navigate to Products.
2

Enable products

Use the search and filters to find products, then toggle the switch next to each product you want to enable.
3

Bulk enable

You can select multiple products using checkboxes and enable them all at once using the bulk actions menu.
Use collections for most products, and individual product enabling only when you need to exclude specific items from a collection or enable products that aren’t in collections.

Widget Behavior Settings

Configure how the widget behaves for your customers:

Email Collection

  • When to collect email: Choose when to ask for customer emails (before first try-on, after first try-on, or after multiple try-ons)
  • Email requirement: Make email optional or required
  • Marketing consent: Optionally collect consent for marketing emails
Collecting emails after the first successful try-on typically has the highest completion rate. Customers are more willing to share their email after seeing value.

Generation Limits

  • Maximum generations per user: Set how many try-on images a single customer can generate (default: 8)
  • Rate limiting: Automatic rate limiting prevents abuse while allowing normal usage
Setting generation limits too low may frustrate customers who want to try multiple products. Too high may increase costs. 8 generations is a good default that balances customer experience and cost.

Preview and Testing

Always test your widget before going live:
1

Test on staging

Use Shopify’s theme preview mode to test the widget without publishing changes.
2

Test different products

Try the widget on products with different image types (front-facing, lifestyle, flat lay) to ensure it works well across your catalog.
3

Test on mobile

Test the widget on mobile devices since many customers shop on phones. The camera feature works best on mobile.
4

Check widget appearance

Verify the button color, text, and position look good on your product pages. Make sure it doesn’t clash with your theme design.

Troubleshooting Widget Issues

  • Verify the widget block is added to your product page template in the theme editor
  • Check that products are enabled in the Genlook admin panel
  • Ensure you’ve saved and published your theme changes
  • Clear your browser cache and test again
  • Check that you have available credits in your Genlook account
  • Verify your subscription is active and not expired
  • Try disabling and re-enabling the widget
  • Contact support if the issue persists
  • Adjust button colors to better match your theme
  • Try different button sizes or styles
  • Use custom CSS if needed (advanced users only)
  • Contact support for theme-specific customization help

Best Practices

Start small: Enable the widget on your best-selling products or new arrivals first. Once you see positive results, expand to more products.
Monitor performance: Use the analytics dashboard to see which products get the most try-on usage. Focus your efforts on high-performing products.
Keep it simple: Don’t over-customize the widget. A simple, clear button that matches your brand performs better than complex designs.
Test regularly: Test the widget periodically to ensure it’s working correctly, especially after theme updates or app updates.

Next Steps