DEBUT Theme center and align prices in product-recommendations__inner

marcojh
Tourist
4 0 2

Hi guys,

 

I'm having issues finding the correct code. Maybe you can help me?

I want my product recommendations to look exactly like the products in my shop

shop: https://hannah-paula.com/collections/shop

Bildschirmfoto 2021-10-21 um 12.06.47.png

product recommendations: https://hannah-paula.com/collections/weine/products/hannah-paula-s-riesling-wein-trocken-2019

Bildschirmfoto 2021-10-21 um 12.06.35.png

 

Somehow the prices for the product recommendations won't center and the price__badge--sale is too long.

At the same time I want to horizontally align all prices - is this possible?

 

Thanks for your help!

 

The code I'm currently using:

dl.price {
    align-items: center;
}

.h4.grid-view-item__title {    
  text-align: center;    
  width: 100%;    
  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;
}

.product-recommendations__inner .price__regular, .price__sale {margin-right: 0;}
.product-recommendations__inner .price__compare dd { margin-right: 0;}


.price__pricing-group {
    display: block!important;
    text-align: center;
}

.price__regular, .price__sale {margin-right: 0;}
.price__compare dd { margin-right: 0;}
.price--on-sale .price__badge--sale {justify-content: center;}

 

Replies 6 (6)
dmwwebartisan
Shopify Partner
9770 2228 3065

@marcojh 

Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid->paste below code at the bottom of the file.

.product-recommendations__inner .price--on-sale .price__sale {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 auto !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
marcojh
Tourist
4 0 2

@dmwwebartisan thank you, that helps already and sale prices are now centered!

Do you know as well how to fix the price__badge--sale (it should be the same width as prices and not the entire row) and how to horizontally align all four prices?

 

Best,

Marco

dmwwebartisan
Shopify Partner
9770 2228 3065

@marcojh 

Please share screenshot.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
marcojh
Tourist
4 0 2

@dmwwebartisan 

like in the above: 

Bildschirmfoto 2021-10-21 um 12.06.47.png

Here the sales badge is correct for the product recommendation it does not apply yet.

+I've added a line where I'd like to have all prices aligned

dmwwebartisan
Shopify Partner
9770 2228 3065

@marcojh 

Please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid->paste below code at the bottom of the file.

.product-recommendations__inner .h4.grid-view-item__title {min-height: 45px;}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
marcojh
Tourist
4 0 2

@dmwwebartisan perfect, thank you so much!

I've figured out the sale badge as well, so everything works now as it's supposed to.

Thanks again!