> 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-product.md).

# Collection product

Displays a selected product collection with flexible layout options and customizable header styles — ideal for highlighting featured or seasonal items.

To customize the Collection product in our theme please follow the steps:

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection product**
3. **Save**
   {% endhint %}

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FJAaDxM7gqL30r4TXVF40%2Fimage.png?alt=media&amp;token=fdf33810-499b-430d-b43e-3f79991de299" alt=""><figcaption></figcaption></figure>

## Section Settings

### **General**

* **Layout** – Choose the section layout (*Default*).
* **Color scheme** – Select a color theme for the section.
* **Position collection** – Align the collection block to the *Left* or *Right*.
* **Align items** – Choose how content aligns vertically (*Stretch*, *Center*, etc.).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FpyxZ41MIt8RU7Ewcn9Yi%2Fimage.png?alt=media&amp;token=d0c7e0d6-4433-4010-b258-72b3af47ebfc" alt=""><figcaption></figcaption></figure>

***

### **Header Settings**

* **Show header** – Enable or disable the section header.
* **Header layout** – Select between *Layout 1* and *Layout 2*.
* **Heading** – Title text for the section.
* **Title center** – Center-align the header title.
* **Slider arrows** – Show or hide navigation arrows.
* **Show button** – Display or hide a call-to-action button.
* **Text button** – Button label (e.g., *View all products*).
* **Link button** – Add a link to redirect users when clicking the button.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F4o1o7eGK4Fs9TNkD5tba%2Fimage.png?alt=media&amp;token=98722ae1-4ad1-4bef-b6d2-9a57ae358975" alt=""><figcaption></figcaption></figure>

***

### **Section Padding**

* **Padding top** – Adjust top spacing (default: *50px*).
* **Padding bottom** – Adjust bottom spacing (default: *50px*).
* **Remove default space between sections** – Removes built-in spacing for a seamless layout transition.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FLC37LGdrFXdYFxMiifwV%2Fimage.png?alt=media&amp;token=314001ea-1192-4f2f-95d9-7be40fcb2937" alt=""><figcaption></figcaption></figure>

💡 **Tips:**

* Combine with visually strong collections like *Trending Now* or *Editor’s Picks*.
* Keep padding consistent with other sections for visual balance.

## Block Settings

### **Block — Collection**

This block allows you to display an individual collection with customizable layout, text, and image styles. Perfect for highlighting specific product groups or promotions.

***

**Width Collection**

* **Width collection** – Adjust the width percentage of the block (e.g., *40%*).

**Design**

* **Design** – Choose layout style (*Design 1, Design 2, Design 3*, etc.) depending on the visual you want.
* **Show content** – Toggle ON to display the collection title and details.

**Content**

* **Collection heading** – Title text for the collection (e.g., *Summer Sale*).
* **Font size** – Set the title font size (default: *36px*).
* **Select collection** – Choose a Shopify collection to link this block to.
* **Select image** – Upload or choose an image that represents the collection.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FRg8hQYPOhw7YiU5NbkXt%2Fimage.png?alt=media&amp;token=5769deb5-66a1-4d87-a14a-38d5a5aac592" alt=""><figcaption></figcaption></figure>

***

**Image Settings**

* **Hover effect** – Select image interaction style (*Zoom*, *None*, etc.).
* **Images style** – Choose image shape (*Square*, *Rounded*, etc.).
* **Image ratio** – Select how the image is cropped (*Original aspect ratio*, *Custom*, etc.).
* **Custom ratio** – Set a specific aspect ratio manually (e.g., *21:9*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FcXFmujXLcr7amEzqy1IE%2Fimage.png?alt=media&amp;token=c7bea840-ecb5-414a-9650-858a18913685" alt=""><figcaption></figcaption></figure>

***

**Height Settings**

* **Custom height** – Choose between *Auto* or *Custom height*.\
  If *Custom height* is selected:
  * **Height image desktop** – Set image height for desktop (default: *960px*).
  * **Height image tablet** – Set height for tablet (default: *500px*).
  * **Height image mobile** – Set height for mobile (default: *350px*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F9hff7HSJLYYwkUJapumd%2Fimage.png?alt=media&amp;token=cf36589f-aa51-4262-b06e-213f4a4145b6" alt=""><figcaption></figcaption></figure>

***

💡 **Tips:**

* Use consistent image ratios to maintain a clean grid layout.
* Larger font sizes (32–40px) work best for bold collection titles.
* Combine collections with varied widths for a dynamic visual structure.

### **Block — Product List**

Displays a group of selected products in a grid format. Ideal for highlighting featured, trending, or best-selling items within a section.

***

**General**

* **Width product list** – Set the block width percentage (e.g., *60%*).
* **Items per row (Desktop)** – Number of products displayed per row on desktop.
* **Items per row (Tablet)** – Number of products displayed per row on tablet devices.
* **Items per row (Mobile)** – Choose between *1* or *2* products per row on mobile.
* **Column gap** – Adjust the horizontal spacing between products (in *px*).

***

**Settings Product Type**

* **Product list** – Select which products to display.
* **Layout** – Choose display style (*Layout 1* or *Layout 2*).

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F0BffGEu8DakFhDdpiDTx%2Fimage.png?alt=media&amp;token=699f28de-096b-4b61-8e25-ab9d1ed20f46" alt=""><figcaption></figcaption></figure>

***

💡 **Tips:**

* Use fewer items per row (2–3) to make product images larger and more engaging.
* Keep consistent column gaps across sections for a balanced grid appearance.
* Pair this block with a strong call-to-action or section header for better conversions.