Customizing Your Site Search Button
Wix Site Search enables visitors to search for anything on your site. This app comes with a fully customizable search button, allowing you to tailor its appearance and functionality to suit your needs.
Tip:
You can also customize the search results page where the results are displayed.
Customizing the search button settings
Customize your search button by editing the placeholder text (the initial text displayed before visitors begin typing) and fine-tuning the responsiveness to control whether results appear as the visitor types or only after they finish.
Wix Editor
Click the search button in your editor.
Click the Settings icon
.
Customize the following options:
Choose what displays: Click the drop-down and select what displays on your search button:
Text and icon: Show both text and an icon on your button.
Text: Enter the text that appears on your button.
Icon: Select or upload the icon you want to display.
Icon only: Show only an icon on your button, without text.
Icon: Select or upload the icon you want to display.
Accessible name: Add a label for screen readers to describe your button.
Text only: Show only text on your button.
Text: Enter the button text.
Nothing: Hide both text and icon from your button.
Accessible name: Add a label for screen readers to describe your button.
Studio Editor
Click the search button in your editor.
Click the Settings icon
.
Customize the following options:
Choose what displays: Click the drop-down and select what appears on your button:
Text and icon: Show both text and an icon on your button.
Text: Enter the text that appears on your button.
Icon: Select or upload the icon you want to display.
Nothing: Hide both text and icon from your button.
Accessible name: Add a label for screen readers to describe your button.
Icon type: Select whether the icon is static or animated.
Changing the search button layout
Adjust the alignment, margins and overall structure of your search button to better integrate it with your site's design.
Wix Editor
Click the search button in your editor.
Click the Layout icon
.
Customize the following options:
Choose what displays: Click the drop-down and select what appears on your button:
Text only: Show only text on your button.
Alignment: Select how to align the text on your button: Left, Center, or Right.
Text and icon: Show both text and an icon on your button.
Icon position: Choose where to place the icon in relation to the text: Left, Right, Below, or Above.
Spacing between text and icon: Adjust the distance between the text and icon using the slider or number box.
Alignment: Select how to align the text and icon: Left, Center, Right, or Justify.
Icon only: Show only an icon on your button.
Alignment: Select how to align the icon on your button: Left, Center, or Right.
Nothing: Hide both text and icon from your button.
Studio Editor
Click the search button in your editor.
Click the Layout icon
.
Customize the following options:
Choose what displays: Click the drop-down and select what appears on your button:
Text and icon: Show both text and an icon on your button.
Icon position: Select where the icon appears: Before, After, Above or Below your text.
Alignment: Choose how to align the text and icon: Left, Center, Right, or Justify.
Spacing between text and icon: Set the space between the text and icon.
Direction: Choose if the layout runs left to right or right to left.
Text only: Show only text on your button.
Alignment: Choose how to align the text: Left, Center, or Right.
Direction: Choose if the text runs left to right or right to left.
Icon only: Show only an icon on your button.
Alignment: Choose how to align the icon: Left, Center, or Right.
Customizing the search button design
You can customize the design of your search button for both regular and hover states.
Wix Editor
Click the search button in your editor.
Click the Design icon
.
Click the State drop-down and select a state to customize:
Regular: The default appearance of your button.
Hover: How the button looks when a visitor hovers over it.
Click the tabs on the left to customize different parts of the button:
Background fills
Choose a color, gradient, or image for the button’s background, and change the opacity of the image.
Text
Change the font, size, color, alignment, and add effects like bold or underline to your button’s text. Adjust the spacing and apply a shadow to your text.
Borders
Change the width, color, and style (solid, dashed, or dotted) of your search button’s borders.
Tip: To use the same border for all sides, keep the lock icon enabled. Click the lock icon to unlock it and customize each side of the border separately.
Corners
Set how rounded your search button’s corners are by entering a radius value.
Tip: To use the same radius for all corners, keep the lock icon enabled. Click the lock icon to unlock it to enter different values for each corner and customize the shape.
Shadows
Add a shadow to your search button and customize its look. You can choose a drop shadow or an inner shadow, then adjust the angle, color, opacity, distance, blur, and size to create the effect you want.
Padding
Adjust the space inside your search button by setting the amount of padding around the button text.
Tip: To use the same padding for all sides, keep the lock icon on. Click the lock icon to unlock it and customize each side of the border separately.
Icon
Display an icon for your search button and customize how it looks. You can customize the icon's color and size, and adjust its position and spacing in relation to the button’s text.
Studio Editor
Click the search button in your editor.
Click the Open Inspector icon
at the top right of the editor.
Click Design to open the design settings.
Click the State drop-down and select a state to customize:
Regular: The default appearance of your button.
Hover: How the button looks when a visitor hovers over it.
Click the tabs to customize the different parts of the button:
Background fills
Choose a color, gradient, or image for the button’s background, and change the opacity of the image.
Text
Change the font, size, color, alignment, and add effects like bold or underline to your button’s text. Adjust the spacing and apply a shadow to your text.
Borders
Change the width, color, and style (solid, dashed, or dotted) of your search button’s borders.
Tip: To use the same border for all sides, keep the lock icon enabled. Click the lock icon to unlock it and customize each side of the border separately.
Corners
Set how rounded your search button’s corners are by entering a radius value.
Tip: To use the same radius for all corners, keep the lock icon enabled. Click the lock icon to unlock it to enter different values for each corner and customize the shape.
Shadow
Add a shadow to your search button and customize its look. You can choose a drop shadow or an inner shadow, then adjust the angle, color, opacity, distance, blur, and size to create the effect you want.
Layout
Adjust the space inside your search button by setting the amount of padding around the button text.
Tip: To use the same padding for all sides, keep the lock icon on. Click the lock icon to unlock it and customize each side of the border separately.
Icon
Display an icon for your search button and customize how it looks. You can customize the icon's color and size, and adjust its position and spacing in relation to the button’s text.
