DEBUT - Prices alignment to center under product images in Collections/Recommendations

Solved
Annavittoria
Excursionist
37 0 17

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

Cattura1.JPG

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

Cattura2.JPG

Any help for fixing this problem and have both correctly centered and properly spaced? Thanks in advance

www.pianodgirls.com

 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24918 2497 9034

This is an accepted solution.

@Annavittoria 

thanks for update

.price__regular dd {
    margin-right: 0;
}
.product-card {
text-align: center;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 12 (12)
KetanKumar
Shopify Partner
24918 2497 9034

@Annavittoria 

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;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Annavittoria
Excursionist
37 0 17

Thanks @KetanKumar for your support, as always.

..unfortunately now is the single price that is not centered when displayed alone

Cattura3.JPG

Any further advice?

___________________________________

In addition, forgot to mention that prices are not centered as well into the product recommendation section

Cattura4.JPG

Please help me on this matter too!

Thanks

KetanKumar
Shopify Partner
24918 2497 9034

This is an accepted solution.

@Annavittoria 

thanks for update

.price__regular dd {
    margin-right: 0;
}
.product-card {
text-align: center;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Annavittoria
Excursionist
37 0 17

@KetanKumar 

Amazing job!! Last little thing and it is going to be a perfect solution

Cattura5.JPG

ON SALE badge seems too long and the writing inside not centered. Any help? It is also about product recommendation

Thanks

 

 

KetanKumar
Shopify Partner
24918 2497 9034

@Annavittoria 

oh, sorry for the missout can you please add this code also

.price--on-sale .price__badge--sale {justify-content: center;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Annavittoria
Excursionist
37 0 17

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!!

KetanKumar
Shopify Partner
24918 2497 9034

@Annavittoria 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
iinsomniac
Excursionist
12 0 5

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.