How can I separate the the sales tag from the item?

Technical Q&A

Topic summary

Goal: In the Shopify Dawn theme, move the sale badge (“sales tag”) from the product image container to the product info area (title, reviews, price), matching the layout shown in the provided screenshot.

Proposed steps:

  • Edit card-product.liquid and relocate the badge code to the section containing the product title/reviews/price (exact placement indicated via screenshot).
  • In Assets > base.css, add a rule to position the badge within the info block:
    .product-card-wrapper .card__badge { align-self: flex-start !important; }

Notes:

  • Dawn uses Liquid (Shopify’s templating language) and CSS; the .card__badge class targets the sale badge.
  • Screenshots are central to understanding where to move the code; no explicit code snippet was provided in text.

Status: A clear solution was suggested; no confirmation from the original poster yet, so the outcome remains unverified.

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

Hi I am using Dawn.

スクリーンショット 2022-10-07 13.37.30.png
スクリーンショット 2022-10-07 13.37.30.png3081×2165 565 KB

The sales tag is in a div of the item, and they are close next to each other. However I want to separate the tag from the item and put it in a div of the item title, reviews, and price like the image above. Could anyone teach me how to do it?

Thank you in advance!

2

Hi @harukajmickey ,

Please follow the steps below:

  • Step 1: Go to card-product.liquid file and move code here:

Screenshot.png
Screenshot.png1585×792 65.5 KB

  • Step 2: Go to Assets > base.css and paste this at the bottom of the file:
.product-card-wrapper .card__badge {
  align-self: flex-start !important;
}

Hope it helps!