The Search page displays content that matches a user's search query, helping users quickly find relevant information. It typically includes a list of results along with filters, sorting options, and pagination.
Customizing the Search page can improve user experience, boost engagement, and better reflect your brand’s needs. In this guide, we’ll walk you through how to tailor the Search Page by customizing the Search results section.
You can access a Search results section by following these simple steps:
Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), navigate to the Search page > click the Sections button > Select Search results section.
After accessing the Search results section, you can configure some general options for the Search results section below:
Make section full width: Toggle this ON to make the search results stretch across the entire page width. Turn OFF to keep it within a fixed container.
Color scheme: This dropdown menu allows you to select a predefined set of colors that will be applied to various elements within the section, such as text, backgrounds, and accents.
Enable search suggestions: Turn ON, if user types in a search bar, the system will provide suggested search terms based on the entered text. Turn OFF to disable suggestions.
Products per page: Set the number of products displayed on a single search results page.
Number of columns on desktop: Choose how many product or other elements columns to display on desktop screens.
Number of columns on mobile: This allows you to choose between displaying content in 1 column or 2 columns when viewed on mobile devices.
Pagination: Choose how users navigate through multiple pages of search results. Options include: Links, Load more button, or Infinite scrolling
Image ratio: This dropdown menu lets you select how the product images are displayed within their individual product cards. Options include: Adapt to image, Portrait, Square, Landscape, or 4:3
Show vendor: This toggle switch controls whether the vendor (the brand or seller of the product) is displayed on the product cards within this collection page. Turning it on will show the vendor's name, while turning it off will hide it.
Image ratio: This dropdown menu allows you to select the aspect ratio for the featured images displayed in the article cards. Options include: Adapt tp image, Portrait, Square, Landscape, 3:2, or 4:3 .
Show category: This option provides options for displaying the category tag associated with each article. You have the following choices:
+ Disable: Do not show any category label on the article card.
+ The first article's tag: Display the first tag assigned to the article as the category label.
+ From tags contains 'category_': Show a tag that starts with 'category_' as the category label (useful if you organize tags with this naming rule).
Show date: Toggle ON to display the article’s publication date; OFF to hide it.
Date format: Choose how the publication date appears.
Show author: Turn ON to show the name of the article’s author.
Show comments count: Enable this to display the number of comments for each article.
Show excerpt: Toggle ON to show a short preview or summary of the article’s content.
Show read more: Enable this to add a "Read More" link/button encouraging users to open the full article.
Enable filtering: Toggle this setting to activate product filters on the collection page. Filtering options are managed through the Search & Discovery app. When enabled, customers can refine results by attributes like price, vendor, color, etc.
Desktop filter layout: This dropdown menu determines how the filters are displayed on desktop screens. The note "Drawer is the default mobile layout". Options include: Drawer, Vertical, or Horizontal.
Filter price behavior: This dropdown menu controls how price filters behave. Option include:
+ Auto update when change price: When this option is selected, the product listing automatically refreshes and updates as soon as the user adjusts the price range filter.
+ When user click button filter price: With this setting, the price filter is only applied when the user manually clicks the "filter" button after adjusting the price range.
Enable sorting: Enables a dropdown menu that lets customers sort products (e.g., by price, best-selling, newest, etc.).
Enable number of columns selector: This toggle switch, when turned on, allows customers to change the number of product columns displayed on the page. The description clarifies, "Allow customers to change number of columns per row."
Show product count: When this toggle is on, the number of products matching the current filters or the total number of products in the collection will be displayed
Show active filter labels: If this is turned on, labels for the currently applied filters will be displayed, often near the filtered product list. The description clarifies, "Filter label will be shown inside selected filters."
Show filter values count: Displays the number of available products for each filter option (e.g., "Red (12)", "Large (8)").
Open filters by default: When enabled, the filter panel will be open by default when users land on the page. (Note: not applicable if using horizontal layout.)
Color swatches style: Choose how color filter options are visually displayed. Options include: Circle, Rectangle, or Circle with label.
Top padding: Sets the space between the top of the section and the element above it (in pixels).
Bottom padding: Sets the space between the bottom of the section and the element below it (in pixels).
Mobile top padding: Sets the space between the top of the section and the element above it (in pixels) on mobile devices.
Mobile bottom padding: Sets the space between the bottom of the section and the element below it (in pixels) on mobile devices.
Modal/drawer/popover color scheme: Select the color scheme applied to modal windows, drawers, or popovers for a consistent look across overlays.
Page width: Adjusts the maximum width of the page layout in pixels.
Show secondary image on hover: When this toggle is on, hovering the mouse cursor over a product image in the collection will reveal a secondary image for that product, if one is available.
Use pre order badge: Turning this toggle on will display a "Pre-order" badge on product cards for items that are available for pre-order.
Use new badge: Enabling this toggle will display a "New" badge on recently added products.
Automatic "New" badge period: This slider and numerical input field determine how many days a product will be marked with the "New" badge after it is created.
Use on sale badge: Turning this toggle on will display an "Sale" badge on product cards for items that have a sale price set.
On sale badge display style: This provides two button options: "Text" and "Percentage." This controls how the sale badge is displayed. "Text" might show something like "Sale," while "Percentage" would display the discount percentage (e.g., "- 20%").
Use sold out badge: When this toggle is on, a "Sold Out" badge will be displayed on product cards for items that are currently out of stock.
Text alignment: This provides two button options: "Left" and "Center." This controls the alignment of the text within the product cards on the collection page.
Use collection link on vendor:
+ When you enable this option (toggle it on): The vendor name (the product's brand or supplier) will become a clickable link. That link will lead to a collection page (a product group) that has the same name as the vendor. Condition: A collection with the same name as the vendor must already exist.
+ When you don't enable this option: the vendor name will just appear as plain text, without a link.
Placeholder for product no image: If a product doesn't have an image, you can select or upload a default image to display instead. Or you can click "Explore free images" to choose from a library of free images.
Color display mode: Defines how the product color options are shown. Options include:
+ Hide: Completely hides the color options.
+ Count: Does not display individual color swatches, but instead shows the number of available colors. e.g: "Available in 5 colors"
+ Color list: Displays available colors in a list format.
Show color type:
+ All color: Displays all available colors for the product.
+ Only color available: Only show color swatches that are in stock
Maximum color to show: This slider and numerical input field allow you to set a limit on the number of color swatches or options displayed for a product on the collection page. 0 to responsive auto number. Requires color limit is enabled.
Action after color view more is clicked: This dropdown menu specifies what happens when a customer clicks on a "view more" option for colors (this would likely appear if the number of colors exceeds the "Maximum color to show" limit).
+ Expand all color: When this option is selected, clicking on a "view more" link or button will expand to display all the available color options directly on the collection page.
+ Go to product page: If you choose this option, clicking the "view more" link or button for colors will navigate the customer to the individual product page.
Enable color limit: This toggle switch needs to be turned on for the "Maximum color to show" setting to take effect. When enabled, it restricts the number of color options displayed.
Change product image on event: This provides two button options: "Hover" and "Click." This determines when the product image on the collection page changes to the next available image for that product.
Color shape: This offers two button options: "Square" and "Circle." This determines the shape in which color swatches are displayed on the collection page.
Color image source: This dropdown menu lets you choose the source for the color swatches displayed.
Horizontal space: Adjusts the horizontal spacing (in pixels) between results.
