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?
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)
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
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)
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
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
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
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
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
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:
@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.
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.
Last updated