Collection

Setting

Description

Color scheme

Apply color scheme for the collection grid with products from the available color schemes list.

Read 'Color scheme' article to learn more about color schemes.

Filtering and sorting

Setting	Description
Enable filtering	Enable this option to activate filtering. Once enabled, a filter will appear in drawer or dropdown view when you click the filter icon or name. You can add or modify filter options through the Shopify Admin under the Search & Discovery App in the Filters section. Customize filters with the Search & Discovery app. Learn more
Filter type	Select the filter display style when clicked: Drawer – Opens in a sliding side panel. Dropdown – Opens in a dropdown menu.
Filter color scheme	Apply color scheme for the filter from the available color schemes list.
Filter background color	The background colors are determined by your selected color scheme from the available list. Primary – Uses the main background color of your theme. Secondary – Uses the secondary background color defined in the chosen color scheme.
Filter option open by default	Filter Option Open by Default Select which filters are expanded when the page loads: All Closed – Keeps all filter sections collapsed. First Opened – Automatically opens the first filter section. All Opened – Expands all filter sections by default.
Enable text labels for swatches	Toggle on to display text labels on color swatches in the filter. This helps customers easily identify colors, especially for similar shades or patterns.
Clear all button style	Choose the Clear All button’s appearance: Primary: The main button style. It uses the primary color from your color scheme. You can choose to fill it with the background color or display it as an outline if the background is set to transparent. Secondary: A secondary action style, using the secondary color from your color scheme. Like the primary button, it can be filled or outlined depending on the background settings. Inline: Minimal style that looks like text with an underline.
Clear all button icon	This setting lets you add a small visual indicator to Clear All button. None: The button displays only the text, with no icon. Dot: A small dot appears before the button label.
Apply button style	Choose the Apply button’s appearance: Primary: The main button style. It uses the primary color from your color scheme. You can choose to fill it with the background color or display it as an outline if the background is set to transparent. Secondary: A secondary action style, using the secondary color from your color scheme. Like the primary button, it can be filled or outlined depending on the background settings. Inline: Minimal style that looks like text with an underline.
Apply button icon	This setting lets you add a small visual indicator to Apply button. None: The button displays only the text, with no icon. Dot: A small dot appears before the button label.
Enable sorting	Enable sorting with a ‘Sort By’ dropdown, available in either drawer or standard dropdown format. Clico on Sort to see drawer or dropdown with options. Sorting can be combined with filtering if enabled, or used independently. Options include: Best Selling, Featured, Alphabetical, Price, and Date.
Sorting option open by default	Set the sorting options to be open by default.

Layout

Setting	Description
Product count	Choose how many products to display (1–30).
Desktop columns	You can display 1 to 5 products per row.
Mobile columns	You can display 1 or 2 products per row.
Desktop horizontal spacing	Set the space between products in the same row.
Mobile horizontal spacing	Set the space between products in a row for mobile devices.
Desktop vertical spacing	Set the space between rows of products on desktop.
Mobile vertical spacing	Set the space between rows of products on mobile.

Product card

Product card settings are global settings that apply to the entire theme. They can be found in the Global settings category.

For more details, read this article: Product card settings

Padding

Padding is the space inside a section that separates the content from the section’s edges.

See this article to set paddings: Section padding