Shopify themes, liquid, logos, and UX
Hello,
I was wondering if there was a way for me to center the text in the collection list section. I tried with some code someone else gave me and it worked but it also centered everything else like the price which I don't want. I just want it to be centered in the specific section.
Pass: YIVAN24
Solved! Go to the solution
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.
.collection-list .card__heading {
text-align: center;
}
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code at the TOP of the file.
.card__heading {
text-align: center!important;
}
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.
.card__heading.h5 {
text-align: inherit!important;
}
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.
.collection-list .card__heading {
text-align: center;
}
Thank you worked great, but is there a way to also achieve this on mobile?
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.
.card__heading {
text-align: center!important;
}
Im not sure why but the code didn't work for me. There might be another code that is overwriting it?
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code at the TOP of the file.
.card__heading {
text-align: center!important;
}
Ok, that worked. But do you know how to do it so it doesn't affect the product title?
This is an accepted solution.
Hi @YIVAN
- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.
.card__heading.h5 {
text-align: inherit!important;
}
Perfect, thank you.
Hi @YIVAN
Great to hear that the issue has been resolved! If my assistance was helpful, please consider liking and accepting the solution. Feel free to reach out if you have any further questions.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025