I want to move price badge sale top of the Title

Store Design
1

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

Ayeasking_0-1690808280031.png
Ayeasking_0-1690808280031.png1920×927 246 KB

Website: www.waycoffee.eu

1 Like
2

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;
}
3

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%;
}
}

ZestardTech_0-1690809002260.png
ZestardTech_0-1690809002260.png1088×826 223 KB

4

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:

dannyelo_1-1690809422037.png
dannyelo_1-1690809422037.png1754×1652 348 KB

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,