The Shop the Look section enables you to create visually appealing sections by combining different products and showing them with an image. Here's a Shop the look section in action:
To add the section, click on add section and then search for Shop the look:
Section Settings:
There's no additional block come with this section, so you just need to click on Shop the look section in order to setup everything:
Image: Select the image you want to use for the banner.
Image overlay opacity: Control the transparency level of the image banner.
Color scheme: Select the color scheme for the content + image overlay background.
Button color scheme: Select the color scheme for the button.
Height: Select the height of the section from medium to large.
Custom height: Make sure to enable custom minimal height option if you want to have custom height for this section. The maximum height you can select is 1000px.
Layout: Currently it has 2 layout options,
a) Image left, products right
b) Products left, image right
Products: Select the products you want to show in the section along side the image banner.
Content Position: It controls the position of the image banner content/text.
Heading font: Select the fonts for your primary and secondary heading.
Heading size: Control the font size of your headings (primary and secondary).
Heading: Add primary and secondary heading text.
Description: Add description/information text which will show in the image banner.
Button label: Add a button label, the button will only show when you added a link.
Link: Linked the button to anything on your store, pages/collections etc but you can also add an external link with https:// or http:// infront of it.
Enable this option to override default typography settings.
Control the banner height, setting will applied only on Mobile.
Bottom spacing desktop/mobile: That way you will get the amount of whitespace below the element you want. The default for desktop is 50px and the default for mobile is 30px.