# Lookbook cards

The **Lookbook cards** section helps you showcase multiple products in stunning pop-ups in a combination of captivating visuals and easy navigation. Include pins of products on images in which each pin directs customers to the product details, creating an interactive shopping experience and boosting sales with this dynamic feature. In this article, we will show you how to add a Lookbook cards section. ## How to add a Lookbook cards section to your Shopify store {% hint style="success" %} Steps 1. In the theme editor **(Customize)**, click **Add section.** 2. Select **Lookbook cards**. 3. Make necessary changes. 4. **Save** the settings. {% endhint %} ## How to edit a Lookbook cards section ### Section settings #### Section header Choose your preferred section header's **Layout**: **Vertical**/ **Standing column**. {% tabs %} {% tab title="Vertical" %}

{% endtab %} {% tab title="Standing column" %}

{% endtab %} {% endtabs %} Use the provided text fields to add a suitable **Heading**. Leave it blank if you do not want to display it. Change the **Heading size** as you like: * Heading xs * Heading sm * Heading md * Heading lg * Heading xl * Heading 2xl * Display md * Display lg * Display xl.

#### Highlight text {% hint style="info" %} See: [How to apply Highlight text to the section heading and block headings?](https://docs.foxecom.com/sleek-theme/pages-global-sections/general-settings#highlight-text) {% endhint %} Use the provided text fields to add a suitable **Subheading** and **Description**. Leave them blank if you do not want to display them You can also change the **Description size** to Small/ Base size/ Large to make the content look balanced on your website.

Add a call-to-action button that directs customers to the targeted page specified in the **Button link** field. Add a **Button label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.** If the **Show on heading section on desktop** checkbox is selected, the button will display on the section header. By default, this button when added will show at the end of the section.

Select a preferred **Image** to display on top of the section header and adjust the image width (size) between 60px and 200px. The image height will be scaled proportionally.

#### Grid settings Use the slider to adjust the **Number of columns on desktop** (between 2 and 4) for the Products blocks. Control the spacing between the blocks by selecting **Column gap** and **Row gap** options: * **Column gap**: Extra large/ Large/Medium/Small/ Extra small/ None. * **Row gap**: Extra large/ Large/Medium/Small/ Extra small/ None/ Same as the column gap.

#### Carousel settings You can **Enable the carousel on desktop** (the number of added Products blocks > the [number of columns on desktop](#grid-settings)).

**Product cards** Select the product card's **Image ratio** as: * Use global settings * Adapt to image * Square (1:1) * Portrait (3:4) * Landscape (4:3)

{% hint style="info" %} To adjust the **Use global settings** of the Product cards, navigate to the **Theme settings** > **Product cards**. See more: [product-cards](https://docs.foxecom.com/sleek-theme/theme-settings/product-cards "mention") {% endhint %} **Mobile layout** If you are not into the grid layout on mobile view, you can use the carousel layout by selecting the option **Enable swipe on mobile**. ### Block settings Add **Products** blocks to showcase your stunning images and interactive product lists within each block. {% hint style="info" %} * Add up to **8 Product blocks** to the section. * Pin up to **5** **products** for each block. {% endhint %}

Select an **Image** for each of the product lists.

Enter the **Heading** text to display as the title of the product list pop-up in the lookbook card and set a **Heading size** for it. Leave it blank if you do not want to display it.

## Best practices :white\_check\_mark: Do: * Use images of the default ratio of 3/4 so that the images won't be cropped. * For each image, pin it with 1-3 products for best optimization and visual effects.