Solved

Center Align Price on Collection Page - Debut Theme

LLT
Tourist
4 0 0

Hi All,

I am trying to centrally align the prices on my collection pages, and Ive come close, but still have a small issue. I have tried a combination of solutions from this forum, which has gotten me to the below code. Problem is, my prices are still slightly left-adjusted, not quite centered. (Note, I started this process with the prices next to each-other, but that looked strange on Mobile, so I decided to stack them instead, which almost got me to a perfect result, just need the last bit of alignment to get them fully centered)

Also, due to stacking the prices, this has also carried over to the product page, where I would like to have the price/compare-price next to each other, i.e. stacked on collection page, next to each other on product page (and of course left aligned on product page, which they currently are).

Hope someone has the answer. thx

Product page (prices should be in the same row and left aligned)

LLT_0-1635535282465.png

Collection Page (Prices should be stacked, as they are, and fully centrally aligned, which they almost are, but still a bit to the left)

LLT_1-1635535367847.png

 

Code used to get to this point in Assets->theme.css:

/*== 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;
text-transform: uppercase;
line-height: 1.6;
}

.template-product dl.price{align-items: flex-start;}

.product-recommendations__inner dl.price {align-items: center;}

.price__sale {
margin-right: 0;
display: block!important;
}

.price__compare dd {
margin-right: 1;
display: block!important;
}

.price__regular dd {
margin-right: 1;
}

.product-card {
text-align: center;
}

.price--on-sale .price__badge--sale {justify-content: center;}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

/*== Change font on product price on product page ==*/
.price-item {
font-size: 16px !important;
font-weight: 400;
color: #333232 !important;
}

 

Accepted Solution (1)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@LLT 

You can follow the previous steps and use this code:

.template-product .product-single__meta .price__badge--sale{
    margin-left: 10px !important;
}


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 8 (8)

diego_ezfy
Shopify Partner
2935 562 883

Hello @LLT,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LLT
Tourist
4 0 0

https://littleleaftoys.shop/

It would be any of the collection pages as well as the featured collection on the home page, but here's an example

https://littleleaftoys.shop/collections/baby

The site is live, guess you don't need a pw?

EDIT: And of course any of the product pages, where I would like the price/compare-price to be in the same row, i.e. not stacked.

diego_ezfy
Shopify Partner
2935 562 883

@LLT, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.price dd{
    margin-right: 0 !important
}

.price__pricing-group .price__sale{
    flex-direction: row !important;
    display: flex !important;
}

.price__pricing-group .price__sale{
    flex-direction: row !important;
    display: flex !important;
}

.price__pricing-group .price__sale dd:first-of-type{
   margin-right: 10px !important;
}



Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LLT
Tourist
4 0 0

Great, that centered it all. just a slight issue occurred on the product page, the "sales badge" is too close to the "Compare price", any chance you have a solution to that?

LLT_0-1635537892052.png

 

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@LLT 

You can follow the previous steps and use this code:

.template-product .product-single__meta .price__badge--sale{
    margin-left: 10px !important;
}


Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

LLT
Tourist
4 0 0

Awesome, that did the trick. Thank you so much!

Jacquline
Excursionist
48 0 7

Hi can you please also help me? I used the code to make the prices align but now there are too close to each other.

 

Bildschirmfoto 2021-12-16 um 17.48.49.png

Is there a way to add some space between the two prices?

 

Thank you so much @diego_ezfy 

Jacquline
Excursionist
48 0 7

Also it worked great for dekstop but on mobile the prices are still under each other.. any way to make them align on mobile also? 

 

IMG_6469.jpg

 

Thank you  so much @diego_ezfy