Shop the look

Shop the look is available in v3.0 and later. Learn how to update your theme.

Use the Shop the look section to showcase multiple products that go together next to a featured image or video that displays them in context. With quick shop enabled, customers can add directly to their cart.

  • Add a featured image or autoplay video

  • Add overlay text content

  • Display products as a list or grid

Set up section


In the editor side panel, click (+) Add section and select Shop the look. Click and hold the drag handles ⋮⋮ to re-order sections.

Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:


Add an image or autoplay video (without sound) as the featured media. Use media that shows all the products being showcased.

After uploading your media, you can select the focal point of your media and add a color overlay.

Cover

Using color overlays

Learn how to change overlay colors and use gradients.

For autoplay videos, make sure your video files meet the following requirements:

Video file type

.mp4 or .mov Embedded YouTube or Vimeo videos are not supported.

Video length

< 20 seconds (Recommended)

Video size

< 10MB (Recommended)

Click section for settings

Setting
Description

Desktop media size

Change the width of the featured media as a percentage of the section width.

Media position

Place media on the Left of products or Right of products

Sticky media on scroll

Fix the feature media to the top of the window when scrolling down to view products.

Image

Select or upload an image.

Mobile image

Select or upload an alternate image to display on mobile devices.

Video

Add a short autoplay video (without sound) to replace the image.

Mobile video

Add an alternate autoplay video that appears on mobile screens.

Video focal point

For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.

Aspect ratio

For desktop and mobile, select an aspect ratio to crop the media to be a uniform shape, or select Natural to display media in their original shape.

Color scheme

Select the color scheme to apply as the overlay colors.

Overlay opacity

Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.

Add overlay content


After adding an image or video, add headings, text, and buttons. You can adjust the text size and change the position of the content.

Click section for settings

Setting
Description
Options

Overline

Add small heading text.

Heading

Add main heading text.

Heading size

Change the size of the heading from small to large.

1-8

Heading tag

Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.

H1 - H6

Text

Add multiple lines of rich text. Use the buttons to make the text bold or italicized, or to add a link.

Text size

Change the size of the text from small to large.

1-8

Button link

The URL that you want the button to link to.

Button label

The text that displays on the button.

Button style

Change the style of the button.

Solid Outline Text

Text position

Set the position of the overlay content for desktop screens.

Top / Middle / Bottom Left / Center / Right

Mobile text position

Set the position of the overlay content for mobile screens.

Top / Middle / Bottom Left / Center / Right

Add products


Click (+) Add product and select the product that you want to feature. You can add a custom image to replace the default product images.

Product items within the drawer

Change products layout


In the section settings, change the heading above the products, choose to show the product vendor names, and change the image aspect ratio.

Change the products layout to a list or grid. If you have if you have more than 4 products, we recommend using grid and enabling Slider on mobile.

Click section for settings

Setting
Description

Heading

Add text above the products.

Show vendor

Show the product vendor name above the product titles.

Image aspect ratio

Select an aspect ratio to crop product images to be a uniform shape, or select Natural to display images in their original shape.

Products layout

Display product items as a list or grid.

Enable slider on mobile

Display products as a single row slider. Toggle off to display products as stacked column with multiple rows.

Last updated

Was this helpful?