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

Store Design
,
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
Screenshot 2024-06-25 at 17.56.50.png2230×744 40.4 KB

Many Thanks.

1 Like
2

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

3

Hi @Wolfbadge

Would you mind to share your store URL? Thanks!

4

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 on theme.liquid

.multicolumn.background-primary .multicolumn-card { background: #ADD8E6 !important; }

techlyser_web_0-1719335331305.png
techlyser_web_0-1719335331305.png1155×212 30.4 KB

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

1 Like
5

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

6

@Wolfbadge
Can you share store URL?

7

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

8

@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 on theme.liquid

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; }

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

9

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.

10

@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 on theme.liquid

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; }

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

1 Like
11

Hi there! I’m trying to get this to work on my site currently, and I’m not having any luck. Upon my quick inspection, my multicolumn items don’t have their own section template? They all have the same one, with a suffix of -1, -2, or -3 afterward.

Here’s the link to the site: https://be72c8-bf.myshopify.com/?_ab=0&_fd=0&_sc=1

Pw is yownga