> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-7-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-7-documentation/sections-and-blocks/lookbook.md).
# 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.