Collection Page
Collection image
To set up a collection image section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section.
Select Collections > Default collection.
From the side panel, select the Collection banner block.
Layout
Customization of the "Layout" in this section is as follows:
Wide
Container
Default collection image
Use "Default collection image" to add the image to the section.
Show collection image
Enabling this checkbox will allow you to display the added image in the collection.
Show collection description
Enabling this checkbox will allow you to display the added description in the collection.
Image height
Customization of the "Image height" in this section is as follows:
Adapt to image
Small
Medium
Large
Layout
Customization of the "Layout" in the collection banner is as follows:
Row
Overlay
Background color
Modifying the color of the banner background will result in a corresponding color change for the banner background.
Foreground color
Modifying the color of the banner text will result in a corresponding color change for the banner text.
Background overlay
By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Background overlay" setting to increase or decrease the opacity level of the overlay on the collection banner image.
Product Grid
Color scheme
In this section, you can change the background and foreground color of a section using the color scheme.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Products per page
"Products per page" is to specify how many products to show in this page. You can show a minimum of “8” and a maximum of “24” products.
Number of columns on desktop
"Number of columns on desktop" is to customize the column on the desktop screen. You can show a minimum of “2” and a maximum of “4” product card.
Listing mode
Listing mode customizations in a page are as follows:
Grid
List
Gallery
Product list description
By enabling this checkbox you can display the “Product-list description”.
Product number
Show number over the image
Enable this checkbox to show number on image of this section.
Background color
You can customize the background color of the number by using the color option.
Foreground color
You can customize the foreground color of the number by using the color option.
Border color
You can customize the border color of the number by using the color option.
Corner radius
"Corner radius" is to customize the radius of number in the section. You can set radius minimum “0” and a maximum “40” px.
Filtering
Enable filtering By enabling this checkbox you can display the “Product filter”.
Desktop filter layout
Product filter layout customizations in a page are as follows:
List
Sidebar
Drawer
Enable filter value match count
By enabling this checkbox you can display filter value match product count.
Blur empty filters
By enabling this checkbox you can blue empty filters.
Collapsible filter
By enabling this checkbox you can display the collapsible filter when sidebar layout is set.
Open first filter by default
By enabling this checkbox you can display the first collapsible filter open when sidebar layout is set.
Sorting and results count
Enable sorting By enabling this checkbox you can display the “sorting select box”.
Enable results count By enabling this checkbox you can display product count after apply filtering and sorting.
Mobile layout
Number of columns on mobile
"Number of columns on mobile" is used for the customization of product columns in Mobile devices.
1 Column
2 Columns
Add Media
To add block to the product grid, click on the 'Add media'. There are many options available , as you can see in the below points and screenshot.
Media position in rows
Use this settings to set banner position in row number of this section. You can set row number in range of 1 to 10.
Image
Use "Image" to add the banner image to the section.
Subheading
Enter text to display as a subheading in banner.
Heading
Enter text to display as a main heading in banner.
Heading size
Following is the font size customization of the heading of the section:
Small
Medium
Large
Button
Label
Use "Label" to add a label to the Button on the banner.
Link
Use "Link" to add button link in banner button.
Style
Customization of the button style is as follows:
Link
Outline
Solid
Desktop content position
Customization of the banner content position in desktop is as follows:
Left
Center
Right
Desktop content alignment
Customization of the banner content alignment is as follows:
Left
Center
Right
Show content background
Enable this checkbox to show banner content background.
Content background opacity
Using this settings, you have the ability to change the content background opacity. Modify the "Content background opacity" setting to increase or decrease the opacity level of the overlay on the banner content.
Color scheme
In this block, you can change the background and foreground color of a block using the color scheme.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
In the below screenshot, the product grid section is shown on a store’s Collection page. Inside the section, the checkbox options are set to Enable filtering and Enable sorting.
With these options enable visitors can select a range of products within a collection by using filtering criteria like availability, size, and price.
You can use metafields to add different media for each collection. To add media through metafields, please follow the process of the 'Collection Banner' meta
Collection page filter
Here's an overview of how to set up filters in the sidebar of your Collection page when using the OS 2.0 version.
Here's an example showing a collection page sidebar.
Add filters to your collection page
Follow the below steps to select which product filters you want to display.
To add a filter to the Collection page, go to Online Store > Navigation > Collection and search filters > Open.
Check the box for any filters you want to display on the collection page. If you want to display product variant options (according to your store’s already existing product variants), then select Product options and you will be able to select which ones you want to display.
Check the relevant boxes, and select Done and Save to ensure the implementation of the changes is done before l leaving the area of the Shopify Admin. After selecting which filters you want to display in your collection page’s sidebar, you now need to return to the theme editor to set the collection page to display them on your store.
Display the filter in a sidebar
Open theme editor.
Select Collections > Default collection.
After opening "Default collection", Check "Enable filtering" Option.
Select "Save" and ensure that your changes have taken effect before leaving the theme editor.
Collection page customization
Last updated
