Collection page
Overview:
The Product Grid section displays a collection of products in a grid format with filtering, sorting, and search capabilities. It also supports banners, featured images, and parallax effects to enhance visual appeal.
Section Configuration:
Banner & Layout
| Setting |
Description |
| Banner Image |
Upload an image for the section banner. |
| Enable Parallax Effect |
Adds a parallax scrolling effect to the banner. |
| Caption |
Displays a text caption above the product grid. |
| Caption Size |
Adjusts caption text size (Small, Medium, Large). Default: Medium. |
| Caption Weight |
Controls caption font weight (Bold, Semi-Bold, Medium, Normal, Light). Default: Bold. |
| Heading Size |
Adjusts heading size (H1–H5). Default: H2. |
| Heading Weight |
Sets the font weight of the heading. Default: Bold. |
| Description |
Displays a description below the heading. |
| Description Size |
Adjusts description text size (Small–X-Large). Default: Medium. |
| Description Weight |
Sets the font weight of the description. Default: Normal. |
Breadcrumbs
| Setting |
Description |
| Show Breadcrumbs |
Displays a breadcrumb navigation trail. |
| Breadcrumb Color Scheme |
Adjusts the color scheme of breadcrumbs. Default: Scheme2. |
Grid Layout
| Setting |
Description |
| Columns (Desktop) |
Number of columns in the product grid (2–4). Default: 4. |
| Rows (Desktop) |
Number of rows displayed before pagination (1–7). Default: 4. |
| Columns (Mobile) |
Adjusts the number of columns on mobile (1–2). Default: 2. |
| Grid Height |
Controls grid height (Small, Medium, Full Window). Default: Small. |
| Text Alignment (Desktop & Mobile) |
Sets text alignment in the grid. Default: Center. |
Product Card Settings
| Setting |
Description |
| Product Image Size |
Adjusts image aspect ratio (Adapt, Square, Portrait, Landscape). Default: Adapt. |
| Product Title Size |
Adjusts the font size of the product title. Default: Small. |
| Product Title Weight |
Sets the font weight of the product title. Default: Semi-Bold. |
| Show Add to Cart |
Displays an "Add to Cart" button on product cards. Default: Enabled. |
| Enable Quick View |
Allows customers to preview products in a modal. Default: Enabled. |
| Show Swatches |
Displays product color swatches. Default: Enabled. |
| Show Price |
Displays product prices. Default: Enabled. |
| Show Vendor Name |
Displays the product vendor. Default: Enabled. |
| Show Stock Badge |
Displays an indicator for low-stock items. Default: Enabled. |
| Show Sale Tag |
Displays a sale tag for discounted products. Default: Enabled. |
Filtering, Sorting & Search
| Setting |
Description |
| Enable Filters |
Allows filtering products by attributes (price, availability, etc.). |
| Enable Search |
Displays a search bar to find products within the collection. |
| Enable Sorting |
Enables sorting options (e.g., price, best-selling, newest). |
| Show Top Border |
Displays a top border in the filter bar. |
| Setting |
Description |
| Pagination Type |
Choose between traditional pagination, click-to-load, or infinite scroll. Default: Pagination. |
Spacing & Color Scheme
| Setting |
Description |
| Top Padding |
Adjusts top padding (0px–100px). Default: 50px. |
| Bottom Padding |
Adjusts bottom padding (0px–100px). Default: 50px. |
| Section Color Scheme |
Sets the color scheme for this section. Default: Scheme1. |