Shop the look

The Shop the look section is designed to promote multiple products styled together, often as part of a set.

By featuring an image that showcases products combined in a cohesive look, this section allows customers to view related products alongside the main image and add them directly to their cart. This section is ideal for encouraging customers to purchase entire outfits, sets, or complementary items in one easy experience.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Shop the look section. The section will now be added to your page, ready for customization.

2, Section settings:

The Section settings control the main image, layout, product display, and other visual options.

• General settings:

• Image: Select an image to display in the Shop the look section. Use a high-quality image that clearly showcases the featured products.

• Image ratio: Adjust the image ratio with the following options: Square, Portrait, Adapt to image (maintains original image size).

• Desktop layout: Choose the position of the image relative to the product list: Left or Right. On mobile, the image layout defaults to showing the image first.

• Products per row on desktop: Specify the number of products to display per row beside the image.

• Product card settings: allow you to control the appearance of products displayed alongside the main image.

• Image ratio: Adjust the product image ratio to Portrait or Square.

• Show product rating: If enabled, displays the product rating (for products with existing reviews).

• Show color swatches: Enable this option to display color swatches under each product image, helping customers easily view available color variations.

• Enable quick add button: Activates a Quick view button, allowing customers to view product details and add items to their cart without navigating away from the page.

• Hotspot color: Choose a color for the hotspot markers on the image: Light (White) or Dark (Black)

• Shop the look button (Mobile only): Customize the label for the “Shop the Look” button on mobile. Choose a color for the button. When customers tap this button on mobile, the products list will appear, making it easier for mobile users to view and add items.

3, Product block settings:

The Product block settings enable you to select individual products and set the position of their respective hotspots:

• Add a product block. Select a product from your store to display in the section. This product will appear in the product list beside the main image.

• Hotspot position: Position the hotspot for each product on the main image using the following sliders:

• Horizontal: Adjust the horizontal position of the hotspot (range from 0% to 100%).

• Vertical: Adjust the vertical position of the hotspot (range from 0% to 100%).