How to Customize Search Widget Colors in the SearchGro Shopify App

You can customize the appearance of your Search Widget within the SearchGro app by adjusting the color settings to match your Shopify store's branding. This is done within the Search Widget settings, specifically under the Colors tab.

To access the Search Widget settings in the SearchGro App Dashboard, follow these steps:

1. Log into your Shopify admin and open the SearchGro app from your Apps menu.
2. In the SearchGro dashboard, click the Search Tab on the left-hand sidebar.
3. From the sub-menu, select Search Widget.
4. Click the Colors tab at the top of the Search Widget settings area.

Note: Changing these color settings will override your store’s default theme colors, specifically within the Search Widget for the elements you modify.

Customizable Color Elements:

In the Colors tab, you will see various sections and color pickers (represented by input fields in the image) that allow you to change the color of different elements.

General:

• Background: Customizes the background color of the entire search widget dropdown area.

• Section Title: Customizes the text color of the titles for different sections (like 'Products', 'Collections', etc.) within the dropdown.

• Section Title Background: Customizes the background color specifically for the section titles within the dropdown.

Search Suggestions:

• Suggestion Text: Customizes the text color of the search suggestions displayed as the user types.

Products:

• Title: Customizes the text color of the product titles listed in the search results dropdown.

• Description: Customizes the text color of the product descriptions shown in the search results dropdown.

• Price: Customizes the text color used for displaying the standard price of products in the search results.

• Discount Price: Customizes the text color for displaying the discounted or sale price of products in the search results.

• Additional Field: Customizes the text color of the additional product field value.

• Separator: Customizes the color of the separator line that appears between individual product items in the results list.

Collections:

• Collection Text: Customizes the text color for the names of collections displayed in the search results.

Extra:

• Recent Searches Text: Customizes the text color of the recent search terms displayed to the user.

• View All Link Background: Customizes the background color of the 'View All' button or link that directs users to a full search results page.

• View All Link Text: Customizes the text color of the 'View All' button or link.

• Loader Color: Customizes the color of the loading spinner or indicator that appears while search results are being fetched.

By adjusting these color options, you can ensure your search widget seamlessly integrates with your store's design and provides a visually consistent experience for your customers.

After updating any hex code, click Save to instantly apply the changes to your storefront.

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