I want to move price badge sale top of the Title

Hi,
I want to move price badge sale (without price) above title.
Like this:

Website: www.waycoffee.eu

1 Like

Hello @Ayeasking

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in {
    position: relative;
}
span.badge.price__badge-sale.color-accent-2 {
    position: absolute;
    top: -27px;
    left: 8px;
}

Hello there.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (min-width:749px){
product-info#ProductInfo-template--19134409670984__main {
    position: relative;
}
span.badge.price__badge-sale.color-accent-2 {
    position: absolute;
    top: -5%;
    left: 1%;
}
}

Hey,

Go to Online store > theme > actions > edit code.

Open assets folder > section-main-product.css file.

Copy and paste this code at the bottom of the file.

@media screen and (min-width: 748px) {
  span.badge.price__badge-sale {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-27px);
  }
}

Result:

This is a easy fix, the sale badge looks to close to the header. To property do it, you need to change the structure of the html ideally.

Hope that helps,