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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024