I want this 20% off and coming soon to be placed on bottom left of product image

Shopify Discussion

Topic summary

A user seeks to reposition product badges (“20% off” and “coming soon”) from the top-right to the bottom-left of product images on their Shopify store.

Solution Provided:

  • Navigate to: Online Store → Themes → Edit Code
  • Locate base.css file (around line 3696)
  • Find the CSS rule: .product-card-wrapper .card__badge span
  • Replace the positioning properties:
    • Change right: 10px; top: 10px; to left: 10px; bottom: 0px;
  • Save changes

The response includes specific CSS modifications to achieve the desired badge placement. The issue appears resolved with these technical instructions, though no confirmation from the original poster is included in the thread.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

I want this 20% off and coming soon to be placed on bottom left of product image that is from top right to bottom left on my store https://swawe.store/ with password - omg

Screenshot 2024-07-25 at 23.27.28.png
Screenshot 2024-07-25 at 23.27.28.png2845×1022 300 KB

2

Hi @attackon

  1. Navigate to Online Store → Themes → Edit Code.

  2. Open file base.css and find the below code (line No. 3696) :

.product-card-wrapper .card__badge span {
position: absolute;
right: 10px;
top: 10px;
}

  1. Replace this code with below and save the changes:

.product-card-wrapper .card__badge span {
position: absolute;
bottom: 0px;
left: 10px;
}

Hope it helps,

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.