Customizing your store should feel creative, not like a chore. We know that getting the design of your recommendation widgets just right is essential for maintaining a professional look and feel for your brand.
In the past, making visual adjustments often meant saving your changes and refreshing your live storefront just to see if a color worked or if a font looked right. We wanted to eliminate that back and forth. That is why we created the Live Preview feature, making it much easier for you to see exactly how your design changes will look before you ever commit to saving them.
How it works
You can find this feature directly within the Visual Styles section on the app preferences pages. It acts as a real-time window into your storefront.
The Live Preview loads a sample of your widget exactly as it would appear on your store. It pulls in the colors and the overall appearance of your current Shopify theme to create the most realistic scenario possible. This allows you to experiment with different styles safely in a controlled environment.
You can adjust colors, fonts, and other visual settings without any fear. If you don't like a change, you can simply undo it before saving, ensuring that the final result is perfect for your customers.
Designed for reliability
To make sure the Live Preview always works and shows you something useful, we have included a few smart sample details to keep things consistent.
Real examples for a better view
The products you see in the preview window are examples. We use these placeholder products and recommendations so the preview always has content to display. This is important because your store might be in development with zero products, or your specific recommendation rules might not apply to a specific item at that moment. By using examples, we guarantee you always have a visual guide to work with.
A focused layout
To keep the configuration screen clean and easy to navigate, we show a sample setup consisting of one main product and two recommendations. This is the most common configuration and gives you the best sense of how the elements interact.
If you have configured your widget to show more items, such as four or five recommendations, the best way to see that specific density is to finish your visual customization in the preview, save your changes, and then visit one of your live product pages to see the full setup in action.
