How to change the colour of each individual column of a multicolumn section

Solved

How to change the colour of each individual column of a multicolumn section

Wolfbadge
Tourist
6 1 1

Hi everyone ,

 I am trying to change the colour of each individiual box/column in the multicolumn. All other suggestions I have seen soo far seem to change the background of the entire box, but I would like the actual columns to be coloured.

 

If anyone knows any code or anyway to do this, please let me know. I would prefer them to be coloured a light blue "#ADD8E6". 

 

A picture of its current state is attached below.

Screenshot 2024-06-25 at 17.56.50.png

 

Many Thanks.

Accepted Solutions (2)
Wolfbadge
Tourist
6 1 1

This is an accepted solution.

Hi there , Although it worked , it worked on the wrong page. It worked on our home page when I needed it to work on the services page. If you could please resend the code appropriate to that , it would be greatly appreciated.

View solution in original post

techlyser_web
Shopify Partner
1767 327 352

This is an accepted solution.

@Wolfbadge 
Sorry 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--21845704278342__multicolumn_iRiLPY .multicolumn.background-primary .multicolumn-card {
background: #FF0000 !important;
}
section#shopify-section-template--21845704278342__multicolumn_4HYJ7n .multicolumn.background-primary .multicolumn-card {
background: #0000FF !important;
}
section#shopify-section-template--21845704278342__multicolumn_YqAFm6 .multicolumn.background-primary .multicolumn-card{
background: #008000 !important;
}
</style>

Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark my both solution as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 9 (9)

Moeed
Shopify Partner
4304 1105 1353

Hey @Wolfbadge 

 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Made4uo-Ribe
Shopify Partner
6827 1629 2007

Hi @Wolfbadge 

Would you mind to share your store URL? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

techlyser_web
Shopify Partner
1767 327 352

Hello @Wolfbadge 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  .multicolumn.background-primary .multicolumn-card {
        background: #ADD8E6 !important;
   }

</style>

techlyser_web_0-1719335331305.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Wolfbadge
Tourist
6 1 1

Hi there ,

thank you this worked. I have 3 different multicolumns on the same page and I was wondering if there was a way to make the columns of each multicolumn a different colour. Ie , for the first multicolumn , all of them would be red "#FF0000" , for the next multicolumn all the columns should all be blue"#0000FF" and all the columns of the final one should be green "#008000".

Many thanks

techlyser_web
Shopify Partner
1767 327 352

@Wolfbadge 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Wolfbadge
Tourist
6 1 1

www.wolfbadge.com. Look on the page titled services

techlyser_web
Shopify Partner
1767 327 352

@Wolfbadge 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--21843940278598__multicolumn_3Pep3i .multicolumn.background-primary .multicolumn-card {
background: #FF0000 !important;
}
section#shopify-section-template--21843940278598__multicolumn_ctQHPq .multicolumn.background-primary .multicolumn-card {
background: #0000FF !important;
}
section#shopify-section-template--21843940278598__multicolumn_pU8rDa .multicolumn.background-primary .multicolumn-card{
background: #008000 !important;
}
</style>

Please:
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Wolfbadge
Tourist
6 1 1

This is an accepted solution.

Hi there , Although it worked , it worked on the wrong page. It worked on our home page when I needed it to work on the services page. If you could please resend the code appropriate to that , it would be greatly appreciated.

techlyser_web
Shopify Partner
1767 327 352

This is an accepted solution.

@Wolfbadge 
Sorry 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
section#shopify-section-template--21845704278342__multicolumn_iRiLPY .multicolumn.background-primary .multicolumn-card {
background: #FF0000 !important;
}
section#shopify-section-template--21845704278342__multicolumn_4HYJ7n .multicolumn.background-primary .multicolumn-card {
background: #0000FF !important;
}
section#shopify-section-template--21845704278342__multicolumn_YqAFm6 .multicolumn.background-primary .multicolumn-card{
background: #008000 !important;
}
</style>

Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark my both solution as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com