> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/test/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/test/pages/product-collection-page.md).

# Product Collection Page

1. **Collection banner**\
   Description: Toggle for the description function of the collection banner.\
   Heading size: Set the size of the collection banner's title. Options are Small/Medium/Large/Extra <kbd>Large</kbd>/Extra extra Large to define the display size of the title text.\
   Color scheme: Select a color scheme for the collection banner to unify its color style.                                         Section padding：You can adjust the padding of the banner. (You can adjust the height of the banner through this option)                                    &#x20;

\
*Suggestion: For a more striking visual effect, choosing "Full width" for the banner width and matching it with a high-quality background image can effectively attract visitors' attention. Meanwhile, selecting a heading size that aligns with your brand tone (e.g., Extra Large for a bold brand) can enhance brand recognition.*<br>

2. **Product grid**\
   Products per page: Set the "Number of products per page" to adjust the total number of products loaded on a single page as needed.\
   Columns: Set the "Number of product columns per row" to define how many product cards are displayed in one row.\
   Mobile columns: Set the "Number of columns on mobile" (1 or 2) to adapt to the display layout on mobile phones.\
   Color scheme: Select a color scheme to unify the color style of the product list.

\
*Suggestion: For desktop displays, 3-4 columns are usually ideal to balance readability and aesthetics. For mobile, 2 columns can show more product details without making the interface cluttered, while 1 column offers a clearer focus on individual products.*\
**Product card**\
Image ratio: Set the "image ratio rule". Options are:<br>

* Square: Force images to be cropped/displayed in a square ratio to unify the visual form of the cards.
* Adapt to image: Display images according to their original width-to-height ratio to retain the original composition.
* Portrait: Prioritize display in a vertical (height > width) ratio to highlight vertical content.

\
Show second image on hover: Toggle "Show second image on hover". When enabled, the image on the card switches when the mouse slides over it.\
Vendor: Toggle "Show vendor information" to control whether the product vendor is displayed on the card.\
Product rating: Toggle "Show product ratings". This requires app support; check "Learn more" for activation methods.\
Quick add: Set the "quick add interaction". Options are None (no quick add) or Standard (standard add-to-cart button).\
*Suggestion: Enabling "Show second image on hover" can showcase product details (e.g., different angles or colors) and increase user engagement. For "Image ratio", choosing "Square" helps maintain a neat grid, while "Adapt to image" is better for preserving the original appeal of unique product photos.*\
**Filtering and sorting**\
Filters: Toggle the "filter function". Disabling it hides the filter bar; you can customize filtering logic via the Search & Discovery app.\
Filter layout: Set the "filter layout". Options are Vertical (filter options arranged vertically) or Drawer (drawer-style expansion).\
Sorting: Toggle the "sorting function". Disabling it prevents users from sorting the product list.\
*Suggestion: Keeping the "Filtering and sorting" functions enabled improves user experience, especially for stores with a large number of products. "Drawer" layout is recommended for mobile to save screen space, while "Vertical" layout works well on desktop for clear visibility.*