> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/shoppable-content/lookbook.md).
# Lookbook
A shoppable gallery of styled looks, shown as a grid or a carousel. Each look is a photo tagged with the products in it — customers open a look to see those products in a popup and add them to cart without leaving the page.
***
## Settings
### Layout
| Setting | Description |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
### Gap
| Setting | Description |
| ------- | ---------------------------------------------------------- |
| Desktop | Space between the section header and the looks on desktop. |
| Mobile | Space between the header and the looks on mobile. |
### Media
| Setting | Description |
| ------- | ---------------------------------------- |
| Ratio | Aspect ratio applied to each look image. |
### Content
| Setting | Description |
| --------------- | ---------------------------------------------- |
| Title size | Visual size of each look's title. |
| HTML title tag | Semantic heading tag for the title, for SEO. |
| Button label | Text of the shop-the-look button on each look. |
| Button style | Visual style of that button. |
| Content spacing | Space between the look image and its text. |
| Content gap | Space between the title and the button. |
### Product thumbnail
| Setting | Description |
| ---------------- | ----------------------------------------------------------- |
| Desktop behavior | When the product indicator appears on each look on desktop. |
| Mobile behavior | When the product indicator appears on mobile. |
### Looks layout
| Setting | Description |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Type | **Grid** — Looks sit in a fixed grid of rows and columns. **Carousel** — Looks scroll sideways as a swipeable slider. |
| Desktop columns | Number of looks per row on desktop. |
| Mobile columns | Number of looks per row on mobile. |
| Enable swipe on mobile | Grid only — lets the grid be swiped sideways on mobile instead of stacking. |
| Show next slide preview on desktop | Carousel only — peeks the edge of the next look to hint that more can be swiped. |
| Custom columns | Set the number of columns per screen size yourself instead of using the standard breakpoints. |
| Columns per breakpoint | The custom column values, entered per screen size. See [How to set up custom columns](/helix/how-to-guides/how-to-set-up-custom-columns.md) for the value syntax. |
### Looks gap
| Setting | Description |
| ------------------- | ---------------------------------------------- |
| Horizontal | Grid only — gap between looks on desktop. |
| Vertical | Grid only — gap between rows on desktop. |
| Horizontal — Mobile | Grid only — gap between looks on mobile. |
| Vertical — Mobile | Grid only — gap between rows on mobile. |
| Desktop | Carousel only — gap between slides on desktop. |
| Mobile | Carousel only — gap between slides on mobile. |
### Navigation
Carousel only.
| Setting | Description |
| -------------------------- | ------------------------------------------- |
| Show navigation on desktop | Shows previous/next arrows on the carousel. |
| Position | Where the arrows sit. |
| Style | Visual style of the arrow buttons. |
| Icon | Arrow shape. |
| Behavior | When the arrows appear. |
### Pagination
Carousel only.
| Setting | Description |
| -------------------------- | --------------------------------------------------------------------------------- |
| Show pagination on desktop | Shows a progress indicator beneath the carousel. |
| Type | Style of the pagination indicator. |
| Top padding | Space between the carousel and the indicator. |
| Limit width | Caps the progress bar to a **Max width** instead of letting it span the carousel. |
| Max width | The widest the progress bar can run. Available when Limit width is on. |
### Autoplay
Carousel only.
| Setting | Description |
| -------------- | ------------------------------------------------------ |
| Autoplay | Advances the carousel automatically. |
| Pause on hover | Stops the timer while the cursor is over the carousel. |
| Speed | How long each slide stays before advancing. |
### Popup layout
| Setting | Description |
| ------- | -------------------------------------- |
| Mobile | How the product popup opens on mobile. |
### Popup product card
Controls the product card shown inside the look popup.
| Setting | Description |
| --------------------- | ----------------------------------------------------------------------------- |
| Layout | Style of the product card. |
| Border thickness | Card border width. Not available with the Card layout. |
| Shadow | Card shadow depth. Not available with the Card layout. |
| Add to cart position | Where the add-to-cart button sits. Not available with the Card layout. |
| Add to cart style | Visual style of the add-to-cart button. Not available with the Card layout. |
| Show variant selector | Lets shoppers pick a variant on the card. Not available with the Card layout. |
### Background
| Setting | Description |
| --------------- | ------------------------------------------------- |
| Media | Section background media type. |
| Video | Shopify-hosted background video. Autoplays muted. |
| Image | Section background image. |
| Image — Mobile | Separate background image for mobile. |
| Show overlay | Adds a color layer over the background media. |
| Overlay color | Color and opacity of the overlay. |
| Parallax effect | Scroll effect applied to the background media. |
### Color
| Setting | Description |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |
### Padding
| Setting | Description |
| ----------------------- | ----------------------------------------------------- |
| Padding top / bottom | Outer spacing above and below the section. |
| Custom padding — Mobile | Override desktop padding with separate mobile values. |
***
## Available Blocks
### Section Header
The heading area above the looks. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).
### Look
A single look. Add one block per look.
| Setting | Description |
| ------------- | ---------------------------------------------------------------------- |
| Title | The look's title. |
| Products | The products tagged in this look. |
| Media type | **Image** or **Video** for the first media slot. |
| Image / Video | The media itself, matching the chosen type. |
| Media 2–4 | Three more slots, each with its own **Media type** and image or video. |
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}