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.

  • You can select Description or Image.

  • Click Save.

SettingsDescription

Heading size

Customization of "Heading size" as follows:

  • Small

  • Medium

  • Large

Heading alignment

Customization of "Content alignment" as follows:

  • Left

  • Center

Show collection description

Enabling this checkbox will allow you to display the added description in the collection.

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.

Layout

Customization of the "Layout" in the collection banner is as follows:

  • Column

  • Overlay

Banner background

Modifying the color of the banner background will result in a corresponding color change for the banner background.

Banner text

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

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.

SettingsDescription

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” products.

Product card

Image ratio

Product image customizations in a section are as follows:

  • Adapt to image

  • Portrait

  • Square

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 vendor By enabling this checkbox you can display the “Product vendor”. Show product rating Enable this checkbox to display "Product rating".

Add to cart button style on desktop

Add to cart button style on desktop customizations in a section are as follows:

  • Link

  • Outline button

  • Solid button

Display buttons inline

Enable this checkbox to display the "Buttons inline". Enable quick look button Enable this checkbox to display the "Quick look button".

Quick view position on desktop

Quick view position on desktop customizations in a section are as follows:

  • Top right

  • Bottom left

  • Bottom right

Quick view icon

Quick view icon customizations in a section are as follows:

  • First icon

  • Second icon

Spacing around quick view on desktop

"Spacing around quick view" is to specify how many space around quick view on desktop. You can set a minimum of “0px” and a maximum of “10px” spacing.

Variants

Show variants By enabling this checkbox you can display the “Product variants”.

Disable sold out variant By enabling this checkbox you can disable the “sold out 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."

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

Enable sorting By enabling this checkbox you can display the “sorting select box”.

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

Product-list description

By enabling this checkbox you can display the “Product-list description”.

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.

  1. To add a filter to the Collection page, go to Online Store > Navigation > Collection and search filters section and add filters.

  1. 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.

  1. 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

  1. Open theme editor.

  2. Select "Collection page" from the top page-selector menu and select default collection.

  1. After opening "Default collection", Check "Enable filtering" Option.

  1. Select "Save" and ensure that your changes have taken effect before leaving the theme editor.

Last updated