Shop the look
Last updated
Was this helpful?
Last updated
Was this helpful?
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
In the editor side panel, click (+) Add section and select Shop the look. Click and hold the drag handles ⋮⋮ to re-order sections.
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.
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
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.
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
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
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
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
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
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.
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
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 . This option doesn't change the heading's appearance.
Section colors
Section width
Section padding
Using color overlays
Learn how to change overlay colors and use gradients.
