Main issue: changing the background color of individual columns in a Shopify multicolumn section rather than the entire section background.
What worked: adding custom CSS in theme.liquid (placed before ) targeting .multicolumn.background-primary .multicolumn-card to set a specific color (e.g., #ADD8E6). This successfully colored the column cards.
Per-section colors: the requester needed three multicolumn sections on one page to have different colors. A solution used section-specific CSS selectors (section#shopify-section-…) to assign red (#FF0000), blue (#0000FF), and green (#008000) to each multicolumn’s cards. The initial code targeted the home page; it was corrected by updating the section IDs to target the Services page.
Latest update: another participant reports difficulty because their multicolumns appear to share a template with suffixes -1, -2, -3 and can’t get the CSS to apply. They shared a preview URL and password for help. No confirmed fix yet; guidance pending.
Notes:
Status: partly resolved for the original requester; open for the new participant’s case.
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.
Many Thanks.
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
Hi @Wolfbadge
Would you mind to share your store URL? Thanks!
Hello @Wolfbadge
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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
@Wolfbadge
Can you share store URL?
www.wolfbadge.com. Look on the page titled services
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Please:
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as 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.
@Wolfbadge
Sorry
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark my both solution as an Accepted Solution.
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
