Changing Background Color For SOLD OUT Button

Solved
Roxee541
Tourist
15 0 2

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

0 Likes
bdowling
Explorer
66 13 34

This is an 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

 

 

0 Likes
LitExtension
Shopify Partner
1200 154 215

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;

}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Roxee541
Tourist
15 0 2

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