Search results

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections
3. Company XYZ documentation on cards settings
4. Company XYZ documentation on section padding settings
5. Company XYZ documentation on section backgrounds settings
6. Company XYZ documentation on separators settings
7. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to control how results are presented and how easily customers can refine them. It is best for improving scan speed, reducing clutter, and making the search page feel consistent with the rest of your store.

Core settings

This section does not have separate standalone settings before its main setting groups. Most of the setup happens in the layout, filter, and shared presentation controls below. For a broader overview of section controls, see Shopify documentation on sections and blocks

Grid interface settings

These settings shape the default results layout on desktop and mobile, and they also control whether customers can change that layout themselves. This is useful when you want a balanced default view but still want to give shoppers some control over how dense the grid feels.

Enable the grid size interface if your catalog includes a wide range of product types or image styles. Leave it off if you want a more fixed, guided experience with a single layout choice.

The sticky interface keeps controls visible while customers scroll through longer result pages. That can make filtering and layout changes easier, but it is worth checking the mobile experience so the controls do not feel too crowded.

Tip

Use a denser desktop grid for broad catalogs, but give mobile cards more room when titles, prices, or imagery need to stay easy to scan.

Filter settings

These settings add filtering and sorting tools to the results page. They work best when customers are likely to search broad terms and need ways to narrow or reorder what they find. For setup details, see Shopify documentation on customizing sections

Filters require additional setup before they will be useful here. Once that setup is ready, you can choose whether filter groups should open by default and whether to include an availability filter for in-stock items.

Sorting is usually worth keeping on for larger catalogs, especially when customers may want to change the order of results. If sorting seems inconsistent in the editor preview, check it on the live storefront view before judging the final experience.

Turn on filters only after the related filter setup is complete. Otherwise, customers may see controls that do not offer meaningful refinement.

Standard section settings

Card settings

Use the shared Card settings to override your usual card presentation just for search results. This is helpful when the search page needs a different balance of image size, text density, or button treatment than other product grids.

You can make result cards more compact for faster scanning or more descriptive for decision-heavy products. Banner-style cards also support additional vertical text placement, so test that style carefully if you want text to sit over imagery.

Padding settings

Use Padding settings to control the spacing above and below the results area. Smaller spacing often works well here because search pages are usually more utility-focused than promotional.

Separate desktop and mobile padding helps keep the page comfortable without wasting space. If the page feels slow to get into the results, reduce the outer spacing first.

Section background settings

Use Section background settings to add color, gradient, image, or video behind the section. This can help the results page feel more branded, especially when the surrounding page layout is visually minimal.

Keep backgrounds restrained on result-heavy pages. Strong imagery, heavy overlays, or video can compete with cards and controls, making results harder to scan.

Caution

Prioritize contrast and readability over decorative effects so cards, filters, and sorting controls remain easy to use.

Separator settings

Use Separator settings to place a line at the top or bottom of the section. This is a simple way to separate the results area from nearby content or from a strong page background.

A subtle separator is usually enough. If you do not set a custom color, the section can fall back to the broader border styling for a more consistent look.

Width settings

Use Width settings to control how wide the section and its content can appear. This has a big effect on card density, readability, and how spacious the results page feels.

Content width is the main setting for readability, while section width matters most when you are also using a background treatment. Check width changes on the live storefront, since the editor can make layout width look more constrained than it really is.

Usage notes

1. Match density to the catalog. Use tighter grids for large assortments, but allow more space when product titles, excerpts, or imagery carry important detail.
2. Enable filters with intent. Turn on filtering only when the available filter options will genuinely help customers narrow broad searches.
3. Review mobile carefully. Sticky controls, open filters, and dense card layouts can feel crowded together on smaller screens.
4. Use card overrides strategically. Change card style, text, and button treatment here only when search results need a different browsing experience than other grids.
5. Favor fast scanning. Keep backgrounds, spacing, and decorative treatments secondary to the clarity of results and controls.
6. Check both result states. Search pages can look and behave differently before customers type a query and after results are returned, so review the empty state and typed-query state separately.
7. Compare editor and storefront views. Preview behavior can help you configure the section early, but confirm the final experience where live content and actual results appear.
8. Test both viewports. Desktop and mobile can differ in layout, alignment, visibility, and media handling, so verify that controls and cards remain clear on both screen sizes.