Skip to main content

Adding the Genlook Button

This guide will walk you through the process of adding the Genlook virtual try-on button to your product pages and customizing its appearance.

Video Tutorial​

Step-by-Step Instructions​

1. Navigate to Theme Editor​

From your Genlook dashboard, click the "Add to Theme" button. This will automatically open your Shopify theme editor and add the Genlook widget to your product page.

tip

The widget is initially added to the bottom of the product section, but you can easily move it to a better location.

2. Position the Widget​

By default, the widget appears at the bottom of the product section. For optimal visibility and conversion:

  1. Locate the Genlook widget in the theme editor's section list
  2. Drag and drop it to your preferred position
  3. Recommended placement: Directly under the "Add to Cart" button for maximum visibility

This positioning ensures customers see the virtual try-on option right when they're considering a purchase.

3. Customize the Appearance​

The Genlook widget offers several customization options to match your store's branding:

Button Customization​

  • Button text: Change the call-to-action text (e.g., "Try it on", "Virtual try-on", "See it on you")
  • Button color: Adjust the color to match your brand palette
  • Button size: Choose from small, medium, or large sizes

Widget Styling​

  • Widget theme color: Customize the modal/popup colors when customers use the try-on feature
  • Example: Change from the default green to match your brand (violet, red, blue, etc.)
info

Premium plan users can remove the "Powered by Genlook" branding for a fully white-label experience.

4. Save Your Changes​

Once you're satisfied with the positioning and styling:

  1. Click Save in the theme editor
  2. Exit the editor to return to your dashboard

The system will automatically verify that the widget is properly configured and ready to use.

5. Verify Installation​

After saving, your Genlook dashboard should show that the widget is ready and active on your product pages. You can now test it by:

  1. Visiting an enabled product page on your live store
  2. Clicking the try-on button
  3. Uploading a test photo to see the feature in action

Troubleshooting​

Widget Not Appearing​

If the widget doesn't show up after following these steps:

  1. Ensure you've enabled Genlook for at least one product or collection in your dashboard
  2. Check that the theme editor changes were saved
  3. Clear your browser cache and reload the product page
  4. Make sure you're viewing a product that has Genlook enabled

Styling Issues​

If the widget doesn't match your theme:

  1. Revisit the theme editor and adjust the color settings
  2. Try different button sizes for better integration
  3. Contact support at support@genlook.app for custom styling assistance

Best Practices​

✅ Place the widget near the Add to Cart button for maximum visibility

✅ Use action-oriented button text like "Try it on" or "See it on you"

✅ Match your brand colors to maintain a cohesive look

✅ Test on mobile devices to ensure the widget works well on all screen sizes

Need help? Contact us at support@genlook.app or book a demo call.