Search Bar
Updated 1 month agoIt allows users to search for products directly. You can use this for stores with large catalogs or returning users who know what they want.
Input Settings
Text content -
Enter placeholder or default text and style it to match your layout.
-
Text - Set the placeholder or input text.
-
Font - Choose the font that fits your brand.
-
Size/Weight - Adjust font size and boldness.
-
Line Height - Control vertical spacing for multi line text.
-
Letter Spacing - Fine tune spacing between characters.
-
Text Color - Pick a color that keeps the text readable.
-
Capitalization - Choose uppercase, lowercase, or sentence case.
Border
Create an outline for the input field.
-
Color - Choose border color.
-
Width - Set border thickness.
Icon
Add a search icon to the field.
-
Choose or Upload - Select from the library or upload your own.
-
Relation - Place the icon left or right inside the field.
Advanced Settings
Refine the input look and spacing.
-
Bg Color - Set the input background color.
-
Radius - Adjust corner roundness.
-
Padding - Control inner spacing around the text and icon.
Background and Spacing
-
Color - Choose the section background color.
-
Radius - Set corner rounding for the wrapper.
-
Padding - Adjust inner spacing around the search block.
Margin
Set outer spacing in pixels.
Border
-
Color — choose border color.
-
Width — set border thickness.
-
Sides — choose which sides show the border.
Benefits:
-
Enables quick product discovery
-
Reduces browsing time, thus giving you faster conversions
-
Improves overall user experience
Related Articles
