The Collection Page section plays a key role in shaping how product collections are displayed and browsed on your storefront. It serves as a dedicated area where customers can explore groups of related products, typically organized by category, tag, or custom filter.
In this guide, we’ll walk you through how to tailor the Collection Page Section to meet your specific needs and optimize the user experience.
You can access a Collection pages section by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: On the theme editor (Customize), navigate to the Default collection page > click the Sections button > Select Collection pages section.
After accessing the Collection pages section, you can configure some general options for the Collection pages section below:
Make section full width: This toggle switch allows you to control the collection page section width. Turning it on will make the section take up the full width, while turning it off will likely constrain it to the theme's default content width.
Color scheme: This dropdown menu lets you select a predefined color scheme for this specific collection page section.
Products per page: Use the slider or enter a number to define how many products should be displayed on each page within the collection.
Number of columns on desktop: This slider and numerical input field control how many product columns are displayed on desktop screens.
Number of columns on mobile: Choose whether products should appear in 1 or 2 columns on mobile devices for better readability and browsing experience.
Pagination: Select the pagination style for your collection page. Options include: Link, Load more button, or Infinite scrolling.
Image ratio: This dropdown menu lets you select how the product images are displayed within their individual product cards. Options include: Adapt to image, Portrait, Square, Landscape, or 4:3
Show vendor: This toggle switch controls whether the vendor (the brand or seller of the product) is displayed on the product cards within this collection page. Turning it on will show the vendor's name, while turning it off will hide it.
Enable filtering: Toggle this setting to activate product filters on the collection page. Filtering options are managed through the Search & Discovery app. When enabled, customers can refine results by attributes like price, vendor, color, etc.
Desktop filter layout: This dropdown menu determines how the filters are displayed on desktop screens. The note "Drawer is the default mobile layout". Options include: Drawer, Vertical, or Horizontal.
Filter price behavior: This dropdown menu controls how price filters behave. Option include:
+ Auto update when change price: When this option is selected, the product listing automatically refreshes and updates as soon as the user adjusts the price range filter.
+ When user click button filter price: With this setting, the price filter is only applied when the user manually clicks the "filter" button after adjusting the price range.
Enable sorting: Enables a dropdown menu that lets customers sort products (e.g., by price, best-selling, newest, etc.).
Enable number of columns selector: This toggle switch, when turned on, allows customers to change the number of product columns displayed on the page. The description clarifies, "Allow customers to change number of columns per row."
Show product count: When this toggle is on, the number of products matching the current filters or the total number of products in the collection will be displayed
Show active filter labels: If this is turned on, labels for the currently applied filters will be displayed, often near the filtered product list. The description clarifies, "Filter label will be shown inside selected filters."
Show filter values count: Displays the number of available products for each filter option (e.g., "Red (12)", "Large (8)").
Open filters by default: When enabled, the filter panel will be open by default when users land on the page. (Note: not applicable if using horizontal layout.)
Color swatches style: Choose how color filter options are visually displayed. Options include: Circle, Rectangle, or Circle with label.
Top padding: Sets the space between the top of the section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the section and the element below it (in pixels) on mobile devices.
Page width: Adjusts the maximum width of the page layout in pixels.
Modal/drawer/popover color scheme: Select the color scheme applied to modal windows, drawers, or popovers for a consistent look across overlays.
Remove collection URL: When turned on, will remove the collection name from the product URLs within this collection. The description explains, "Remove the collection portion from product URLs for better SEO." This can sometimes lead to shorter and potentially more SEO-friendly URLs.
Color display mode: This dropdown menu determines how color options are displayed on the collection page. Options include: Color list, Count, or Hide.
Show color type: This dropdown menu likely controls which color type is displayed. Options include:
+ All color: Displays all available color variants.
+ Only color available: Only the color options that are currently in stock would be displayed.
Show secondary image on hover: When this toggle is on, hovering the mouse cursor over a product image in the collection will reveal a secondary image for that product, if one is available.
Use pre order badge: Turning this toggle on will display a "Pre-order" badge on product cards for items that are available for pre-order.
Use new badge: Enabling this toggle will display a "New" badge on recently added products.
Automatic "New" badge period: This slider and numerical input field determine how many days a product will be marked with the "New" badge after it is created.
Use on sale badge: Turning this toggle on will display an "Sale" badge on product cards for items that have a sale price set.
On sale badge display style: This provides two button options: "Text" and "Percentage." This controls how the sale badge is displayed. "Text" might show something like "Sale," while "Percentage" would display the discount percentage (e.g., "- 20%").
Use sold out badge: When this toggle is on, a "Sold Out" badge will be displayed on product cards for items that are currently out of stock.
Text alignment: This provides two button options: "Left" and "Center." This controls the alignment of the text within the product cards on the collection page.
Use collection link on vendor:
+ When you enable this option (toggle it on): The vendor name (the product's brand or supplier) will become a clickable link. That link will lead to a collection page (a product group) that has the same name as the vendor. Condition: A collection with the same name as the vendor must already exist.
When you don't enable this option: the vendor name will just appear as plain text, without a link.
Maximum color to show: This slider and numerical input field allow you to set a limit on the number of color swatches or options displayed for a product on the collection page. 0 to responsive auto number. Requires color limit is enabled.
Action after color view more is clicked: This dropdown menu specifies what happens when a customer clicks on a "view more" option for colors (this would likely appear if the number of colors exceeds the "Maximum color to show" limit).
Expand all color: When this option is selected, clicking on a "view more" link or button will expand to display all the available color options directly on the collection page.
Go to product page: If you choose this option, clicking the "view more" link or button for colors will navigate the customer to the individual product page.
Enable color limit: This toggle switch needs to be turned on for the "Maximum color to show" setting to take effect. When enabled, it restricts the number of color options displayed.
Change product image on event: This provides two button options: "Hover" and "Click." This determines when the product image on the collection page changes to the next available image for that product.
Color shape: This offers two button options: "Square" and "Circle." This determines the shape in which color swatches are displayed on the collection page.
Color image source: This dropdown menu lets you choose the source for the color swatches displayed.
