Shop the Look

Overview

Shop the look is a section that you can add to your homepage in order to advertise multiple products as shown in one photograph.

This is great for clothing brands who wish to advertise a combination of products on a model, but it can also be a great addition to many other types of storefront.

To locate this section:

  1. Within Themes, select Customize.

  2. On your Homepage template, scroll down to Add section on the left-hand menu.

  3. Scroll down to Products, and select Shop the look.

Adding a new Shop the Look section.

Select Your Image

The first step is to select your image featuring your products, by scrolling down to Image and clicking Select Image.

Adding a featured image.

🌟 We recommend using portrait photos rather than landscape, as they will work best for this feature - 2000 x 900px is recommended.

Add Your Products

You can assign up to four products to your featured image.

To add a product:

  1. Click Product, and then Select product.

  2. Choose the product you wish to add, and click Select.

Adding products.

Highlighting the Products

The products will then be allocated a number between 1 and 4. To position a product's numbered hotspot over its placement in the image, simply move the sliders labelled Position from top and Position from left.

Adjusting the hotspot positions.

When your customers click on the numbered hotspots, the corresponding product will be highlighted on the right. Your customers can then click on the product to be taken to the product page.

Demonstrating the hotspots highlighting their corresponding product.

Color Scheme

To change the color of the section, go to Color scheme and select one of the following options:

  • White

  • Light

  • Feature

  • Dark

Altering the overall color scheme.

Subheading & Heading

To change the text that heads up the section, simply type your desired text into Subheading and Heading.

Adding a subheading and a heading.

Hotspot Colors

In order to change the colors of the numbered hotspots, simply select Hotspot text and Hotspot background, and choose a color from the selector.

Changing the colors of the hotspots.

Description

You can personalize your description by adding text to the Heading, the Description, and the Button text.

Personalizing the text within your description.

You can choose the Description position, moving it either to the Left, the Right, or keeping it Hidden altogether.

Moving the description position.