Changing only the columns' background in multicolumn section

Store Design
,
1

Hello,
I use the Refresh theme on my website. I am using a multicolumn section entitled “New & Improved” at the bottom of this page and would like to change the background colour of the column only (not the entire section). Right now everything is blue when I want only the columns to be blue. How do I change that?

Thanks!

2

Hi @Snow_Wolf

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “section-multicolumn.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.multicolumn.background-primary .multicolumn-card {
    background: white !important;
    color: black;
}
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hello @Made4uo-Ribe thank you for a very helpful answer! I tried and it worked, only it does the opposite of what I was hoping to do: the columns are now white and the section background blue. I am trying to do the opposite. See current result attached:

Screenshot 2023-08-28 173359.png
Screenshot 2023-08-28 173359.png1070×695 109 KB

4

Do you like the opposite of the picture youve provided?

Do you mean like this?

Ribe_Dagandara_0-1693239511315.png
Ribe_Dagandara_0-1693239511315.png1345×418 77.7 KB

If it is try this code.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.multicolumn.color-accent-2.gradient.background-none * {
    color: black;
}
.media.media--transparent.media--adapt {
    background: #0c91c7;;
}
.page-width.section-template--16709835423978__fac97524-ec92-484b-a721-2f927dead303-padding.isolate {
    background: white;
}
.multicolumn.color-accent-2.gradient.background-none { background: #F6F6F6;}
  • And Save.
  • Let me know if you like to exchange something, also the color i used is same on the color youve have. Do you need to make the corners a bit rounded? like other section youve have. Let me know. :blush:

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!