reposition the sold out badge to bottom left

[jkilov]

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

[DaisyVo]

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

[jkilov]

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.

[namphan]

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

[jkilov]

Amazing, Thank you for your help!

[namphan]

Hi @jkilov,

You're welcome and happy to help you

[Rahul_dhiman]

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

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