How can I move the sale tag to the top of the price?

[harukajmickey]

Hi all,

My theme is Dawn.

I would like to move the sale tag to the top of the price (red line) and the tax-included-tag to the right of the price. (blue line)

Could anyone help with this?

Thank you!

The website is:

https://hobot-japan.com/products/hobot2s

[PageFly-Victor · Accepted solution]

Hi @harukajmickey 

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store->Theme->Edit code

assets->component-price.css

.price--large {

    display: flex;

    flex-direction: column-reverse;

}

.price--on-sale .price__badge-sale {

     width: 16%;

}

Hope you find my answer helpful!

Regards,

PageFly

[harukajmickey]

Thank you for your solution! The sale tag has just moved to the correct position!

What about the tag in blue circle?

[PageFly-Victor]

@harukajmickey 

ok now try with this code

Add this css at the bottom

Online Store->Theme->Edit code

1. assets->section-main-product.css

.no-js-hidden {

   display: inline-block;

}

.product__tax {

    display: inline-block;

}

2. assets->component-price.css

.price--on-sale .price__badge-sale {

    display: block;

    width: fit-content !important;

}

[harukajmickey]

Thank you so much! They all worked!

[harukajmickey]

The photos on each product page suddenly can't be seen only in the computer after coding. Do you know how to fix them?

https://hobot-japan.com/products/hobot_001

[harukajmickey]

Thank you for message. Unfortunately this worked but made the images on each products disappear. Do you know other solutions?