Change background colour for each column in a multicolumn

[nadezhda_ilieva]

Hello. I would like to change the colour of each column in my multicolumn. Right now it looks like that, but I would like to make it look like what Sephora has right now. 

 

Thanks! 

[Guleria]

Hello @nadezhda_ilieva ,

Yes possible but keep note need customization.
Idea is to create an option with a multicolumn column to assign a color. I think 2 options needed are dark and light. 
Once an option is created , assign color to each column and then go to the code and fetch it. 
In this way each column will use the assigned color dynamically. 

Thanks

[nadezhda_ilieva]

Much appreciated, but I am not good at coding to make these changes myself.

[Guleria · Accepted solution]

@nadezhda_ilieva ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

  .multicolumn-list li:nth-child(1) > .multicolumn-card {
    background-color: red;
}
.multicolumn-list li:nth-child(2) > .multicolumn-card {
    background-color: #d4bfbf; 
}
.multicolumn-list li:nth-child(3) > .multicolumn-card {
    background-color: #e0e0e0;
}
.multicolumn-list li:nth-child(4) > .multicolumn-card {
    background-color: #ddf4dd; 
}

You can change color code a/to your need.
And if you have more than 4 multicolumns add same rule for others.

Thanks  

[nadezhda_ilieva]

Thank you a lot! It worked perfectly.

[Julie4]

Thank you so much.. I just applied your response to this question (changing the colour I wanted) and it worked, first go 🙂 Your instructions were so easy to follow.

[Made4uo-Ribe]

Hi @nadezhda_ilieva 

Do you like to add option controls that you can easily change wherever you want(this need a developer)? or by code that also the color change by code(I would need your store URL to provide the code)?

[nadezhda_ilieva]

Thank you. Just being able to change the colors would be enough! This is my website https://aboutmi.bg/ (password: nadia)

[nadezhda_ilieva]

Thank you very much! I will try that. I am new to coding, so I am not sure if I will be able to do it. 

[BSS-TekLabs]

Hello @nadezhda_ilieva .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[nadezhda_ilieva]

This is my website https://aboutmi.bg/ (password: nadia) Thanks very much