Lookbook Sections

1. Overview

The Lookbook sections help merchants create interactive image layouts with clickable pins. Pins can display product information or custom text, allowing customers to shop directly from lifestyle images.

This group includes:

Section	Purpose
Lookbook	Display image lookbooks with product/text pins.
Lookbook masonry	Display lookbook images in a masonry/grid layout.
Lookbook product	Combine a lookbook image with product cards/carousel.
Lookbook carousel	Display multiple lookbook items in a slider.

2. Common use cases

Use Lookbook sections for:

Homepage “Shop the look” banners
Fashion outfit showcases
Product lifestyle images
Campaign landing pages
Collection storytelling
Product page styling suggestions

3. How to add

Shopify Admin → Online Store → Themes → Customize → Add section → Choose one of these sections:

Lookbook
Lookbook masonry
Lookbook product
Lookbook carousel

4. Common blocks

4.1. Pin product

Use Pin product to link a product to a specific point on the image.

Setting	Description
Pin background	Background color of the pin.
Pin text	Text/icon color inside the pin.
Position horizontal	Moves the pin left or right.
Position vertical	Moves the pin up or down.
Pin size	Controls the pin size.
Pin style	Controls the pin appearance.
Product	Selects the product linked to the pin.
Product design	Controls the product popup/card style.
Image ratio	Controls product image display.
Full image	Shows the full product image.
Show vendor	Shows or hides product vendor.
Placement	Controls where the popup appears.

Example:

Setting	Value
Pin background	`#32355D`
Pin text	`#FFFFFF`
Position horizontal	`20`
Position vertical	`34`
Pin size	Medium
Pin style	Icon 1
Product	Jangbung Hotekisu
Product design	1
Image ratio	Adapt to image
Placement	Top

4.2. Pin text

Use Pin text to show custom information, such as product features, materials, or campaign messages.

Setting	Description
Pin background	Background color of the pin.
Pin text	Text/icon color inside the pin.
Position horizontal	Moves the pin left or right.
Position vertical	Moves the pin up or down.
Pin size	Controls the pin size.
Pin style	Controls the pin appearance.
Title	Text popup title.
Content	Text popup description.
Placement	Controls where the popup appears.

Example:

Setting	Value
Pin background	`#01BAD4`
Pin text	`#FFFFFF`
Position horizontal	`50`
Position vertical	`50`
Pin size	Medium
Pin style	Icon 1
Title	01 - Water Resistance
Content	With groundbreaking water resistant capabilities, The Mission has the highest waterproof rating of any smartwatch on the market.
Placement	Top

5. Section details

5.1. Lookbook

Purpose

Use Lookbook to display one or more images with interactive product or text pins.

Main settings

Setting	Description
Items per row	Controls the number of lookbook items per row on desktop, tablet, and mobile.
Spacing between items	Controls spacing between lookbook items.
Image ratio	Controls image display ratio.
Full image	Shows the full image without cropping.
Colors schema	Applies the section color style.
Background opacity	Controls background opacity.
Width	Controls section width.
Background image	Adds a background image for the section.

Blocks

Block	Use
Lookbook item	Adds the main image.
Pin product	Adds a product hotspot.
Pin text	Adds a text hotspot.

5.2. Lookbook masonry

Purpose

Use Lookbook masonry to create a grid-style lookbook layout with different image sizes.

Main settings

Setting	Description
Colors schema	Applies the section color style.
Background opacity	Controls background opacity.
Banner link	Adds a link to the masonry item.
Open this link in a new tab	Opens the link in a new tab.
Image hover effect	Adds hover effect to the image.
Item effect when hover	Adds hover effect to the whole item.
Column width - Desktop	Controls item width on desktop, for example `25%`.
Row count - Desktop	Controls item height/row span on desktop.
Column width - Mobile	Controls item width on mobile, for example `50%` or `100%`.
Row count - Mobile	Controls item height/row span on mobile.

Blocks

Block	Use
Item masonry	Adds one masonry item.
Media	Adds image/media inside the item.
Pin product	Adds a product hotspot.
Pin text	Adds a text hotspot.

Note: If hover effects make the image resize or layout unstable, set Image hover effect and Item effect when hover to None.

5.3. Lookbook product

Purpose

Use Lookbook product to show a large lookbook image together with related product cards or a carousel.

Main settings

Setting	Description
Image	Uploads the desktop image.
Mobile image	Uploads a separate mobile image. If empty, the desktop image is used.
Image height	Controls desktop image height.
Fixed height	Sets desktop fixed height, for example `820px`.
Mobile image height	Controls mobile image height.
Mobile fixed height	Sets mobile fixed height, for example `450px`.
Product design	Controls product card design.
Image ratio	Controls product image ratio, for example Square.
Full image	Shows the full product image.
Show vendor	Shows or hides vendor.
Loop	Allows carousel to loop.
Autoplay	Controls autoplay. `0` means disabled.
Pause on hover	Pauses autoplay when hovering.
Prev / Next button	Shows carousel arrows.
Use navigation	Enables navigation arrows.
Pagination	Shows carousel dots.
Width	Controls section width.
Margin / Padding	Controls section spacing on desktop and mobile.

Blocks

Block	Use
Pin	Adds a product hotspot to the image.

Example Pin:

Setting	Value
Pin background	`#FA3044`
Pin text	`#FFFFFF`
Position horizontal	`50`
Position vertical	`50`
Product	Adilette Slide Sandal

5.4. Lookbook carousel

Purpose

Use Lookbook carousel to display multiple lookbook images in a slider.

Main settings

Setting	Description
Center content	Centers the content overlay.
Content padding top/bottom	Controls vertical padding inside the content box.
Content padding left/right	Controls horizontal padding inside the content box.
Background color	Sets the content box background color.
Loop	Allows slides to loop.
Autoplay	Controls automatic sliding.
Pause on hover	Pauses autoplay when hovering.
Prev / Next button	Shows carousel arrows.
Pagination	Shows carousel dots.

Blocks

Block	Use
Lookbook item	Adds one carousel slide.
Lookbook Content	Adds content overlay on the image.
Heading	Adds heading text.
Pin product	Adds a product hotspot.
Pin text	Adds a text hotspot.

6. Best practices

Use high-quality lifestyle images where products are clearly visible.
Place pins near the related product or feature.
Do not place pins over faces, buttons, or important text.
Use contrasting pin colors so customers can see them easily.
Use Pin product for shoppable items and Pin text for feature explanations.
Keep pin content short and easy to understand.
On mobile, use fewer pins and check pin positions carefully.
Upload a separate mobile image if the desktop image is cropped badly.
Avoid adding too many Lookbook sections on one page because they are image-heavy.

7. Common issues

Issue	Cause	Solution
Section is not showing	Missing image or item block	Add image/content and check section visibility.
Pin is not visible	Pin color blends with image	Change Pin background color.
Pin is in the wrong place	Position settings are not adjusted	Change Position horizontal and Position vertical.
Pin looks wrong on mobile	Image crops differently on mobile	Upload mobile image or adjust pin position.
Product popup does not show	Product is not selected	Select a product in the pin block.
Product image is cropped	Image ratio setting crops image	Use Adapt to image or enable Full image.
Carousel does not slide	Only one item/product exists	Add more items or products.
Autoplay does not work	Autoplay is set to `0`	Set autoplay value greater than 0.
Navigation is missing	Navigation is disabled	Enable Prev/Next button or pagination.
Masonry layout looks broken	Column width or row count is incorrect	Adjust item masonry layout settings.