Changing Background Color For SOLD OUT Button

Technical Q&A
1

Hello Shopify People,

I am trying to change the background color for our SOLD OUT button. I have searched the Shopify Community, and although this questions has been posted before, it seems a different answer for different themes.

I am using the Mr. Parker theme. There are no settings in the Theme Settings for this, only for the main button color.

The theme uses a product.form.liquid to bring in the Add To Cart & Sold Our buttons on product pages. I won’t post all the form code here, only the button code from the form:

Very top of form:

{% assign call_to_action = ‘products.product.add_to_cart’ | t %}

{% assign current_variant = product.selected_or_first_available_variant %}

{% unless current_variant.available %}
{% assign call_to_action = ‘products.product.sold_out’ | t %}
{% else %}
{% endunless %}

Bottom of form:

{% if section.settings.show_quantity %} {{ 'products.product.quantity' | t }} {% endif %} {% if section.settings.show_payment_button %} {{ form | payment_button }} {% endif %}

I tried wrapping a span class around: {% assign call_to_action = ‘products.product.sold_out’ | t %}, and using CSS but did not do anything.

Any help would be greatly appreciated!

Thanks in advance,

Todd

2

Hi, if you share a link I can give a more accurate answer.

In the meantime, you can try this:

Step 1:

Add this anywhere you’d like in the “theme.scss.liquid” file and change the hex color to your choice:

.sold-out-background {
  background-color: #ffffff; // change background color here
}

Step 2:

Find this line in the code you shared:

and add this in the quotations for “class=”…“”:

{% unless current_variant.available  %} sold-out-background{% endunless %}

so that line looks like this now:

That may allow you to change the background color in the “sold-out-button” css in “theme.scss.liquid”. I hope this helps

3

Hi @Roxee541 ,

Please follow the steps:

  • Step 1: Go to Bottom of form and add code in class: {% unless current_variant.available %}button-sold_out{% endunless %} , https://i.imgur.com/krkXVs6.png

  • Step 2: Go to Assets > stylesheet.css and paste this at the bottom of the file:

.button-sold_out{

color: #d6d6d6 !important;

background: #000000 !important;

}

4

Hi bdowling,

You did not need any link, your solution worked fine! (Although in the future, I will leave a link, forgot to on this thread).

Thanks so much for your help, really appreciate it!

Thanks,

Todd

1 Like
5

I am having a similar issue and cannot change the Sold Out button with coding. I’m using the Taste Theme by Shopify. I’m wanting to switch the Sold Out button to a Black button with White letters as opposed to a white button with black letters. Any help would be much appreciated. Thanks!

I’ve also screenshot the issue. Thanks!