This guide explains how to configure the desktop header search style and optional voice search in Be Yours.
STEPS:
1. Understanding the Desktop Search Style
The Search style on desktop setting controls how search appears in the desktop header.
| Option | Behavior |
|---|---|
| Icon | Shows the search icon in the header. Customers click the icon to open the Search Modal. |
| Search bar | Shows an always-visible search field directly in the desktop header. |
The Search bar option keeps search one keystroke away, so customers can start searching without opening the Search Modal first.
Important:
- This setting applies to desktop only.
- Mobile and tablet continue to use the search icon and Search Modal.
- If the header logo position is Center, menu split, the desktop header keeps the search icon because there is not enough space for the full search bar.
2. Change the Desktop Search Style
To change the desktop search style:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the Header section.
- Find the Search style on desktop setting.
- Choose either Icon or Search bar.
- Click Save.
3. How the Search Bar Works
When Search bar is selected, the desktop header displays a search field directly in the header.
Customers can:
- Click into the search field.
- Start typing a search term.
- View predictive search results if predictive search is enabled.
- Submit the search to open the search results page.
The Search Bar uses the same search behavior as the theme search system.
If predictive search is enabled in Theme settings, results can appear while the customer types.
4. Enable Voice Search
Voice search is optional and is disabled by default.
To enable it:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Click the Theme settings icon.
- Open Search behavior.
- Enable Voice search.
- Click Save.
5. How Voice Search Works
When Voice search is enabled, a microphone button can appear in supported search fields.
Customers can:
- Click the microphone button.
- Speak their search term.
- Let the browser convert speech into text.
- Submit or continue editing the search term.
Voice search can appear in search areas such as:
| Search area | Behavior |
|---|---|
| Desktop header Search Bar | Shows microphone button when supported. |
| Search Modal | Shows microphone button when supported. |
| Search page | Shows microphone button when supported. |
Important:
Voice recognition is processed by the visitor's browser. It is not controlled by the theme.
6. Browser Support
Voice search depends on browser support.
Supported browsers may include:
| Browser |
|---|
| Chrome |
| Edge |
| Safari |
If the browser does not support voice recognition, the microphone button may not appear or may not work.
Voice search also depends on:
- Browser permission for microphone access.
- Device microphone availability.
- Browser language and speech recognition support.
- HTTPS storefront access.
7. Notes and Limitations
Please note the following behavior:
- The desktop Search Bar is controlled from the Header section.
- Voice search is controlled from Theme settings > Search behavior.
- Voice search is disabled by default.
- Mobile and tablet continue to use the search icon and Search Modal.
- The desktop Search Bar is not available with the Center, menu split logo position.
- Voice search only works on supported browsers.
- The customer must allow microphone permission in the browser.
- The theme cannot control browser-level speech recognition quality.
- If predictive search is disabled, customers can still submit a normal search.
- Search results are still powered by Shopify search.
Troubleshooting
If the Search Bar or Voice search does not work as expected, please check the following:
- Make sure you are using Be Yours version 9.2.0 or later.
- If the desktop Search Bar does not appear, check Header > Search style on desktop.
- If the header is using Center, menu split, switch to another header layout if you want to show the full desktop Search Bar.
- If the search icon still appears on mobile or tablet, this is expected behavior.
- If Voice search does not appear, check Theme settings > Search behavior > Enable voice search.
- If Voice search still does not appear, test with a supported browser such as Chrome, Edge, or Safari.
- If the microphone does not work, make sure the browser has microphone permission.
- If predictive results do not appear, check the predictive search settings in Theme settings > Search behavior.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to set up Similar Products for Product Cards in Be Yours
How to Added a Manual Product List to Featured Collection sections