How do you change colour of just the column in the multi column when show as column background is enabled. Also how to align the inner headline to the left (where it says column)
Topic summary
Goal: Change the background color of a specific column/card in a Shopify Multicolumn section (with “show as column background” enabled) and align the inner headline to the left.
Context and attempts:
- URL shared; target is the last multicolumn near the bottom of the product page. Some confusion arose due to reviews at the bottom and possibly different themes being worked on.
- Global CSS provided to affect all multicolumns:
- Text alignment and heading color:
.multicolumn-card__info .rte p { text-align: left; }and.multicolumn-card__info h3 { color: red; }(added to theme CSS file).
- Text alignment and heading color:
- For card background (global example):
.multi column-list__item { background: aquamarine; padding-top: 10px; }(example to demonstrate per-card background without changing the page background).
Latest request:
- Apply these changes only to the specific multicolumn in the published theme and align the column headers (headlines) to the left.
Status:
- Partial solution (global CSS examples) provided. Targeting a specific instance and left-aligning headers for that instance remains unresolved.
Notes:
- “Multicolumn” is a Shopify section; each “card” is an individual column. Screenshots are central to understanding the layout differences.
1 Like
Hi @deluc004
Is this multicolumns visible on the online store? If its not publish would you mind to share the preivew. Thanks!
right at the bottom of the page
Thanks for the info, I see 3 multicolumns in this page. Do you want them to change all?
I just like to clarify.
does the same code not apply?
We can change the specific multicolumn section, or we can change all the multicolumns. If you like to change all the mutlicolumns check this code.
- From you Admin page, go to Online Store > Themes
- Select the theme you want to edit
- Under the Asset folder, open the main.css(base.css, style.css or theme.css)
- Then place the code below at the very bottom of the file.
.multicolumn-card__info .rte p {
text-align: left;
}
.multicolumn-card__info h3 {
color: red;
}
-
And Save.
-
Result
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
No sorry, i want to change the background colour of the card without changing the main background colour, does this make sense?
Do you mean like this?
Same Instruction:
.multicolumn-list__item {
background: aquamarine;
padding-top: 10px;
}
And Save.
You can change the background color you want.
