Search should feel like part of your store, not a plugin. Match your colors and font, decide what each result card shows, and add badges that point shoppers to deals and new arrivals.
Open Merchandising → Search, open a configuration and go to Configure → Design & Styling. The live search widget sits next to the editor, so you see every change straight away.
Branding
Set four colors and bluebarry derives the other shades for you:
- Button and highlight color: buttons, active states and highlights. Usually your brand color.
- Background: the search panel background.
- Text: primary text and icons.
- Button text color: text on buttons and other elements in your highlight color. Pick one that is easy to read on it.
Add a Logo (PNG or SVG) to show it in the search bar. It is optional.
Shape and type
- Corner radius: Sharp, Rounded or Extra rounded, for product images and labels. Match the look of your theme's buttons and cards.
- Font: search the Google Fonts catalog or the common system fonts for the one your store uses, or leave it on System default.
- Currency: the currency prices are shown in.
- Language: the language of the widget's own text, such as the placeholder, buttons and filter headers. Choose Dutch, English, German, French, Spanish or Italian, or leave it on Shopper's browser (default) to show each shopper their browser language, with English as the fallback. Product names and descriptions stay as they are in your catalog.
- Image hover effect: what happens when a shopper hovers over a product image. None, Show second image, Cycle through images or Zoom in. This is desktop only. Phones show the first image.
The result card
Each product in search is shown as a card. These settings decide what is on it. Most of them point to a product property, so you choose which field in your catalog holds the price, the stock or the rating.
Price and stock
- Price property: the price shown on the card. None hides prices.
- Compare-at price property: the price before discount, shown struck through when it differs from the price.
- Stock property: the stock quantity. At 0 or less a product shows as sold out.
The price and stock properties also power the price and availability filters, see Configure search results and filters.
Price display and VAT
Selling to businesses, or in a market where prices without VAT are common? Under Show on cards, choose Incl. VAT only, Incl. and excl. VAT or Excl. VAT only. As soon as you show prices excluding VAT, pick an Excl. VAT property that holds that price, or enter one VAT rate for the whole catalog. Currency sign turns the € or other sign on or off for every price in search.
Images, reviews and variants
- Additional images: a property with extra image URLs per product. The image hover effects use these.
- Reviews: pick a Rating property and a Review count property to show star ratings on each card.
- Variants: turn on Show variants to show color or style swatches on each card.
Quick add to cart
Turn on Quick add buttonto put an "Add to cart" button on each card, so shoppers can buy without leaving search. Products with a choice to make, such as a size, open the product page instead. On Shopify, WooCommerce and CCV Shop, quick add puts the product in your store's own cart.
Badges
Badges are small labels in the top-left corner of a result card. Click Add badge and choose a Type:
- Sale: shows on discounted products. Set a Minimum discount % to only show it for real deals (0 shows it for any sale). Write the label with
{discount}to show the percentage, so-{discount}%becomes "-20%". - Tag: shows on products with the tags you pick, such as "New" or "Bestseller".
- Sold out: shows on products whose stock is 0 or less. Products without a stock value count as in stock.
Pick a Background color and Text color and check the Live preview. Want badges that depend on who is shopping, like "For dry skin"? That is a personalized badge, see Personalize search results.
Custom CSS
The settings above cover most stores. If you or your developer want to go further, there are two CSS fields: Search box CSS for the dropdown and Results page CSS for the results page. Your CSS loads after ours, so plain rules win without !important.
Search runs in its own isolated layer on your page, so your theme's CSS cannot break it by accident, and CSS in these fields is the way to style it. bluebarry keeps a set of stable class names, all starting with sb-, that developers can target safely across updates. Classes containing sb-i- are internal and can change without notice, so leave those alone.
Good to know
- Changes save automatically. Use the Preview step to check the result on desktop and mobile, or open it on your own store without shoppers seeing it, see Set up search.
- If a card shows no price or no stars, check that the property you picked is filled for your products under Data → Products.