Collection page
Overview:
The Main Products Grid section is used to display collections of products, allowing users to browse, filter, and sort items within a collection. It includes settings for layout, appearance, filters, pagination, product cards, and the optional top banner area.
Section Configuration:
Banner (Top Area) Settings
Setting |
Description |
| Image |
Uploads a background image for the banner area above the product grid. |
| Parallax Effect |
Adds a scrolling parallax animation to the background image. |
| Overlay Background |
Applies a gradient or color overlay on top of the background image. |
| Caption |
Optional text displayed above the main heading. |
| Caption Size / Weight |
Controls font size and weight of the caption text. |
| Heading Size / Weight |
Controls font size and weight of the collection title. |
| Description Text Size / Weight |
Controls font size and weight of the collection description text. |
| Show Featured Image |
Displays the collection’s featured image beside the title. |
| Show Description |
Shows the collection description either at the top or bottom of the grid. Options: None, Top, Bottom. |
| Content Alignment |
Aligns the content vertically within the banner (Top, Middle, or Bottom). |
| Text Alignment (Desktop / Mobile) |
Sets the text alignment for the banner on desktop and mobile separately. |
| Container Layout |
Sets the layout width of the banner area. Options: Page Width, Contained Content, Full Width. |
| Corner Radius |
Rounds the corners of the banner section. Options: None, Top Only, Bottom Only, Both. |
| Maximum Content Width |
Restricts the banner content width to a percentage of the site’s overall page width. |
| Height |
Sets the height of the banner. Options: Small, Medium, Full Viewport. |
| Color Scheme |
Applies a predefined color scheme to the banner area. |
Breadcrumb Settings
Setting |
Description |
| Show Breadcrumb |
Displays a breadcrumb navigation bar at the top of the collection page. |
| Show Top Border |
Adds a top border to the breadcrumb section. |
| Show Bottom Border |
Adds a bottom border to the breadcrumb section. |
| Corner Radius |
Rounds the corners of the breadcrumb section. |
| Container Layout |
Sets the layout width of the breadcrumb. |
| Color Scheme |
Applies a color scheme to the breadcrumb background and text. |
Grid Settings
Setting |
Description |
| Number of Columns (Desktop) |
Defines how many product columns appear on desktop screens. |
| Number of Rows (Desktop) |
Determines how many rows of products are shown per page. |
| Number of Columns (Mobile) |
Sets the number of product columns shown on smaller screens. Options: 1 or 2. |
Product Card Settings
Setting |
Description |
| Media Size |
Adjusts product image aspect ratio. Options: Adapt, Square, Portrait, Landscape. |
| Heading Size / Weight |
Controls font size and weight of product titles. |
| Show Price |
Displays product prices. |
| Show Vendor |
Displays the product vendor name. |
| Show Stock Tag |
Displays a badge showing stock status. |
| Show Sale Tag |
Shows a sale tag on discounted products. |
| Show Custom Tag |
Displays custom tags (e.g., “New” or “Best Seller”) if configured. |
| Enable Quick View |
Allows users to preview product details in a modal window. |
| Enable Add to Cart |
Enables the “Add to Cart” button directly from the grid. |
Filtering and Sorting
Setting |
Description |
| Enable Filters |
Enables filtering by product options (e.g., size, color, price). Uses Shopify’s native filtering system. |
| Enable Sorting |
Enables a dropdown to sort products by options such as Best Selling, Price, or Newest. |
Setting |
Description |
| Paging Type |
Controls how users browse additional products. Options include: • Pagination (numbered pages) • Click to Load (button loads more items) • Infinite Scroll (loads automatically on scroll) |
Grid Layout & Appearance
| Setting |
Description |
| Container Layout |
Sets the width layout of the product grid area. Options: Page Width, Contained Content, Full Width. |
| Corner Radius |
Sets the corner styling of the section. |
| Color Scheme |
Applies a predefined theme color scheme to the grid. |
| Top / Bottom Padding |
Adds spacing above or below the product grid area. |