Out of Stock label change

Highlighted
Tourist
4 0 2

(SOLVED! see the bottom post, It shows how to change whether labels show or hide and color and what they say)

Hello All, I'd like to have the "sold out" label hide from collection pages but still show on product pages. I also want to change the color of the label(the bounding box of it) on product pages. I've been digging through the liquid and am not sure how to do this. I'm using the Supply theme. Any help would be GREATLY appreciated! Thanks you!

 

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
241 8 39

Hi, Daniel!

Freddie here from the Shopify Support team, happy to help.

While I don't have expert coding knowledge myself to be able to help provide you with a tutorial on how to implement this into your store, I can let you know that seeing as the Supply theme is a Shopify supported theme, our Theme Support may be able to help make this change for you! If you are on a Shopify Basic plan or higher, and you're using one of our free themes from our Themes Store, you get 60 minutes of complimentary theme customization help from our Theme Support team! Just send in an email to support@shopify.com from the email address that you use to log into your account with, and you can expect to receive a status update within 2-4 business days.

You can find full details on this, right here.

Let me know if this helps! Hopefully we see some other developers/coding experts comment on this thread with other options as well, but if not, I hope that this option works for you. You can also reach out directly to a Shopify Expert with this request, to have them help implement this and any other advanced customization requests you may have.

Best regards,

Freddie
Shopify Support - support@shopify.com

Freddie | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
4 0 2

Wow thanks for the quick response! I didn't know about this option. I'm going to utilize this and see if i can get a solution. Thanks.

0 Likes
Highlighted
Tourist
4 0 2

I checked into the theme support help call. It doesn't cover "Customizing labels or badges for collection pages". Thanks either way though. I can find the badge in the liquid but I don't know what I need to add to tell it to not show on collection pages. If anybody can help me with the liquid tweak here that'd be wonderful.

0 Likes
Highlighted
Tourist
4 0 2

SOLVED! Ok, if anyone wants to know how to change wheather or not the "Sold Out" Label shows on the Collection page or customize it another way here it is: So the CSS sheet of Shopify is called theme.scss.liquid and its under Assets. On this page you can alter all the labels. So the Sold out label for the collection page and the product pages are two different things. Search the code (Control F or Cammand F) while on the theme.scss.liquid page. Look for the word "sold" and find this 

.sold-out .badge--sold-out {
  display: none;

I changed the word next to display to none and it makes the label invisible. I also wanted to change the color of the product page "Sold Out" label. There wasn't any code already set for it by the theme for me. I added this at the bottom. 

 

.btn.disabled {
    color: #ffffff;
    background-color: #003047; 
   }

 

Apparently the "add to cart" and "Sold out" labels on the product page are totally different things. They are calling the product page out of stock label a disabled button. This will surely affect all other "disabled buttons" as well.

 

To change what the buttons or labels say its in the "Edit Languages" menu. Search for the name of the label.

 

Hopefully this can help someone.

2 Likes
Tourist
4 0 0

I just ran into this annoyance and with no option in the Debut template (can not guarantee where in different ones) I dove into the code.  Turns out to be very simple:

 

Step 1 open Snippets > product-price.liquid

Step 2: delete line 43

Step 3: save

 

It is nice that shopify allows you to roll back to prior versions of code, so no worries about deleting the wrong line as long as you make a note somewhere of what FILE you did it in so you can always go back ;)

0 Likes