Solved

Move Sold out badge to align to the left

calibre65
New Member
12 0 0

I updated the code to not show any prices if a product is sold out. However now the sold out badge is out of alignment since the price is no longer showing.

 

How do I fix this?

 

I'm using the Habitat theme.

Here's the link to a sold out product: https://calibre65.com/collections/all-watches/products/audemars-piguet-15400st-royal-oak-blue-dial-1...

 

calibre65_0-1701590345051.png

calibre65_2-1701590463040.png

 

 

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3465 459 515

This is an accepted solution.

Hi @calibre65 

Insert this css snippet into your css file

.thb-product-detail .product-price-container .badges {
    margin-left: 0!important; 
}

Result:

view (92).png

Hope it helps @calibre65 !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 3 (3)

StephensWorld
Shopify Expert
1317 151 321

Hey @calibre65 

 

Revert whatever changes you did to hide the product price, and then create a custom product page template for sold out products:

 

https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates 

 

Assign the new custom template to whichever products are sold out (you'll need to do this one product at a time). 

 

product templates.png

 

Then go into the theme editor, navigate to one of the sold out products (with the new template assigned) and add this coding to the 'Custom CSS' section of the "Product Information" block:

 

 

.amount {
  display: none;
}
.badges {
  margin-left: 0px;
}

 

 

 

alignment of sold out badge.png

 

You'll have to manually assign the products to the new product template whenever they sell out, but it'll definitely work. Doing it this way will also allow you to add additional information to the product templates of sold-out products (ex. if they're ever going to come back in stock, other products to consider, etc.). 

 

Hope the above helps! 🙂

 

Cheers,

Stephen

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

BSS-Commerce
Shopify Expert
3465 459 515

This is an accepted solution.

Hi @calibre65 

Insert this css snippet into your css file

.thb-product-detail .product-price-container .badges {
    margin-left: 0!important; 
}

Result:

view (92).png

Hope it helps @calibre65 !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

calibre65
New Member
12 0 0

This was easy to implement and works perfectly as expected, thank you!