Search page
A complete guide customize the search page
Last updated
A complete guide customize the search page
Last updated
Predictive search is a feature on Shopify that suggests products, pages, blog posts, collections, and query results as you type into the search bar. It uses the words and phrases from your product catalog, as well as from past customer searches, to generate suggestions that are relevant to what you're looking for.
Predictive search is a feature on Shopify that suggests products, pages, blog posts, collections, and query results as you type into the search bar. It uses the words and phrases from your product catalog, as well as from past customer searches, to generate suggestions that are relevant to what you're looking for.
Take the following steps:
In the theme editor (Customize), click on the page selector
Go to the Others > Search
Page width
Boxed: With boxed width, page content can be displayed within the maximum width. The page width can be changed in Theme Settings > Layout.
Full width: With the "Full width" option, page content can be displayed in its entirety full-width. When you show content at full width, you can add padding to the left and right sides.
Products per page
You can change the "Products per page" limit from 8 to 100 maximum on the collection page
Number of columns on desktop
You can change the number of columns on desktop
Display one column on mobile
You can display one column on mobile. By default, 2 columns will be displayed
Enable layout switcher
You can enable/disable the product column switcher -
Enable filtering
Go to this page and follow the instructions -
Card style
Style 1: All action buttons will always be displayed if you select this
Style 2: All action buttons will appear on hover when you select it
Image ratio
Adapt to image: Uses the aspect ratio of the collection images is cropped.
Portrait: uses a 2:3 cropping ratio to the images.
Square: uses a 1:1 cropping ratio to the images.
Landscape: uses a 3:2 cropping ratio to the images.
Enable color swatches
Show second image on hover
Shows the second product image when a customer moves their mouse over the first image.
Show badges
For particular sections, you can show or hide product badges.
Show cart button
For particular sections, you can show or hide the cart button.
Show pre-order button
Show quick view
For particular sections, you can show or hide the quick view.
Show compare button
For particular sections, you can show or hide the compare button.
Show wishlist button
For particular sections, you can show or hide the wishlist button.
Show title
For particular sections, you can show or hide the title.
Show price
For particular sections, you can show or hide the wishlist price.
Show vendor
For particular sections, you can show or hide the wishlist vendor.
Show countdown
Show product rating
Desktop: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Desktop: Padding bottom
The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Mobile: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Mobile: Padding bottom
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
To display color swatches, you need to enable it. []
You may want to allow customers to purchase out-of-stock items. [
To display the countdown timer, you need to enable it. []
To display the product rating, you need to enable it. []
