# Lookbook
## There are 2 ways to add a Section to your store
### **1. Add a pre-made section from our demo?**
[Read the instructions here](/ella-7-documentation/sections-and-blocks/get-section-on-demo.md)
### **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](https://1.envato.market/c/3093631/377371/4662)
## 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](https://halosoft.ticksy.com/) — 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/lookbook.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.