Search results page
Overview:
The Main Search section powers your store’s search results page, allowing customers to browse matching products, pages, and blog posts. It supports grid customization, banner headers, and advanced filtering and sorting features.
Section Configuration:
Setting |
Description |
| Image |
Sets the banner background image at the top of the search page. |
| Parallax Effect |
Enables a scrolling parallax effect for the banner image. |
| Background Overlay |
Applies a color gradient or solid overlay over the banner image. |
| Caption |
Adds a small caption above the search results heading. |
| Caption Size |
Controls the font size of the caption text. |
| Caption Weight |
Sets the font weight (thickness) of the caption text. |
| Heading Size |
Selects the size of the main heading (e.g., h1 to h5). |
| Heading Weight |
Sets the font weight of the main heading. |
| Description |
Adds a paragraph below the heading to describe the results or store message. |
| Description Size |
Sets the font size of the description. |
| Description Weight |
Sets the font weight of the description text. |
Banner Layout Settings
Setting |
Description |
| Banner Container Layout |
Determines the banner’s width (page-width, contained-content, or container-fluid). |
| Banner Corner Radius |
Controls which corners of the banner have rounded edges. |
| Max Content Width |
Limits the maximum width of the content within the banner, expressed as a percentage. |
| Banner Height |
Sets the vertical height of the banner (small, medium, or window_height). |
| Content Alignment |
Aligns content vertically within the banner (top, middle, or bottom). |
| Text Alignment (Desktop) |
Aligns text horizontally on desktop devices. |
| Text Alignment (Mobile) |
Aligns text horizontally on mobile devices. |
| Banner Color Scheme |
Applies a color scheme to the banner. |
Breadcrumb Settings
Setting |
Description |
| Show Breadcrumb |
Displays breadcrumb navigation above the search banner. |
| Top Border |
Displays a border above the breadcrumb bar. |
| Bottom Border |
Displays a border below the breadcrumb bar. |
| Breadcrumb Corner Radius |
Controls corner rounding for the breadcrumb background. |
| Breadcrumb Layout |
Sets the layout width of the breadcrumb section. |
| Breadcrumb Color Scheme |
Applies a color scheme to the breadcrumb section. |
Grid Layout Settings
Setting |
Description |
| Columns on Desktop |
Defines the number of product columns shown on desktop screens. |
| Rows on Desktop |
Sets the number of product rows shown before pagination or load more triggers. |
| Columns on Mobile |
Sets the number of columns for mobile view (1 or 2). |
Product Card Settings
Setting |
Description |
| Product Media Size |
Chooses the image aspect ratio (adapt, square, portrait, or landscape). |
| Product Heading Size |
Sets the font size of product titles. |
| Product Heading Weight |
Sets the font weight of product titles. |
| Show Add to Cart Button |
Displays an "Add to Cart" button on each product card. |
| Enable Quick View |
Adds a quick view button to product cards. |
| Show Price |
Displays product pricing. |
| Show Vendor |
Displays the product vendor name. |
| Show Stock Tag |
Adds tags indicating stock availability. |
| Show Sale Tag |
Displays a sale tag if the product is discounted. |
| Show Custom Tag |
Shows any custom tags associated with the product. |
Blog Card Settings
Setting |
Description |
| Show Tags |
Displays article tags on blog post cards. |
| Show Date |
Displays the publish date on blog post cards. |
| Show Author |
Displays the author name on blog post cards. |
| Show Excerpt |
Displays a short summary of the blog post. |
| Show Comments Count |
Shows the number of comments per post (if available). |
Search Results Layout Settings
Setting |
Description |
| Enable Filters |
Activates the Shopify filters drawer for narrowing search results. |
| Enable Sort |
Enables sorting options (e.g., Best Selling, Price, etc.). |
| Pagination Type |
Defines how more products are loaded (pagination, click_load, or load_more). |
| Search Results Container Layout |
Sets the layout width for the search results grid. |
| Search Results Corner Radius |
Controls the corner rounding of the results grid background. |
| Search Results Color Scheme |
Applies a color scheme to the grid area. |
Spacing Settings
Setting |
Description |
| Top Padding |
Adds spacing above the search results grid. |
| Bottom Padding |
Adds spacing below the search results grid. |