Solved

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

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)
KetanKumar
Shopify Partner
36839 3635 11972

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
36839 3635 11972

@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
36839 3635 11972

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
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
36839 3635 11972

@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

@KetanKumarPerfect!!!

Thank you so much!!!

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
36839 3635 11972

@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.

 

KetanKumar
Shopify Partner
36839 3635 11972

@iinsomniac 

sorry for any issue can you please share store url

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

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.

KetanKumar
Shopify Partner
36839 3635 11972

@iinsomniac 

yes its work fine doesn't any issue

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