> 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-packery.md).
# Collection packery
The collection list offers a brief display of highlighted collections to engage visitors
To customize the Collection packery in our theme please follow the steps:
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Locate **Collection packery**
3. **Save**
{% endhint %}
## Section Settings
### **Section Header**
* **Show “Section header”:** Enable this option to display a heading and description at the top of the section.
* **Heading:** Add a title for the section (e.g., *Featured Collections*).
* **Description:** Enter a short description or tagline to introduce the collection group. You can use text formatting such as **bold**, *italic*, or links.
* **Text alignment:** Choose how the header content aligns — *Left*, *Center*, or *Right*.
* **Show button:** Enable to display a call-to-action button below the section header.
* **Text button:** Enter the text label for the button (e.g., *View all collections*).
* **Link button:** Add a URL or choose a page to link the button (e.g., *All collections page*).
***
### **General**
* **Layout:** Select the section layout style (e.g., *Default* or *Custom grid*).
* **Color scheme:** Choose a color scheme that matches your store’s design.
* **Gap item:** Define the space (in pixels) between collection blocks.
> If left blank, the default theme spacing will be applied.
***
### **Collection Settings**
* **Hover effect:** Choose a hover animation effect for collection images (e.g., *Zoom*, *Fade*, *None*).
* **Images style:** Set the image shape for collection thumbnails (e.g., *Square*, *Rounded*, *Circle*).
* **Image ratio:** Select the aspect ratio of the collection images (e.g., *1:1*, *4:3*, *16:9*).
* **Custom ratio:** Define a custom aspect ratio (e.g., *21:9*).
> The custom ratio will only apply if “Custom” is selected in the Image ratio setting.
***
### **Section Padding**
* **Padding top:** Adjust the top spacing (in pixels) for this section.
* **Padding bottom:** Adjust the bottom spacing (in pixels) for this section.
* **Remove default space between sections:** Enable to remove the default vertical space between this section and the next.
## Blocks settings
Each **Collection item** block represents a single collection displayed within the **Collection Packery** section. You can customize its title, font size, and image for a visually appealing layout.
### **Collection Item Settings**
* **Collection heading:** Add a custom title for this collection block. If left blank, the default collection name will be used.
* **Font size:** Adjust the font size of the collection heading (in pixels).
* **Select collection:** Choose which Shopify collection to display in this block (e.g., *Men*, *Women*, *Accessories*).
* **Select image:** Upload or select a custom image to represent the chosen collection.
> If no image is uploaded, the default collection image from Shopify will be used instead.
***
#### **Tips for Better Display**
* Use **high-quality images** that match the aspect ratio set in the *Collection settings* for a consistent grid layout.
* Keep headings **short and clear** for better readability.
* Maintain a consistent **font size** across all blocks for a clean and balanced design.
