header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Customizing the search button settings
  • Changing the search button layout
  • Customizing the search button design
  1. Home
  2. Managing your business
  3. Business solutions & apps
  4. Wix apps for your site
  5. Wix Site Search
  6. Customizing Your Site Search Button

Customizing Your Site Search Button

In this article
  • Customizing the search button settings
  • Changing the search button layout
  • Customizing the search button design
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.
A screenshot showing the search button added to a site.
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.
  1. Click the search button in your editor.
  2. Click the Settings icon  .
A screenshot showing the settings icon.
  1. 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.
A screenshot showing the button settings.

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.
  1. Click the search button in your editor.
  2. Click the Layout icon .
A screenshot showing the layout icon.
  1. 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.
A screenshot showing the button layout settings.

Customizing the search button design

You can customize the design of your search button for both regular and hover states. 
  1. Click the search button in your editor.
  2. Click the Design icon .
A screenshot showing the design icon.
  1. 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.
  2. Click the tabs on the left to customize different parts of the button:
A screenshot showing button design settings.

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.