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

Technical Q&A

Topic summary

Goal: In the Dawn theme, reposition the “sale” badge above the price and move the tax-included label to the right (screenshot provided).

Actions: CSS edits were added via Online Store → Theme → Edit code.

  • assets/component-price.css: adjusted .price–large (flex, column-reverse) and .price__badge-sale (width, later display:block; width:fit-content !important).
  • assets/section-main-product.css: set .no-js-hidden and .product__tax to display:inline-block.

Outcome: The sale tag moved to the correct position and the tax-included tag aligned as desired. The changes were confirmed to work.

New issue: After these CSS changes, product photos stopped displaying on desktop product pages (links provided). A further suggested fix “worked” but also caused product images to disappear.

Status: The layout goal was achieved, but the desktop product image visibility problem remains unresolved. Additional solutions are requested; no final fix has been provided yet. Technical context: edits center on CSS display and layout rules for price/tax components, with product media visibility affected afterward.

Summarized with AI on February 7. AI used: gpt-5.
2

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

1 Like