Online store

Add a product search box

Add a search box so shoppers can type a product name and jump straight to its page.

  • Add-on: ask us about adding it
Print this sheet (PDF, opens in a new tab)

A product search box helps shoppers who already know what they want. As they type, matching products appear in a list, and a tap takes them to that product's page.

Online stores are an add-on. If your site doesn't have one yet, ask us about adding it; we quote it in writing first.

  1. Log in to your site editor and open the page where it should go.
  2. In the side panel, click Add, then Elements.
  3. In the Store section, drag Product Search to the spot you want.
  4. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Change the hint text

The hint is the wording inside the box before anyone types. It disappears as soon as they start.

  1. Right-click the search box and choose Edit Content.
  2. Type your wording in the Placeholder text field, such as "Search our products".
  3. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Change the look

  1. Right-click the search box and choose Edit Design.
  2. In the Style section, you can change two areas:
    • Input field: the box where people type. Set its height, background color, border, rounded corners and shadow. The background color, border and shadow can be set separately for after someone starts typing.
    • Search results: the list that drops down. Set its maximum height, color, border, rounded corners and shadow, plus the background color and shadow when someone hovers over a result.
  3. In the Text section, change the font, size, color, format, alignment and direction for the box and the results. You can also set the color and format of a result when it's hovered.
  4. Publish. If you don't see a Publish button, tell us and we'll publish it for you.

Tips

  • Put the box where shoppers expect it, near the top of your store page.
  • Match the font and colors to your site so it looks like part of the page.
  • Type a product name yourself to test it after you publish.

Need a hand?

If your site doesn't have this yet, ask us about adding it. We quote it in writing first, and nothing is billed unless you approve. Email hello@zossoz.com.

Already have a store and want us to add a search box? Email your business name and the page, and we'll take care of it. We reply within one business day.

Last reviewed