How to Add Custom CSS & HTML to the Searchgro Widget in a Shopify Store

For advanced customization of the Search Widget, the SearchGro app allows you to inject your own custom CSS and HTML.

Steps to Add Custom Code to the Search Widget:

1. Log in to your Shopify admin and open the SearchGro app from the Apps menu.
2. In the SearchGro dashboard, click the Search tab in the left-hand sidebar.
3. From the sub-menu, select Search Widget.
4. Click the Custom HTML & CSS tab.

Customizable HTML Areas:

In this section, you can add custom HTML based on your requirement:

• Display Widget on Focus: This HTML content is shown in the Search Widget when the search box is focused.
• Display Extra Content: This HTML content is shown in the Search Widget below search & product suggestions.
• Enable "No Products Found" HTML: This HTML content is shown in the Search Widget if nothing is found for a user's search query.

Custom CSS:

Use the provided text area under "CUSTOM CSS" or "Use Personalized CSS" to add your personalized CSS rules to style the Search Widget according to your store's design.

Remember to save your changes after adding custom code.

Need help?

Click “Help Me” and our chatbot will appear. You can then ask questions or request assistance in real time.

For email support, feel free to reach out to us at support@simprosys.com