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