Center Align Price on Collection Page - Debut Theme

Solved
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)

Accepted Solutions
diego_ezfy
Shopify Partner
2300 413 540

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 6 (6)
diego_ezfy
Shopify Partner
2300 413 540

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
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
2300 413 540

@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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
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
2300 413 540

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

LLT
Tourist
4 0 0

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