Collection page
Overview:
Collection pages are an essential part of most online stores, and are the ideal way to organize and present collections of products in a gallery-style format. This page will list all the products in your collection list. Users can choose to sort or filter the product listings on this page using various options. By default, collection pages have a collection banner and Product grid section.It includes settings for headings, grid layout, sorting options, product card display options, and section appearance.
Section Configuration:
Content Customization
| Setting | Description |
| Heading | Add a main heading for the banner. This text is typically larger and more prominent. |
| Heading Size | A select field for heading size with options ranging from extra extra large to medium, defaulting to extra large. |
| Description | An inline rich text field for the section description with a default value of "Display product collections with images, customizable for seasonal highlights or promotions." |
| Text Size | A select field for text size with options for small, medium, and large, defaulting to large. |
Breadcrumb Settings
| Setting | Description |
| Show Breadcrumb | A checkbox to toggle the display of breadcrumbs, defaulting to true. |
| Show Top Border | A checkbox to toggle the display of the top border, defaulting to false. |
| Show Bottom Border | A checkbox to toggle the display of the bottom border, defaulting to true. |
| Color Scheme | A color scheme selector for the breadcrumb with a default value of "scheme2". |
Grid Settings
| Setting | Description |
| Number of Columns on Desktop | Range field for the number of columns on desktop. |
| Number of Rows on Desktop | Range field for the number of rows on desktop. |
| Number of Columns on Mobile | Select field for the number of columns on mobile with options for 1 or 2 columns. |
Product Card Settings
| Setting | Description |
| Media Size | Select field for the media size with options for adapt, square, portrait, and landscape. |
| Show Rating | Checkbox to toggle the display of product ratings. |
| Button Layout | Select field for button layout with options for none, enable add to cart and quick view, enable add to cart, enable quick view, and show view details. |
| Show Discount | Checkbox to toggle the display of product discounts.. |
| Show Vendor | Checkbox to toggle the display of product vendors. |
| Show Compare | Checkbox to toggle the display of compare buttons. |
| Show Stock | Checkbox to toggle the display of stock status in quick view. |
| Thumbnails Layout | Select field for thumbnails layout with options for none, media gallery, and variant gallery. |
| Show Available Only | Checkbox to toggle the display of available products only. |
| Number of Thumbnails | Range field for the maximum number of thumbnails. |
| Quick View Popup Media Size | Select field for the media size in quick view with options for adapt, square, portrait, and landscape. |
| Show Navigation | Checkbox to toggle the display of navigation arrows. |
| Show Variation | Checkbox to toggle the display of product variations. |
| Enable Share | Checkbox to enable sharing options in quick view |
| Show Gift Card Recipient | Checkbox to toggle the display of gift card recipient option. |
WhatsApp Settings
| Setting | Description |
| Show WhatsApp | Checkbox to toggle the display of WhatsApp share button. |
| WhatsApp Number | Text field for the WhatsApp number. |
| Custom Message | Textarea for the custom WhatsApp message. |
Layout Settings
| Setting | Description |
| Show Featured Image | Checkbox to toggle the display of the collection's featured image. |
| Enable Filtering | Checkbox to enable filtering options. |
| Enable Sorting | Checkbox to enable sorting options. |
| Filter Button Position | Select field for the position of the filter button with options for start, center, and end. |
| Color Scheme | Color scheme selector for the section. |
Spacing Settings
| Setting | Description |
| Top Padding | Adjust the space above the section content. |
| Bottom Padding | Adjust the space below the section content. |