Shopify themes, liquid, logos, and UX
I have used the following code to center title and price in my collections page, however the title and price don't seem to align and center properly.
dl.price.price--listing {
align-items: center;
}
.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
display: inline-block;
}
Also looking to center title and price in home page. Thanks for the help!
Shopify page - https://thearomaticbrand.com/
Solved! Go to the solution
This is an accepted solution.
Hey @tharomaticbrand,
Please remove the last given script and add the following script at the bottom of your assets/theme.scss.liquid file.
/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}
#shopify-section-collection .price{
align-items: center !important;
}
/* For collection page products */
#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}
#Collection .price{
align-items: center !important;
}
.price__regular, .price__sale{
margin-right: 0px !important;
}
Hope this will work.
Hey @tharomaticbrand,
Please add the following code at the bottom of your assets/theme.scss.liquid file.
/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}
#shopify-section-collection .price{
align-items: center !important;
}
/* For collection page products */
#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}
#Collection .price{
align-items: center !important;
}
Hope this works!
Hi,
Thank you so much for the help, it worked!! However, the text still looks a bit off and not completely center aligned with each other. See attached image.
Any help is appreciated, thanks again!
This is an accepted solution.
Hey @tharomaticbrand,
Please remove the last given script and add the following script at the bottom of your assets/theme.scss.liquid file.
/* For home page products */
#shopify-section-collection .product-card__title {
display:block;
text-align:center;
}
#shopify-section-collection .price{
align-items: center !important;
}
/* For collection page products */
#Collection .product-card__title {
display:block;
text-align:center;
border-bottom: none !important;
}
#Collection .price{
align-items: center !important;
}
.price__regular, .price__sale{
margin-right: 0px !important;
}
Hope this will work.
It worked!!! Thank you so much!!!
Hey @tharomaticbrand,
Welcome. Glad to know it worked for you 🙂
Thanks!
These work for great for the main collections, except it doesn't work with the "you may also like" collections. Is there a fix for that?
This worked for my shop as well. Thank you so much!
Awesome! It works! Thank you so much 🙂
I was able to center title/price on main shopping page using your code (thank you!)—but how do you do it in 'YOU MAY ALSO LIKE'?
Hello. Can I get the code how to position the sold out badge like the one in this picture?
Thanks
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024