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

Solved

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

harukajmickey
Shopify Partner
119 0 9

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

 

sales-tag.png

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3101

This is an 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

View solution in original post

Replies 6 (6)

PageFly-Victor
Shopify Partner
7865 1785 3101

This is an 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
Shopify Partner
119 0 9

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

What about the tag in blue circle?

PageFly-Victor
Shopify Partner
7865 1785 3101

@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
Shopify Partner
119 0 9

Thank you so much! They all worked!

 

harukajmickey
Shopify Partner
119 0 9

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
Shopify Partner
119 0 9

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