Products

The section shows all products within the selected collection and allows to sort and filter them.

GENERAL

Color scheme

Choose a separate color scheme for the section.

Width

Choose the width of the section on the page.

SORTER

Enable sorting

Select to turn on the sorting option for customers to choose the order of product appearance. By default, products are sorted alphabetically by product name. Learn more about the sorting options in Shopify.

Show product count

Select to show the number of products within the collection.

Show column count switcher

Select to turn on the column switcher to choose how many product cards appear per row.

FILTER

Turn on and adjust the view of the filter, its categories, and options. Learn more about storefront filtering in Shopify.

Enable filtering

Select to turn on the filter and show the list of its categories and options. Note that Shopify doesn't allow to show more than 100 options per 1 category in the filter.

Layout

Choose the filter layout against the grid of cards. Note that on mobile devices, small screens, and browser windows that fit less than 768 pixels, the filter always appears to the left as a drawer.

Filter style

Choose the overall view of the filter.

Drawer

the filter is initially hidden and slides out when you select 'Filter'

Open embed

the filter is initially open and appears as a sidebar within the section; to hide it, select 'Filter'

Closed embed

the filter is initially hidden and appears as a sidebar within the section when you select 'Filter'

Categories style

Choose the style of filter categories.

Static

the categories and the list of options within them are permanently open

Expanded tabs

the categories appear as tabs with the list of options within them initially open so that customers can hide the options of the categories they don't need

Collapsed tabs

the categories appear as tabs with the list of options within them initially closed so that customers can open only the options of the categories they need

Option style

For the filter categories, other than stock availability and price, choose the style of options.

Checkbox solid

shows the list of options and a static checkbox filled with color before every option name

Checkbox outline

shows the list of options and a static checkbox before every option name with only its borders colored

Button solid

shows options as rows of buttons filled with color

Button outline

shows options as rows of buttons with only their borders colored

Text

shows the list of options; when you select the option, a checkbox appears to the right of the option name

Show swatches

Select to show the option picker as the grid of colored shapes. This applies only to the categories that have swatches assigned to them in the swatches settings. Otherwise, the options appear as the list of names. Note that the shape and size of these swatches, as well as custom colors and patterns, can be adjusted in theme settings > swatches.

Show separators

Select to visually separate filter categories from one another with lines.

Use uppercase headings

Select to show the category names in capital letters.

CARDS

Image ratio

Choose the view and orientation of product media within cards.

Content alignment

Choose product information alignment under the image.

Cards to show

Adjust how many product cards of the selected collection appear in the section at once.

Desktop cards per row

Choose the initial number of columns for the grid of product cards.

Desktop space between cards

Adjust the spacing at the top, bottom, and sides between the cards within the section.

Mobile cards per row

Choose the initial number of columns for the grid of product cards.

Mobile space between cards

Adjust the spacing at the top, bottom, and sides between the cards within the section.

Pagination

If you have more products than the section can fit, or if you have chosen to limit the number of visible cards on purpose, the collection will be split. Choose how to navigate the content on multiple pages.

Click to load

shows a 'Load more' button at the bottom

Infinite scroll

automatically shows more content as you scroll down the page

Classic pagination

shows the number of pages with navigation arrows on the sides