What's your biggest current challenge? Have your say in Community Polls along the right column.

How do I align the '50% OFF' with the price, so that its perfectly centered?

Solved

How do I align the '50% OFF' with the price, so that its perfectly centered?

bdvecom
Excursionist
14 0 5

As you can see now, it's not nicely centered but a little too much above it. And also, is there a way to remove the white space beneath the whole pricing to make the margins between the price and stock notification smaller?Screenshot 2024-11-14 at 10.43.56.png

Accepted Solution (1)
Deluxe-Foladun
Shopify Partner
56 9 11

This is an accepted solution.

Hi @bdvecom,

Try this:

  1. Go to Online Store > Themes.
  2. Click on the three dots next to your theme and select Edit Code.
  3. In the left-hand sidebar, search for base.css and open it.

    Add the following code at the end:

 

product-info .price.price--large.price--on-sale {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -12px;
}

 

 

 

Let me know if this resolves the issue!

Best regards,
Foladun | Customer Account Deluxe

• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available)


• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.

View solution in original post

Replies 4 (4)

Deluxe-Foladun
Shopify Partner
56 9 11

@Hi @bdvecom,

Foladun here from the Customer Account Deluxe App team. 👋


Could you please share the store URL and password if required, so I can assist further?


Best regards,
Foladun | Customer Account Deluxe

• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available)


• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.

bdvecom
Excursionist
14 0 5
Deluxe-Foladun
Shopify Partner
56 9 11

This is an accepted solution.

Hi @bdvecom,

Try this:

  1. Go to Online Store > Themes.
  2. Click on the three dots next to your theme and select Edit Code.
  3. In the left-hand sidebar, search for base.css and open it.

    Add the following code at the end:

 

product-info .price.price--large.price--on-sale {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -12px;
}

 

 

 

Let me know if this resolves the issue!

Best regards,
Foladun | Customer Account Deluxe

• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available)


• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.

bdvecom
Excursionist
14 0 5

it worked thanks a lot man!