Hello,
Does anyone know how I can center the text in the circled box and change the colors of the product columns to a different color? I would like the color to be dark pink with white text for the product columns.
Thank you in advance!
Topic summary
A Shopify store owner seeks help centering text in a product recommendation section and changing the product column colors to dark pink with white text. An image shows the specific area needing modification.
Two CSS solutions were provided:
-
Solution 1: Edit the
base.cssfile directly by adding code to center.summary__titleelements. This approach requires accessing the theme code editor. -
Solution 2: Use the theme customizer’s Custom CSS section with more comprehensive styling that:
- Centers all text within
.complementary-products__container - Centers the quick-add button
- Applies a deep pink background to product cards
- Centers all text within
Both solutions include code snippets and result screenshots demonstrating the changes. The second solution appears more complete as it addresses both the centering and color requirements without editing core theme files.
Hello @Muselabel
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.summary__title {
text-align: center !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @Muselabel
You can follow this instruction:
-
Go to Shopify > Theme > Customize
-
Copy and paste this code on Theme settings > Custom CSS section
.complementary-products__container * {
text-align: center !important;
}
.complementary-products__container .card__content .quick-add {
justify-self: center !important;
}
.complementary-products__container ul.list-unstyled li .card-wrapper.product-card-wrapper .card.card--card.card--media {
background: deeppink !important;
}
Result:
Best,
Esther