Search

A page that customers use to search for a certain entry within your store. Learn how online store search works in Shopify. Note, that you can select certain categories to search across within your store in the Shopify Search and Discovery app.

GENERAL

Color scheme

Choose a separate color scheme for the section.

Width

Choose the width of the section on the page.

SORTER

Enable sorting

For search results in 'Products' category, select to turn on the sorting option for customers to choose the order of search result appearance. By default, the cards on the page are sorted by relevance. You can also sort the products by price: from low to high or from high to low.

Show product count

Select to show the number of search results for each category.

Show column count switcher

Select to turn on the column switcher to choose how many search results appear per row.

FILTER

Turn on and adjust the view of the filter, its categories, and options. You can use filtering only for the search results in 'Products' category. 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

For search results in 'Products' category, choose product information alignment under the image.

Cards to show

For search results in 'Products' category, adjust how many product cards from the list of search results appear in the section at once.

Desktop cards per row

Choose the initial number of columns for the grid of search results.

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 search results.

Mobile space between cards

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

Pagination

If you have more search results than the section can fit, or if you have chosen to limit the number of visible results on purpose, the list will be split. Choose how to navigate the content on multiple pages. Note that you can set pagination only for the search results in 'Products' category.

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

PADDINGS

Add side paddings

Select to add extra space on the sides between the section and the screen.

Top padding

Adjust the space between the section and the previous element on the page.

Bottom padding

Adjust the space between the section and the following element on the page.

Last updated