Search results page
Overview:
The Main Search section allows customers to search your store’s products, blog articles, and pages. It supports robust filtering, sorting, pagination styles, and a rich visual layout — making it easy to guide users to the content they’re looking for.
This section is responsive and highly configurable, supporting search banners, breadcrumbs, dynamic grids, and a clean fallback state when no results are found.
Section Configuration:
Heading & Description
| Setting |
Description |
| Heading Size |
Selects the tag for the section heading (h1–h6), important for styling and SEO. |
| Heading Weight |
Controls the font weight of the heading (300–900). |
| Description |
Rich text content shown below the heading. |
| Description Size |
Controls the font size for the description. Options: Large, Small. |
| Description Weight |
Font weight for the description text (300–900). |
Card Layout (Products, Articles, Pages)
These settings apply to each result type displayed in the grid.
| Setting |
Description |
| Image Ratio |
Determines the aspect ratio of cards (adapt, square, portrait, landscape). |
| Card Heading Size |
Sets the heading size within product, article, and page cards. |
| Card Heading Weight |
Sets the heading font weight (300–900). |
| Card Text Alignment |
Aligns text within cards (left, center, right). |
Product Card Options
| Setting |
Description |
| Enable Add to Cart (ATC) |
Displays the “Add to Cart” button directly in product cards. |
| Show Price |
Displays product pricing. |
| Show Vendor |
Shows product vendor/brand name. |
| Show Swatches |
Enables variant color swatches on product cards. |
| Show Stock Tag |
Displays stock availability (e.g., "Low stock"). |
| Show Sale Tag |
Shows discount tags for products on sale. |
| Show Custom Tag |
Displays a custom tag if one is set for the product. |
| Show Custom Features |
Displays a list of predefined product features. |
| Show Custom Highlights |
Displays predefined highlights below the product info. |
Blog Card Options
| Setting |
Description |
| Show Tags |
Displays tags associated with blog articles. |
| Show Date |
Shows the published date. |
| Show Author |
Displays the author's name. |
| Show Excerpt |
Shows a short article summary (if available). |
| Show Comments Count |
Displays the number of comments. |
Grid Settings
| Setting |
Description |
| Desktop Columns |
Number of columns displayed on desktop (2–4). |
| Desktop Rows |
Number of rows displayed per page on desktop. |
| Mobile Columns |
Choose between 1 or 2 columns on mobile. |
Breadcrumb Navigation
| Setting |
Description |
| Show Breadcrumb |
Displays a breadcrumb trail above the search grid. |
Empty Search State
Displayed when no search has been performed or there are no results.
| Setting |
Description |
| Desktop Background Image |
Optional image to display on desktop when search is blank. |
| Mobile Background Image |
Optional image to display on mobile. |
| Blank Heading |
Custom heading shown when the search is empty. |
| Blank Subheading |
Custom subheading text. |
Filters & Sorting
| Setting |
Description |
| Enable Filters |
Enables product filtering via Shopify's search.filters object. |
| Enable Sort |
Enables sorting dropdown with Shopify's sort options. |
| Pagination Type |
Choose from: • Pagination • Load More Button • Infinite Scroll |
Layout & Spacing
| Setting |
Description |
| Gap |
Controls spacing between grid items. |
| Container Layout |
Choose between a fixed-width container or full-width (container-fluid). |
| Container Padding |
Enables or disables horizontal padding. |
| Text Alignment (Desktop) |
Aligns section content on desktop (left, center, right). |
| Text Alignment (Mobile) |
Aligns section content on mobile (left, center, right). |
Section Height
| Setting |
Description |
| Height (Desktop) |
Sets the height of the empty search section on desktop. |
| Height (Mobile) |
Sets the height of the empty search section on mobile. |
Color Scheme
| Setting |
Description |
| Filter Drawer Color Scheme |
Selects the scheme used inside the filter drawer. |
| Section Color Scheme |
Applies the color palette to the entire section background and text. |
Padding (Top & Bottom)
| Setting |
Description |
| Top Padding |
Sets vertical spacing above the section. |
| Bottom Padding |
Sets vertical spacing below the section. |