Collection Page
Last updated
Last updated
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.
To add block to the product grid, click on the 'Add media promotion'. There are many options available , as you can see in the below points and screenshot.
In the above 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.
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.
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.
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.
Settings | Description |
---|---|
Settings | Description |
---|---|
Block | Description |
---|---|
Make section full width
By enabling this checkbox, you can make section in full width.
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.
Button label
Use "Button label" to add a label to the Button in the section.
Icon
Use "Icon" to add a icon from list.
Button link
Use "Button link" to add a link to the Button in the section.
Open this link in a new window
By using the "Open this link in a new window" option, the link will open in a new tab.
Style
Customization of the "Style" in the Image with text section is as follows:
As a link
No fill
Fill
Content alignment
Customization of "Content alignment" as follows:
Left
Center
Right
Layout
Customization of the "Layout" in the collection banner is as follows:
Column
Overlay
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
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
Image shape Product image shape customizations in a section are as follows:
Default
Arch
Blob
Chevron left
Chevron right
Diamond
Parallelogram
Round
Show product type
By enabling this checkbox you can “Show product type”.
Show second image on hover By enabling this checkbox you can “Show the second image on hover”.
Show quantity By enabling this checkbox you can display the “Product quantity field”. Enabled add to cart By enabling this checkbox you can display the “add to cart” button.
Show vendor By enabling this checkbox you can display the “Product vendor”. Show countdown Enabling this checkbox to display the "countdown timer". Enable product-list description By enabling this checkbox you can show the “Product-list description”.
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 "Color swatches." Enable color Variant Enabling this checkbox will show the "Variant color."
Show inventory
"Stock countdown" is for customizing the product stock. Show inventory By enabling this checkbox you can show the “Show inventory”.
Maximum stock Adjust maximum the stock for the stock countdown. Maximum product stock can be given up to "200".
Limit stock cut off Adjust the limited stock cut-off for the stock countdown.
Limit stock message Display limit stock message.
In stock message Display the "In stock" message.
Continue selling message Display the "Continue selling" message. Colors Customize the colors of Limited stock, In stock and Continue selling text.
Filtering and sorting
Enable filtering By enabling this checkbox you can display the “Product filter”. Enable mobile filter expand By enabling this checkbox you can display the “Enable mobile filter expand”.
Desktop filter layout
Product filter layout customizations in a page are as follows:
Horizontal
Vertical
Drawer
Enable sorting By enabling this checkbox you can display the “sorting select box”.
Pagination
Pagination color
In this section, you can change the background and foreground color of a pagination using the color scheme.
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Pagination type
Pagination type customizations in a page are as follows:
Paged navigation
Load more button
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
Position in results
Inserts the media promotion before the product card in this position. only applies to the first page of results.
Image
Use "Image" to add the image to the section.
Image overlay opacity
By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Image Overlay Opacity" setting to increase or decrease the opacity level of the overlay on the banner image.
Heading
Enter text to display as on the "heading" section.
Heading size
Following is the font size customization of the heading of the section:
Small
Medium
Large
Sub heading
Enter text to display as on the "sub heading" section.
Description
Enter text to display as a "description" in the section.
Button label
Use "Button label" to add a label to the Button in the section.
Button link
Use "Button link" to add a link to the Button in the section.
Open this link in a new window
By using the "Open this link in a new window" option, the link will open in a new tab.
Button style
Customization of the "Button style" is as follows:
As a link
No fill
Fill
Show container
When 'Show container' is enabled, the banner's content container box will be visible.
Enable glass effect
By enabling this checkbox, you can show glass effect on the section.
Container overlay opacity
By enabling this checkbox, you have the ability to change the container overlay opacity. Modify the "Container overlay opacity" setting to increase or decrease the opacity level of the overlay on the banner content.
Vertical content alignment
Customization of "Vertical content alignment" in desktop devices is as follows:
Top
Middle
Bottom
Horizontal content alignment
Customization of "Horizontal content alignment" in desktop devices is as follows:
Left
Center
Right
Desktop content alignment
Customization of "Desktop content alignment" in desktop devices is as follows:
Left
Center
Right
Marquee text
Text Enter text for marquee. Color Set text color and background color for marquee. Text rotate range Use "text rotate range" bar to set marquee rotate. minimum "-8" and maximum "8" range.
Countdown
Show section countdown By enabling this checkbox , you can show countdown. End date Set end date for countdown.
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