Last updated: March 2026 Category: Designing Your App
Overview
The Search component adds a search bar to your app's home screen, giving customers a fast way to find products without navigating through categories. When a customer taps the search bar and types a query, they are taken to the search results screen with matching products from your Shopify store.
How to Use
Adding a Search Component
Drag the Search component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Search component in the Phone Preview showing a search bar with placeholder text]
Setting Placeholder Text
In the Content tab:
Placeholder text — Enter the hint text that appears inside the search bar before the customer starts typing. This guides customers on what they can search for.
Examples: "Search products…," "What are you looking for?," "Find your favorites"
[Screenshot: Content tab with the placeholder text field]
Customizing Appearance
In the Layout and Settings tabs, adjust the search bar's visual style:
Background color — Set the fill color of the search bar. A light gray or white works well against most backgrounds.
Text color — Choose the color of the text the customer types.
Placeholder color — Set the color of the placeholder hint text. Use a softer shade than the main text color.
Border color — Add a border around the search bar for definition.
Border width — Set the border thickness in pixels.
Border radius — Control how rounded the search bar corners are. Higher values create a pill-shaped bar.
Icon color — Set the color of the magnifying glass search icon.
Size and Spacing
Height — Adjust the height of the search bar.
Padding — Add inner spacing around the search text.
Margin — Add outer spacing to separate the search bar from neighboring components.
Font size — Set the text size inside the search bar.
[Screenshot: Search bar with customized border radius, background color, and icon color]
Tips
Place the Search component near the top of your home screen, ideally right below the header or a slideshow. Customers expect search to be easy to find.
Use inviting placeholder text that matches your brand voice. "What are you looking for today?" feels warmer than "Search."
A border radius of 20–30 pixels gives the search bar a modern, rounded appearance that works well on mobile.
Keep the search bar styling consistent with your overall app theme. If your app uses rounded elements, round the search bar too.
You only need one Search component per template. Adding multiple search bars creates confusion.
The search bar is purely a visual entry point — it opens the built-in BeyondCart search experience, which handles product matching, filters, and results automatically.
Related Articles