1. What is shop the look?
Shop the Look is an interactive feature commonly used in homepage to enhance the shopping experience. It allows customers to view and purchase an entire outfit or collection of related items that are styled together. This feature is designed to support and guide upsell strategies by recommending products that complement each other.
2. How to add a shoppable image to the section?
To add a shoppable image to the "Shop the Look" section and customize its settings for both desktop and mobile devices, you can follow these steps. This guide will help you set the image, adjust its height, and configure the section's width and padding.
Add Images for Desktop and Mobile:
- Click the “Select image” button under the Image option.
- Choose the image you want to display on desktop/mobile devices.
- upload separate images optimized for each device type to ensure that the image height is suitable for both desktop and mobile views.
- Under “Desktop image alignment”, select either Left/Right/Layered
Section settings:
- Find the field labeled “Heading” and enter the desired heading text. Use the slider or input box to adjust the heading size.
- Tick the checkbox labeled “Make section full width” to set the section’s width to match the full width of the user's device.
- Tick the checkbox labeled “Show section divider” if you want a divider to separate this section from the one above.
3. How to add products to show as image hotspots?
To add products as image hotspots in the "Shop the Look" section, you need to configure each product and its hotspot position for both desktop and mobile views. Here's a step-by-step guide on how to add and configure these hotspots, as well as customize the content displayed for each product.
Adding Products as Image Hotspots
- In the "Shop the Look" section settings, add a new block by selecting Add block.
- Select the product you want to associate with the hotspot by clicking the Choose product button.
- Choose the color of the hotspot by selecting a color from the color picker. This color will be used to mark the hotspot on the image.
- Use the horizontal position slider to adjust the hotspot's position on the x-axis. A value of 0% places the hotspot near the left border, while 100% places it near the right border.
- Use the vertical position slider to adjust the hotspot's position on the y-axis. A value of 0% places the hotspot near the top border, while 100% places it near the bottom border.
- You also can set up hotspot positions for mobile devices separately.
Customizing Product Cards
For each product hotspot, you can customize the product card display to enhance user experience. These settings apply to how the product information is shown when a user interacts with the hotspot.
- Adjust the ratio of the featured image (e.g., 1:1, 4:3).
- Choose the alignment of the content (Left, Center, Right).
- Select the size of the product card for desktop (Small, Medium, Large).
- Enable “Show Quick View Button” to allow users to quickly view product details.
- Display the vendor name and/or product ratings
Notes:
- You can add up to 5 products as hotspots in the "Shop the Look" section.
- Ensure hotspots and product cards are tested on both desktop and mobile devices for optimal user experience.
Example:
