How to customize your store's search bar and results page
Open Search in the dashboard and use the three tabs under Appearance: Customize the search Input for the bar's text and colours, Customize search results for columns and the no-results message, and Customize search content for the results design and filter layout. Save changes, and your storefront search takes on your store's look.
- 1:07 video
- Search › Appearance
Why the look of your search matters
The search bar sits in your header on every page, so shoppers see it more than almost anything else in your store. When its colours, wording and results clash with the rest of the site, it feels like a third-party widget. When it matches, shoppers simply trust it and use it.
The three Appearance tabs
Everything about the look of search lives in one place: the Appearance group on the Search page. Each tab covers one part of what the shopper sees.
- Customize the search Input: the Search placeholder text in each language your store supports, the search bar's corner roundness, the search icon colour, the voice search icon and background colours, and the search results title colour.
- Customize search results: one, two or three columns, chosen separately for Web and Mobile, the number of products in each column, and the text shown when a search finds nothing.
- Customize search content: the Search bar design (Default or Product card), the Dropdown layout (filters stacked above the results, or in a panel beside them), and whether discounts show on products.
Examples that work
Use the placeholder to tell shoppers what they can search for. A perfume store might write "Search perfumes, oud and gift sets", an electronics store "Search phones, chargers and headphones". The Arabic text should be written for Arabic shoppers, for example "ابحث عن عطر أو دهن عود", not a word-for-word translation.
For columns, think about your product photos and names. Fashion and abaya stores often look best with two columns on mobile so shoppers can compare images, while a store with long product names, such as electronics or spare parts, may read better in one column.
Make the no-results message useful. Instead of a bare "No results", suggest a next step, like checking the spelling or browsing a popular category.
Common mistakes to avoid
Filling in only one language. Shoppers browsing your store in English will see an empty or mismatched placeholder. Fill every language your store sells in.
Choosing the Product card design without styling the card. That design uses the same card you set up under Customize product card, so set up both together.
Checking only on a computer. Most shoppers search on their phones, and you set mobile columns separately, so always test both.
How to set it up
- 1In the dashboard, open Search. Under Appearance, select Customize the search Input.
- 2Write the Search placeholder for each language, then pick the search icon, voice search and search results title colours to match your brand.
- 3Open Customize search results. Choose the number of columns for Web and for Mobile, then write the no-results text in each language.
- 4Open Customize search content. Pick a Search bar design (Default or Product card) and a Dropdown layout (Stacked or Panel).
- 5Click Save changes, then open your storefront on a phone and a computer and run a search.
Common questions
Can I write different search text for each language?
Yes. The placeholder and the no-results message each have a field for every language your store supports, so each shopper sees text written in their language.
Why is the Save changes button greyed out?
The no-results text is empty. Write it in at least one language under Customize search results, and the button becomes active.
What is the difference between the Default and Product card designs?
Default shows a compact list where you choose whether the image and price appear and in which colours. Product card shows each result as a full card, using the design you set under Customize product card.
Should filters sit above the results or beside them?
Stacked puts the filters in a row above the results. Panel puts them in a column beside the results, which leaves the results their own space when you offer many filters. Try both and keep the one that reads better on your store.
