Can I Set A Hex Code Background On Shopify Widgets/ Banners?
A hex code background is currently possible in two ways for the full width banner:
The first is uploading an image with that hex code.
The second is through the use of custom CSS.
For the other widgets it's only possible with custom CSS.
This requires some technical skills. Also, please note that we try our best to keep CSS classes the same when making updates, but it can happen that our updates will conflict with your custom CSS, meaning that you will need to run through the process below again.
To add custom CSS within your Shopify store head to your theme editor within the Shopify admin. Then find the widget you want to edit and click on the section.
Within the section you will see Custom CSS where you will need to paste the custom CSS snippet.
Next you will need to right click in your browser and click on Inspect to open the browser developer tools.
Please note, that here we are using Chrome, so this might differ depending on your browser.
With your browser tools open, click on the Select an Element icon and then click on the widget that you want to edit.
You will see HTML and CSS code appear. You will now need to find the element that you want to edit so that you can copy the class name into your code snippet. In this example we are trying to edit the background colour which we generally name as gs-stats-inner. We are going to turn it from green to red by copy pasting the code below into the CSS field provided.
Save your store and you are good to go!
You can edit the hex code above to your custom colour and also target any other CSS class in this way to change it.
The first is uploading an image with that hex code.
The second is through the use of custom CSS.
For the other widgets it's only possible with custom CSS.
How to add custom CSS
This requires some technical skills. Also, please note that we try our best to keep CSS classes the same when making updates, but it can happen that our updates will conflict with your custom CSS, meaning that you will need to run through the process below again.
To add custom CSS within your Shopify store head to your theme editor within the Shopify admin. Then find the widget you want to edit and click on the section.
Within the section you will see Custom CSS where you will need to paste the custom CSS snippet.
Next you will need to right click in your browser and click on Inspect to open the browser developer tools.
Please note, that here we are using Chrome, so this might differ depending on your browser.
With your browser tools open, click on the Select an Element icon and then click on the widget that you want to edit.
You will see HTML and CSS code appear. You will now need to find the element that you want to edit so that you can copy the class name into your code snippet. In this example we are trying to edit the background colour which we generally name as gs-stats-inner. We are going to turn it from green to red by copy pasting the code below into the CSS field provided.
.gs-stats-inner {
background-color: #FF0000 !important
}Save your store and you are good to go!
You can edit the hex code above to your custom colour and also target any other CSS class in this way to change it.
Updated on: 01/04/2025
Thank you!