reposition the sold out badge to bottom left

Store Design
,

Topic summary

A user needs to move the Shopify sold-out badge from the top left to the bottom left of product images.

Solutions Provided:

  1. Theme Settings Method: Navigate to Shopify admin → Online Store → Themes → Customize → Theme settings → Badges → Position on cards → Select “Bottom left” → Save. However, the original poster confirmed their theme lacks this Badges option.

  2. CSS Code Solutions: Multiple contributors provided custom CSS snippets to be added to the theme.css file (accessed via Actions → Edit code → Assets → theme.css):

    • Basic positioning code targeting .sold-out-badge with position: absolute, bottom: 10px, left: 10px
    • Media query approach for responsive positioning
    • Alternative code targeting .product-card__figure > .badge-list

Resolution: The user confirmed one of the CSS solutions worked successfully and thanked the contributors. Screenshots were shared showing the before/after results.

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

Hi There, I am having troubles positioning the shopify sold out badge on the bottom left of the product. Right now it is sitting on the top left. Any help will be greatly appreciated

you can access my store here - it is currently in preview mode

jkilov_0-1730240916869.png
jkilov_0-1730240916869.png2752×1172 172 KB

2

Hi @jkilov

Here are two ways that you can position the Sold out badge to the bottom left corer:

1. In Theme settings

Step 1: From your Shopify admin, go to Online Store > Themes > Click Customize.

Step 2: Click the Theme settings gear icon

Step 3: Click Badges

Step 4: In the Position on cards drop-down menu, select Bottom left.

Step 5: Click Save to apply your changes.

2. Use CSS code

You can use this CSS code to position the badge:

.sold-out-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #ff0000; /* Red background color */
  color: #fff; /* White text color */
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 999; /* Ensure the badge is always on top */
}

I hope it helps!

Best regards,

Daisy

3

Hi, Thank you for your response. My theme settings does not have a ‘Badges’ Option?

Also i tried the code you provided and it did not work - infact it pushed the button higher.

4

Hi @jkilov ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media screen and (min-width: 700px) {
    .product-card__figure>.badge-list {
        inset-block-start: auto;
        inset-block-end: .5rem;
    }
}
5

Amazing, Thank you for your help!

1 Like
6

Hi @jkilov ,

You’re welcome and happy to help you

7

Hello @jkilov
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file and save.

sold-out-badge.badge.badge--sold-out {
margin-top: 400px !important;
}

result

45.png
45.png1056×541 84.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks