The Customization page lets you control how the search widget looks on your storefront. You can change colors, position, results layout, and more to match your brand.
Colors
Search Bar Pro has four color settings, each accepting a custom hex value:
| Setting | What It Controls |
|---|---|
| Button color | The background color of the search trigger button |
| Button text color | The text and icon color on the trigger button |
| Accent color | Highlight and accent elements throughout the search panel |
| Text color | The main text color inside the search panel |
To change a color, click the color picker next to each setting and choose your desired hex value. You can also type a hex code directly.
Resetting Colors to Defaults
If you want to go back to the original color scheme, use the Reset to defaults option. This restores all four color values to their factory settings in one click.
Widget Position
You can place the search widget in any of six positions on the screen:
- Top left
- Top center
- Top right
- Bottom left
- Bottom center (default)
- Bottom right
Choose a position that works well with your theme layout and does not overlap with other elements like chat widgets or cookie banners.
Results Layout
Search results can be displayed in two layouts:
- List: Results appear in a single column, stacked vertically. This works well for stores with longer product titles or descriptions.
- Grid: Results appear in two columns on desktop screens. This is a good choice for visually rich catalogs where product images are important.
You can switch between layouts anytime from the Customization page.
Live Preview
As you adjust settings, the live preview on the right side of the page updates in real time. This lets you see exactly how the widget will look before saving.
Saving Changes
After making your changes, click Save in the save bar that appears at the top of the page. If you want to undo your changes, click Discard to revert to the last saved state.
For text label customization, see Customizing Text Labels and Messages. To choose between the search bar and icon button styles, see Choosing Between Search Bar and Icon Button.