# Lookbook With Collection



To add this section, please follow below steps:

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Add section** and choose "**Lookbook With Collection**".

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FyVMn1PZWxKIcydZlXGDG%2Flookbook%20with%20collection.gif?alt=media&#x26;token=a156b807-1a3a-479e-a72c-192d5cf0d2e0" alt=""><figcaption></figcaption></figure>

### Section settings

| Settings                                                | Description                                                                                                                                                   |
| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout                                                  | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
| Padding Container Full Width                            | Determine the left and right padding of the section when the Full Width layout is selected.                                                                   |
| Background Color - Background Gradient                  | Set color (or gradient) for the section background.                                                                                                           |
| Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately.                                               |
| Title                                                   | Enter text for the section title.                                                                                                                             |
| Title Color                                             | Set color for the section title.                                                                                                                              |
| Set color for the section title.                        | Determine the bottom spacing of the title.                                                                                                                    |
| Title Font Size                                         | Specify the font size of the section title.                                                                                                                   |
| Title Font Size Mobile                                  | Specify the font size of the section title on Mobile device.                                                                                                  |
| Description                                             | Enter text for the section description.                                                                                                                       |
| Description Color                                       | Set color for the section description text.                                                                                                                   |
| Description Spacing Bottom                              | Determine the bottom spacing of the description text.                                                                                                         |
| Description Font Size                                   | Determine the font size of the description text.                                                                                                              |
| Description Font Size Mobile                            | Determine the font size of the description text on Mobile.                                                                                                    |
| Alignment                                               | Select the alignment of the content including title, description to be either to the Left, Right or Center.                                                   |
| Content Width                                           | Set the width for the section content.                                                                                                                        |
| View All                                                | Enter text for the View All link.                                                                                                                             |
| View All Color                                          | Apply color for the View All text.                                                                                                                            |
| View All Link                                           | Set URL for the View All link to redirect to.                                                                                                                 |
| Enable View All Border?                                 | Toggle to show border/underline of the view link                                                                                                              |
| View All Font Size                                      | Set the font size for the view all text.                                                                                                                      |
| View All Font Weight                                    | Select the font weight of the view all to be either Normal, Medium, Semi Bold, Bold, Bolder or Black.                                                         |
| View All Position                                       | Select the position of the View All to be either to the Left, Right or Center.                                                                                |
| View More Spacing Top                                   | Determine the top spacing of the View all link.                                                                                                               |

#### SETTINGS FOR LOOKBOOK ITEM BLOCKS&#x20;

| Settings                      | Description                                                                                                                                              |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Lookbook Style                | <p>Select the style for lookbook. <br>- Style 1: A popup is a product card.<br>- Style 2: A popup is minimal with product title and price info only.</p> |
| Enable Lookbook Max Width     | Toggle to apply the Lookbook Max Width setting on the Lookbook Popup style 2.                                                                            |
| Dot Size On Desktop           | Determine the size of the lookbook dot on desktop.                                                                                                       |
| Dot Size On Mobile            | Determine the size of the lookbook dot on mobile.                                                                                                        |
| Dot Pinning Shadow Color      | Set the pinning shadow color of the dot.                                                                                                                 |
| Dot Outer Color               | Set the outer ring of the lookbook dot.                                                                                                                  |
| Dot Inner Color               | Set the inner background of the lookbook dot.                                                                                                            |
| Show Number On Dot On Desktop | The inner of lookbook dot turns into count number on Desktop.                                                                                            |
| Show Number On Dot On Mobile  | The inner of lookbook dot turns into count number on Mobile.                                                                                             |
| Dot Number Desktop Font Size  | Determine the number font size on desktop.                                                                                                               |
| Dot Number Mobile Font Size   | Determine the number font size on mobile.                                                                                                                |
| Product Title Truncate Line   | Decide the number of line to truncate product title if the title length exceeds the line.                                                                |

#### SETTINGS FOR SHOW ALL BUTTON

| Settings                     | Description                                            |
| ---------------------------- | ------------------------------------------------------ |
| Show Product Text            | Enter text for the show all lookbook products button   |
| Hide Product Text            | Enter text for the hide all lookbook products button   |
| Background Color             | Set background for the show/hide all buttons.          |
| Background Gradient          | Set background gradient for the show/hide all buttons. |
| Color                        | Set color the buttons' text.                           |
| Button Height - Button Width | Determine the width and height of the buttons.         |

### \[BLOCK] Lookbook Image

| Settings                    | Description                                                                                                                           |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| Lookbook Image              | Select/Upload image for the block.                                                                                                    |
| When Click On Image         | <p>Decide the behavior of the image on clicked. The options are: Open Fancybox for a clearer image view, Redirect To URL.</p><p> </p> |
| Link                        | Set URL for the image to redirect to if the "Redirect To URL" is selected.                                                            |
| Choose a product            | Select a product for a lookbook dot                                                                                                   |
| Dot Horizontal Position (%) | Determine the horizontal position of the dot relative to the block's left.                                                            |
| Dot Vertical Position (%)   | <p>Determine the horizontal position of the dot relative to the block's top.</p><p> </p>                                              |
| Lookbook Position From Dot  | Select the direction of the Loobook Style 2 to appear relative to the dot on hovered on Desktop.                                      |
