# Lookbook carousel

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light%20(30)_XaFg8gzl.jpg)

An interactive lookbook carousel that showcases images with shoppable products, allowing customers to explore and purchase items directly from each slide.

## How to add a Lookbook carousel section to your Shopify store

<Hint type="success">

1. In the theme editor **(Customize)**, click **Add section.**
2. Select **Lookbook carousel** section.
3. Make necessary changes.
4. **Save.**

</Hint>

## How to customize a Lookbook carousel section

### Section settings

<Table widths="212.940673828125,auto">

| Setting | Description |
| --- | --- |
| **Container** | Choose the layout width of the section (full width or fixed width). |
| **Height** | Set the height of the carousel. |
| **Content position** *(Full width only)* | Control whether the content appears inside or outside the carousel image. |
| **Corner radius** | Adjust the roundness of the carousel corners. |
| **Auto-rotate content** | Enable automatic sliding between carousel items. |

</Table>

<Tabs>
<Tab title="Full width - Inside">

![image](https://docs-assets.foxecom.app/pebble-theme/image_GWcNibka.png)

</Tab>

<Tab title="Full width - Outside">

![image](https://docs-assets.foxecom.app/pebble-theme/image_4H6csNnW.png)

</Tab>

<Tab title="Fixed width">

![image](https://docs-assets.foxecom.app/pebble-theme/image_jxtB1wQa.png)

</Tab>
</Tabs>

<Tabs>
<Tab title="Carousel height options">

| Option             | Height              |
| ------------------ | ------------------- |
| **Adapt to image** | 100% (image height) |
| **Small**          | 57rem (570px)       |
| **Medium**         | 66rem (660px)       |
| **Large**          | 75rem (750px)       |

</Tab>
<Tab title="Adapt to image">

![image](https://docs-assets.foxecom.app/pebble-theme/image_k7bE8420.png)

</Tab>

<Tab title="Small">

![image](https://docs-assets.foxecom.app/pebble-theme/image_0BS8FiLD.png)

</Tab>

<Tab title="Medium">

![image](https://docs-assets.foxecom.app/pebble-theme/image_RDmzbikL.png)

</Tab>

<Tab title="Large">

![image](https://docs-assets.foxecom.app/pebble-theme/image_epEOnNbO.png)

</Tab>
</Tabs>

<Hint type="info">

Check out other Lookbook carousel section settings: [Common settings available in most sections](https://docs.foxecom.com/pebble-theme/theme-sections/overview#common-settings-available-in-most-sections)

</Hint>

### Block settings

<Tabs>
<Tab title="Lookbook">

![image](https://docs-assets.foxecom.app/pebble-theme/image_jfowhY2y.png)

<Table widths="186.4320068359375,auto">

| Setting | Description |
| --- | --- |
| **Image** | Upload the main image displayed in the lookbook slide. |
| **Image mobile** | Upload a separate image optimized for mobile devices. |
| **Media overlay** | Enable an overlay layer to improve text readability on the image. |
| **Products** | Select and display products that can be shopped directly from the slide. |
| **Aspect ratio** | Choose the product image aspect ratio. |
| **Heading** | Add a title or text displayed on top of the image. |
| **Heading preset** | Select the heading style (e.g., Heading 1, 2) based on theme typography. |

</Table>

</Tab>
</Tabs>