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.
Default collection image
Use "Default collection image" to add the image to the section.
Banner layout default
Background and Text color Modifying the color setting you can change the background and foreground colors of a Banner. Background overlay
You can set background overlay visibility. you can set minimum opacity of "1%" and maximum opacity of "100%"
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.
To display various images in the all collection, you can add images through the metafield. Please follow these guidelines : Collection banner metafield
Product Grid
Log in to unlock pricing
By enabling this checkbox, you can see pricing when you log in to store, otherwise it will show default.
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.
Product card
Number of columns on desktop
"Number of columns on desktop" is to specify how many columns to show in this page. You can show a minimum of “2” and a maximum of “4” columns on desktop.
Image ratio
Product image customizations in a section are as follows:
Adapt to image
Portrait
Square
Image shape Product image shape customizations in a section are as follows:
Default
Arch
Blob
Chevron left
Chevron right
Diamond
Parallelogram
Round
Show second image on hover By enabling this checkbox you can “Show the second image on hover”.
Enable price below the title
By enabling this checkbox you can “Show price below the title”.
Show quantity By enabling this checkbox you can display the “Product quantity field”.
Show vendor By enabling this checkbox you can display the “Product vendor”. Show product rating Enable this checkbox to display "Product rating".
Quick look position
Quick look position customizations in a section are as follows:
Top Right
Bottom Left
Bottom Right
Add to cart position
Add to cart position customizations in a section are as follows:
None
Bottom
On image
Show add to card on hover on image in desktop Enabling this checkbox to display the "Add to cart button" on image when hover on product in desktop device.
Variants
Show variants By enabling this checkbox you can display the “Product variants”. Type
If the type is "Dropdown," then the variant would be dropdown. And if the type is "Pills," then the variant would be Pills. The variant types are as follows:
Type:
Dropdown
Pills
Enable color swatches Enabling this checkbox will show the "Variant color."
Enable color variant
This is used for display only color and change product image on variant hover. It only applicable when 'show variants' is disabled
Filtering and sorting
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:
Horizontal
Vertical
Drawer
Desktop vertical filter Product vertical filter position shown below:
Filter first
Filter second
Enable sorting By enabling this checkbox you can display the “sorting select box”.
Pagination
Pagination type
Pagination type customizations in a page are as follows:
Paged navigation
Load more button
Product-list description
By enabling this checkbox you can show the “Product-list description”.
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 Promotion
Position in results
You can select position of media promotion banner that you want to set. minimum position is "1" and maximum position is "24".
Image
Use "Image" to add the media promotion banner to the block.
Image position
Select image position which is given below:
Left
Right
Heading
Text Enter text to display as a title in the section. Size Following is the font size customization of the heading of the section:
Small
Medium
Large
Subheading
Enter text to display as a subheading in the media promotion.
Description
Text Enter text to display as a description in the section. Style Customization of the "Style" in the Lookbook section is as follows:
Body
Subtitle
Uppercase
Button
Label Use "Label" to add a label to the Button in the section. Link Use "Link" to add a link to the Button in the section. Enable button view Customization of the button "View" is as follows:
Only text
Text with icon
Style
Customization of the "Style" in the collection tab section is as follows:
Link
Outline
Button
Desktop content position
Customization of the "Desktop content position" in the collection page section is as follows:
Top
Middle
Bottom
Desktop content alignment
Customization of the "Desktop content alignment" in the collection page section is as follows:
Left
Center
Right
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
Scheme 6
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.
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 section and add filters.
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