> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-sections/lookbook.md).
# Lookbook
The Lookbook Section allows you to display lifestyle or model images with clickable product hotspots — a perfect way to visually inspire customers and let them shop directly from photos.
To customize the Lookbook in our theme please follow the steps:
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Locate **Lookbook**
3. **Save**
{% endhint %}
## Section Settings
### **Section Header**
* **Show “Section header”** – Toggle ON/OFF to show or hide the header.
* **Heading** – Add a title for your lookbook (e.g., *Explore the Collection*).
* **Show button** – Enable to display a “View all lookbook” button.
* **Text button** – Set the button label (e.g., *View all lookbook*).
* **Link button** – Add the destination link for the button.
***
### **General**
* **Layout** – Choose section layout style (e.g., *Full width* for immersive visuals).
* **Color scheme** – Select a color scheme that matches your theme.
***
### **Lookbook Settings**
* **Aspect ratio** – Maintain consistent image proportion (e.g., *Original aspect ratio*).
* **Custom ratio** – Define a custom display ratio (e.g., *21:9*).
***
### **Settings for Carousel**
If multiple lookbook images are added:
* **Sliders per view (desktop)** – Choose how many images appear at once (1–3).
* **Autoplay** – Enable automatic sliding.
* **Loop** – Enable infinite scrolling for a seamless experience.
***
### **Section Padding**
Control spacing for clean alignment.
* **Padding top** – Adjust space above the section (default: *0px*).
* **Padding bottom** – Adjust space below the section (default: *0px*).
* **Remove default space between sections** – Toggle ON to eliminate extra spacing.
***
## **Block Settings**
### **Lookbook Item**
Each block represents one lookbook image with multiple product pins.
**Lookbook Image**
* **Upload image** – Add a visual (recommended: *1920 × 700px*).
***
### **Product Hotspots**
Each image supports up to **5 product pins**, each with custom positioning.
**For each product:**
* **Offset top / left** – Adjust pin placement on the image.
* **Select product** – Link the pin to a specific product in your store.
* **Position product** – Choose whether product info appears on *Top* or *Bottom*.
***
💡 **Tips:**
* Use high-quality lifestyle photos that showcase your products naturally.
* Limit 3–5 pins per image to keep it clean and engaging.
* Combine with the *Autoplay* and *Loop* options to create a dynamic shopping experience.
