Lookbook

A horizontal strip of large images – tall, square and wide – that shoppers drag, swipe or scroll through. Images can link to a page or show a product with its price.

In the editor: Lookbook
Where it goes: Any page template, with Add section
In the presets: Poster: Home page
Settings: 21
Blocks: Image
App blocks: Yes

When to use it

A lookbook shows a collection the way a magazine would: a rhythm of tall and wide pictures you browse at your own pace. The Poster preset uses it on its home page.

Set it up

Add an Image block for each photo and pick its Shape: Tall, Square or Wide. Mixing shapes gives the row its rhythm.
Add a Caption and a Link, or pick a Product – it then shows on the photo with its price and the caption links to it.
Set the Image height on desktop and on mobile; the width follows from each image's shape.

Browsing

Shoppers drag the row with the mouse, swipe on touch screens or use the arrows. Show arrows and Show progress bar add the controls; the bar shows how far along the row they are. Show part of the next card lets the next image peek in, so it is clear the row goes on.

With Enlarge on click, images open full screen in a gallery; links then move into the captions.

Space between images and Full width fine-tune the strip.

All settings

Every setting in the order of the theme editor, with its options and its default value.

Section: Lookbook21 settings

Setting	Options	Default
Heading	Rich text (one line)	Sample text
Text	Rich text	–
Heading size	Large · Medium · Small	Medium
Heading alignment	Left · Center	Left
Image height on desktop	240–720px	480px
Image height on mobile	200–480px	320px
Space between images	0–48px	12px
Full width	Checkbox	On
Enlarge on clickOpens the images in a full-screen gallery. Links then sit in the captions.	Checkbox	On
Show arrows	Checkbox	On
Show progress bar	Checkbox	On
Show part of the next cardFor sliders: the next card shows in part and the edges fade, so it is clear the row goes on.	Checkbox	On
Color scheme	Color scheme	Scheme 1
Section spacing
Top padding	0–160px	80px
Bottom padding	0–160px	80px
Top padding on mobile	0–120px	56px
Bottom padding on mobile	0–120px	56px
Advanced
Hide on mobile	Checkbox	Off
Hide on desktopMobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below).	Checkbox	Off
Animate on scroll	Checkbox	On
Anchor IDLink to this section with #anchor-id.	Text	–

Block settings

Block: Image5 settings

Setting	Options	Default
Image	Image	–
Shape	Tall · Square · Wide	Tall
Caption	Text	–
Link	Link	–
ProductShows the product with its price on the photo and links the caption to it.	Product	–

Shop the lookA styled photo with dots on each product and a product list beside it, with one button to add everything to the cart.SlideshowSeveral full-width banners that change on their own or with arrows, swipes and keys, with a slide or fade transition.Image with hotspotsAn image with dots that open small cards – to explain the details of a product, a room or a material.