How to Customize Search Results Page Colors in SearchGro

Want to match the colors on your Search Results Page with your Shopify store's style? Here’s how you can do it:

Steps to Change Search Results Page Colors:

1. Log into your Shopify admin and launch the SearchGro app from your Apps menu.
2. Navigate to the Search Tab on the left side bar in the SearchGro App menu.
3. Click on the Search Results Page.
4. Find and click on the Colors tab.
5. Here you can use the color-picker or enter a hex code to customize elements like background, title, buttons, and hover states.
6. Click save settings to apply your changes.

Important Note:

If you customize the colors using the options in this section, the selected elements will no longer use your Shopify store’s default theme colors. As your selections override the theme styles for those specific parts of the Search Results Page.

List of Customizable Elements:

The Colors tab is organized into sections to help you manage different areas of the page. You can customize the following elements:

• Reset Colors: An option is available to revert all color customizations in this section back to their default values.

NAVIGATION BAR

Navigation bar text: Customizes the color of text used within the navigation bar.

• Navigation Bar border: Customizes the border color around the navigation bar.

• Grid Background: Customizes the background color of the product grid section.

• Active Grid Background: Customizes the background color for selected or active grid elements.

Product Card

• Title: Customizes the text color of the product titles displayed within the product cards.

• Description: Customizes the text color of the product descriptions.

• Price: Customizes the color for the standard price of products.

• Discount Price: Customizes the color for the discounted or sale price of products.

• Button Background: Customizes the background color of the on-hover buttons and the filter section buttons on the store.(e.g., Add to Cart button, Quick VIew ).

• Button text: Customize the text color on hover buttons and the filter section buttons on the store.

• Additional Field: Customizes the text color for any additional product field value, such as SKU.

Filters

• Titles: Customizes the text color of the filter section titles.

• Option Text: Customizes the text color of the filter options or values.

• Filter Background: Customizes the background color of the filter sections or panels.

• Reset Text: Customizes the text color of the 'Reset Filters' option or button.

• Border: Customizes the border color around the filter section container.

• Checkbox Border: Customizes the border color for checkboxes within the filter options.

Quick View/Popup

• Overlay Background: Customize the background color that appears behind the Quick View pop-up to match your store’s design.

• Background : Customize the background color of the Quick View pop-up itself.

Text Color : Customize the text color inside the Quick View pop-up, including elements such as product title, description, and price.

Extra

• Loader Color:-  Customize the color of the loader button that appears while an action is processing.                                                                                                                                                                                                

By tweaking these color settings, you can integrate your Search Results Page with your store's design. Don’t forget to hit the Save Settings button after you’ve made your changes!

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