Lookbook

The Lookbook section is a powerful and flexible layout builder, allowing you to create stylish, custom lookbook pages or product showcases.

There are 2 ways to add a Section to your store

1. Add a pre-made section from our demo?

Read the instructions here

2. Add a Lookbook section manually?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• In the Templates -> Add section -> choose Lookbook

How to add a Lookbook section in Lookbook?

• From your Shopify admin, go to Online Store -> Themes.

• Find the theme that you want to edit, and then click Customize.

• In the Templates -> choose Lookbook -> Lookbook section.

• Here, you can customize the interface using the available settings below.

Lookbook Section - Settings Guide

Layout (core)

Setting	Type	Description	Visibility
Layout Type	select (Grid, Carousel, Editorial)	Choose presentation style for lookbook items.	Visible always
Carousel on Mobile	checkbox	When using Grid layout, enable a mobile carousel instead of a stacked grid.	Visible when Layout Type is Grid
Columns (Grid)	range	Number of columns on desktop when using Grid layout. Default: 5.	Visible when Layout Type is Grid
Columns (Carousel)	range	Number of slides per view when using Carousel layout. Default: 5.	Visible when Layout Type is Carousel
Mobile Columns (Grid)	select	Mobile columns for Grid layout (1 or 2).	Visible when Layout Type is Grid AND Carousel on Mobile is false
Mobile Columns (Carousel)	range	Mobile slides per view for Carousel or when Carousel on Mobile is enabled.	Visible when Layout Type is Carousel OR Carousel on Mobile is true

Content Flow & Alignment

Setting	Type	Description	Visibility
Content Direction	select	Direction for item content (Row/Horizontal).	Visible always (default used by template)
Horizontal Alignment	select (Left, Center, Right, Space Between)	Horizontal alignment for item content (not used for carousel).	Visible when Layout Type != Carousel
Vertical Alignment	select (Top, Center, Bottom, Stretch)	Vertical alignment for item content (not used for carousel).	Visible when Layout Type != Carousel
Image Layout	select (Left, Right)	For editorial layouts, choose whether the image sits left or right in the editorial item.	Visible always
Align Baseline	checkbox	When vertical alignment is Bottom, align content baseline instead of bottom.	Visible when Layout Type != Carousel AND Vertical Alignment == Bottom
Gap	range (px)	Spacing between items. Default: 12px.	Visible always

Carousel controls (visible when Layout Type is Carousel)

Setting	Type	Description	Visibility
Loop	checkbox	Loop slides when using Carousel.	Visible when Layout Type is Carousel
Navigation	select (None, Arrows, Pagination, Arrows + Pagination)	Controls on/off for carousel arrows and/or pagination.	Visible when Layout Type is Carousel
Pagination Type	select (Bullets, Dynamic, Progress, Fraction)	Pagination style when Pagination is enabled.	Visible when Navigation == Pagination OR Navigation == Arrows + Pagination

Lookbook Item Layout / View

Setting	Type	Description	Visibility
Enable All Items Layout	checkbox	When enabled, the block forces the lookbook item layout to a global setting (disables per-item popup view behavior).	Visible always
View Product	select (Popup, On-image)	When All Items Layout is disabled, choose how product details open: popup or on-image overlay.	Visible when Enable All Items Layout is false

Size

Setting	Type	Description	Visibility
Width	select (Fit, Full, Custom)	Block width behaviour.	Visible always
Custom Width	range (%)	When Width is Custom, set the block width percent on the container.	Visible when Width == Custom
Height	select (Fit, Fill, Custom)	Control item/block height behaviour.	Visible always
Custom Height	range (%)	When Height is Custom, set height as percent.	Visible when Height == Custom

Appearance & Colors

Setting	Type	Description	Visibility
Inherit Color Scheme	checkbox	When unchecked, per-block color overrides become available below.	Visible always
Background Color	color	Background color override for the block (when Inherit Color Scheme is unchecked).	Visible when Inherit Color Scheme is unchecked
Background Gradient	color_gradient	Optional gradient background (when Inherit Color Scheme is unchecked).	Visible when Inherit Color Scheme is unchecked
Heading Color	color	Headings color override.	Visible when Inherit Color Scheme is unchecked
Text Color	color	Body text color override.	Visible when Inherit Color Scheme is unchecked
Primary Color	color	Primary accent/action color override.	Visible when Inherit Color Scheme is unchecked
Primary Hover	color	Hover color for primary accents.	Visible when Inherit Color Scheme is unchecked
Border Color	color	Border color override.	Visible when Inherit Color Scheme is unchecked
Shadow Color	color	Shadow color override for elevated item styles.	Visible when Inherit Color Scheme is unchecked

Background Media & Overlay

Setting	Type	Description	Visibility
Background Media	select (None, Image, Video)	Choose a block-level background media type.	Visible always
Video	video selector / url	Video source used when Background Media is Video.	Visible when Background Media == Video
Video Position	select (Cover, Contain)	How the video is positioned/scaled.	Visible when Background Media == Video
Background Image	image_picker	Background image used when Background Media is Image.	Visible when Background Media == Image
Background Image Position	select (Cover, Fit)	How the background image is positioned/scaled.	Visible when Background Media == Image
Media Overlay	checkbox	Toggle a colored overlay above the background media.	Visible always
Overlay Color	color (alpha)	Color (with alpha) for the media overlay.	Visible when Media Overlay is enabled
Overlay Style	select (Solid, Gradient)	Use a solid overlay or a gradient overlay.	Visible when Media Overlay is enabled
Gradient Direction	select (To Top, To Bottom)	Direction for gradient overlay.	Visible when Media Overlay is enabled AND Overlay Style == Gradient

Padding

Setting	Type	Description	Visibility
Padding Top	range (px)	Top spacing for the block. Default: 0px.	Visible always
Padding Bottom	range (px)	Bottom spacing for the block. Default: 0px.	Visible always
Padding Left	range (px)	Left inline padding for the block. Default: 0px.	Visible always
Padding Right	range (px)	Right inline padding for the block. Default: 0px.	Visible always

Supported Child Blocks

The Lookbook block allows adding child blocks which represent items or grouping elements. Supported types in schema:

Block Type	Purpose / Notes
@theme / @app	Placeholders for theme or third-party app blocks to inject custom content.
group	Generic grouping block.
_divider	Simple divider used between items or groups.
_lookbook-item	A single lookbook item block (main item type) — contains the item content (image, link, etc.).
_lookbook-item-all	Special item representing "all items" action or combined layout behaviors.
_lookbook-circle-text	Decorative circular text overlay item type.
_lookbook-row	Row grouping of lookbook items for complex layouts.
_lookbook-group	Higher-level grouping block for nested collections of items.

Zero design skills? Create professional mockups, logos & videos for your store in seconds. Create... in seconds

Need More Help?

If you experience any difficulties or require extra support with your Ella theme, feel free to contact our support team through our Ticket System — we’ll get back to you within 24 hours.

Simply scan the QR code below to join our Facebook community and stay updated with the latest news, tips, and announcements.

Join HaloThemes Community