Changing Background Color For SOLD OUT Button

[Roxee541]

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:
<div class="product-add">
{% if section.settings.show_quantity %}
<label for="quantity">{{ 'products.product.quantity' | t }}</label>
<input min="1" type="number" id="quantity" name="quantity" value="1" />
{% endif %}
<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />
{% if section.settings.show_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>

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

[bdowling · Accepted solution]

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:

<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %}" value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />

and add this in the quotations for "class="..."":

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

so that line looks like this now:

<input type="submit" name="button" class="add clearfix AddtoCart{% if section.settings.show_payment_button %} secondary-button{% endif %} {% unless current_variant.available  %} sold-out-background{% endunless %} " value="{{ call_to_action }}" {% unless current_variant.available %}disabled{% endunless %} />

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

[Roxee541]

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

[socialgracesvin]

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!

[LitExtension]

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;

}