A user is attempting to change the background color of multi-column sections in Shopify’s Dawn theme from the default greyish tone to a specific hex color (#F3F3F3). The original CSS only accepts color names like “black,” “grey,” or “orange” rather than hex values.
Proposed Solutions:
Multiple respondents suggested adding custom CSS code to either:
</body> tag)All solutions involve targeting .multicolumn-card .content-container with background-color: #3F3F3F; or similar hex values.
Current Issue:
The user reports that darker colors work correctly, but lighter colors like #F3F3F3 display incorrectly (appearing as an unintended shade). An attached screenshot shows the color difference between sections.
Status:
The discussion remains unresolved, with the user seeking alternative approaches after the standard CSS customization methods failed for lighter hex colors.
Hi,
I’m trying to change the background color of the multi columns in the Dawn theme. They’re originally set on a greyish colour. I’ve found the code to change it but it won’t let me pick a hex color, only “black” "grey “orange” written out like that.
.multicolumn-card.content-container {
background-color: orange;
}
Any idea how to change it to F3F3F3 instead?
password: dave
Thanks!
Hey @INFRA
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @INFRA
can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.css file
Paste the below code
#shopify-section-template--17025572733088__multicolumn_rE9gCV .multicolumn-card.content-container {
background-color: #fda606;
}
Hello @INFRA
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.
#shopify-section-template--17025572733088__multicolumn_rE9gCV .multicolumn-card.content-container {
background-color: #F3F3F3;
}
result
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hi @INFRA
.multicolumn-card.content-container {
background-color: #F3F3F3!important;
}
Hi! thanks for your help, unfortunately it didn’t work with #f3f3f3. It seems to only work with darker colors?
When I use your code and change it to #F3F3F3 it shows up as below. Note that the color in the section above is F3F3F3 so you can see the difference.
Hi, I tried this too but unfortunately it doesn’t work. Anything else we can try?
