Remove "Sold Out" Label from Collection pages

Solved
New Member
2 0 0

Hello! I'm looking for having the "sold out" label hidden from collection pages but still show on product pages.

I've read that this can be done tweaking the <theme-styles.scss.liquid> I'm using. The thing here is I was unable to find the right line I need to change.

 

This post has a part of the answer for me, but the class name that applies for my theme :(

https://community.shopify.com/c/Shopify-Design/Out-of-Stock-label-change/td-p/440741


I'm using the Ella theme by the way. Any help would be GREATLY appreciated!

Thank you!

0 Likes
Highlighted

Hello 

Please share your site url.

I will let you know.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 1

Hello! I'm looking for having the "sold out" label hidden from collection pages but still show on product pages.using debut theme.

0 Likes
Highlighted
Tourist
9 0 1

Hello! I'm looking for "sold out" label hidden from collection pages but still show on product pages.using debut theme.

0 Likes
Highlighted

Hello teja2810,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 1

my site diy-home.online

1 Like
Highlighted
Shopify Partner
7574 1045 2626

This is an accepted solution.

@teja2810 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.price--sold-out .price__badge--sold-out {
    display: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
2 Likes
Highlighted

This is an accepted solution.

Hey @darboscalante,

 

You can also try this code

.template-collection .grid-view-item--sold-out .price__badge--sold-out{
display: none;
}

 

Just add it to the theme.scss.liquid file within your theme code. 

By the way, I think your collection page is a bit basic and lacks of much important information. So if you ever think about optimizing the collection page, I suggest you add at least these things:

  • Secondary hover images for each list item
  • Add to cart button (Because these are all products that people can buy instantly without reading much)
  • Information about variants if any.

You can take a look at this article about optimizing collection, aka product listing page. 

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
2 Likes
Highlighted
New Member
1 0 1

Hello!
I tried the solution mentioned above. Unfortunately, it doesn't work for the theme I am using (--> Spring Theme).

Can anyone help, please?

Thanks, Susanne

The website is: https://www.pinkewelle.de/collections/all

 

 

1 Like
Highlighted
Shopify Partner
7574 1045 2626

Hello, @susi1717 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/main.css->paste below code at the bottom of the file.

.label-product.sold-out {
display: none;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes