Shopify themes, liquid, logos, and UX
Hello,
following some previous discussions, I've been able to center title under the images in collections & recommendations adding this code:
/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
align-items: center;
}
.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
font-size: 15px;
display: inline-block;
text-decoration: none;
}
.template-product dl.price{align-items: flex-start;}
.product-recommendations__inner dl.price {
display: block!important;
text-align: center;
}
but as you can see from the screenshot, prices are slightly moved to the left
So, i tried to add the following code:
.price dd {
margin: 0 -0.5em 0 0 !important;
}
but the result is that the single prices are correctly displayed, but when there are compared prices, they overlaps
Any help for fixing this problem and have both correctly centered and properly spaced? Thanks in advance
Solved! Go to the solution
This is an accepted solution.
thanks for update
.price__regular dd {
margin-right: 0;
}
.product-card {
text-align: center;
}
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}
Thanks @KetanKumar for your support, as always.
..unfortunately now is the single price that is not centered when displayed alone
Any further advice?
___________________________________
In addition, forgot to mention that prices are not centered as well into the product recommendation section
Please help me on this matter too!
Thanks
This is an accepted solution.
thanks for update
.price__regular dd {
margin-right: 0;
}
.product-card {
text-align: center;
}
Amazing job!! Last little thing and it is going to be a perfect solution
ON SALE badge seems too long and the writing inside not centered. Any help? It is also about product recommendation
Thanks
oh, sorry for the missout can you please add this code also
.price--on-sale .price__badge--sale {justify-content: center;}
Quick summary for easier reference of future users:
Hereunder the whole code I've added into theme.scss.liquid
/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
align-items: center;
}
.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
font-size: 15px;
display: block;
text-decoration: none;
}
.template-product dl.price{align-items: flex-start;}
.product-recommendations__inner dl.price {
display: inline-block!important;
text-align: center;
}
.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}
.price__regular dd {
margin-right: 0;
}
.product-card {
text-align: center;
}
.price--on-sale .price__badge--sale {justify-content: center;}
/*== END Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
/*== Removes Underline Upon Hover Under Product Images in Collections & Product Recommendations ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}
/*== END Removes Underline Upon Hover Under Product Images in Collections & Product Recommendations ==*/
(font size depends on your choice)
Ciao!!
it's my pleasure to help us
Hi Mr. Ketan,
I was following the thread of the topic and I inserted all the code mentioned in the thread; compared price and sale buttons in the home page collection's is great but It did not have any effect on the product page.
And for mobile view, no change is noticed for the compared price, while the regular price is working fine.
What can be the probable solution for it?
Swift help will be highly appreciated.
sorry for any issue can you please share store url
Hello Mr. Ketan,
petgocrazy.com is the url.
But I think I figured that out, just because of the display size of the device, it is shown on the side or else it is all center aligned.
I think that's the case, but I request you to check the ur and let me know what exactly is happening.
I really appreciate your swift response.
yes its work fine doesn't any issue
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