How to change background color on custom HTML field in Broadcast theme

Technical Q&A
1

Hi all, I am looking for some help on how I can change the background color of custom HTML section. I am using the Broadcast theme.

1 Like
2

Hello @GregSproos ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

3

Can you see if you can go to Online Store > Themes > Customize > Theme Settings > COLORS > Background?

4

hello @GregSproos

Please provide the website URL and if your store is password protected then also provide a password and provide a solution here and please provide the highlight of screenshot change background color on custom field So I will check

5

Yes I can change the background color for the entire theme, but I want to change the background color only for the custom HTML section.

6

Hello @Kinjaldavra and @diego_ezfy

Does this link work? https://n9vaaefp9ymn3lwd-58362429605.shopifypreview.com

It is the section that says, “Pre-Order now and save…” This is a custom HTML section where I have added the text into but I also want to be able to change the background color of that section too.

Thanks!

7

@GregSproos , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.custom-html-section{
    background: #ccc !important;

}

.custom-html-section,
.custom-html-section *{
        color: #fff !important;
}

You can change the values as per your wish:

#ccc = background hex color
#fff = text hex color

Kind regards,
Diego

1 Like
8

@diego_ezfy Thanks for your help. This changes the background to all my custom HTML section and also reveals some padding issues. What I’ve found as a workaround is to use the rich text section instead, and paste the HTML for the text with link into the heading field. This allows me to control the background color, size of the section, and extends fully to the sides of the page.