Add background color on the multicolumn section in Dawn

Store Design
1

hey does anyone know how to get a colored background on the multicolumn section in Dawn? The only options are a default grey and white background. Thanks

2

Hi Mfazio,

Open your stores dashboard → Online Store → Actions → Edit Code → Open ‘base.css’ →

At the bottom of the file copy and paste this code:

.multicolumn {
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 1px 0 5rem !important;
}

You should be able to change the colour via the hex code (to whatever you want) although the section itself will still use the black secondary colour, so you are still fairly limited.

Let me know if this works for you!

NOTE: If you edit any files on your store, I advise that you duplicate the theme before doing so and editing the duplicated theme instead. This will prevent your live site from breaking if something goes wrong.

3

@mfazio

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi DMT-Mike, how about the multicolumn section in the product pages? do you know how to change that?

5

Thank you. This works but i just realized that i only need it on the homepage. When you set it up like this, its for all the pages. Do you have the code to just keep it on the homepage?

6

@mfazio

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

7

can you provide me with your store URL? so that i can give it a try

8

noblepets.co

9

@mfazio

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
.multicolumn.background-none.no-heading {
    background: #fff !important;
}
10

That didnt work. Its still showing the same color background on the product page and homepage. Just need a different color on the homepage

11

@mfazio

can you please share section screenshot!

12

Screen Shot 2022-01-23 at 12.10.52 AM.png
Screen Shot 2022-01-23 at 12.10.52 AM.png1203×263 17.3 KB

Above is the background color i want only on the home page for multicolumn

Screen Shot 2022-01-23 at 12.11.24 AM.png
Screen Shot 2022-01-23 at 12.11.24 AM.png1243×406 26 KB

Above has the same color background on my product page for multicolumn

I only want the color background on my homepage and not my product page

I prefer a white background on the product page multicolumn section

Thanks

13

@mfazio

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
#shopify-section-template--15201055211686__16429218635b3aa7eb .multicolumn {
    background: #fff !important;
}
14

Hi @mfazio ,

You try below code:

#shopify-section-template--15201055244454__16389421757b3fe2cd .multicolumn.background-none {
    background: #fff !important;
}

I hope it would help you.

15

Thank you for this solution.

For absolute beginners, where do I paste this code?

Would you mind sharing the trail where to do this?

Thank you!

BR,

Daniel

16

Hi! Did you find out how to get this done? I’ve tried all the code above, but no luck, unfortunately.

17

@FlorenceGee

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

18

Hi Ketan, thanks! It’s not a huge issue. I’d just like to alter the background color for multicolumn boxes sitewide. I’m looking for a css snippet and need to know where to paste it. I’m new to Shopify!

Website is https://mia-mia-baby-kids.myshopify.com/
Password fleich

19

@FlorenceGee

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-multicolumn.css->paste below code at the bottom of the file.
.multicolumn.background-primary .multicolumn-card {
    background: transparent;
}
20

That was super easy! Thanks so much :slightly_smiling_face: