> 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/collection-list.md).
# Collection List
To customize the Collection List in our theme please follow the steps:
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection List**
3. **Save**
{% endhint %}
## Section Settings
### **Section Header**
* **Show header** – Toggle to display the section header.
* **Heading** – Add a main title (e.g., *Shop by Category*).
* **Description** – Optional supporting text.
* **Text alignment** – Align content (*Left*, *Center*, or *Right*).
* **Show button** – Toggle ON to display a call-to-action button.
* **Text button** – Button label (e.g., *View all collections*).
* **Link button** – URL or internal link for the button.
***
### **General**
* **Layout** – Choose section layout (*Default*).
* **Color scheme** – Apply a color theme for the background and text.
***
### **Collection Settings**
* **Collection type** – Choose between *Grid* or *Slider*.
* **Design** – Select design style (*1, 2, 3,* etc.).
* **Font size** – Adjust collection title font size (default: *18px*).
* **Hover effect** – Select image hover interaction (*Zoom*, *None*, etc.).
* **Images style** – Choose between *Default* or *Rounded*.
* **Image ratio** – Define image ratio (*1:1*, *3:4*, *16:9*, etc.).
* **Custom ratio** – Set a custom aspect ratio manually (e.g., *21:9*).
* **Items per row (Desktop)** – Number of collections per row on desktop.
***
### **Slider Settings**
* **Column gap** – Set spacing between collection items (in *px*).
* **Autoplay** – Automatically scroll collections.
* **Loop** – Enable continuous sliding.
* **Show arrows** – Display navigation arrows.
* **Show bullets** – Display pagination dots.
* **Items per row (Tablet)** – Number of collections shown per row on tablet.
* **Items per row (Mobile)** – Number of collections shown per row on mobile.
* **Height item** – Set the collection item height (default: *870px*).
***
### **Section Padding**
* **Padding top** – Adjust top spacing (default: *0px*).
* **Padding bottom** – Adjust bottom spacing (default: *0px*).
* **Remove default space between sections** – Creates seamless visual transitions.
***
## **Block — Collection Item**
Displays a single collection inside the list.
* **Collection heading** – Title for the individual collection.
* **Select collection** – Choose a collection to feature.
* **Select image** – Upload or select a representative image.
***
💡 **Tips:**
* For a clean and modern look, use consistent image ratios.
* Activate *Autoplay* for a dynamic, interactive layout.
* Ideal for homepage or category overview sections.
