Minimal Theme - Change 'Sale' Sticker to 'Sold Out'

New Member
3 0 0

Hi everyone!

I've just installed the new minimal theme to my site. Everything works fine except for one thing.

Please refer to this page: http://www.missclover.com/collections/all

I'd like to change the black circle sticker on the top right of all the items on sale to 'Sold Out' if they're sold out. Currently, even if they're sold out... it still says 'Sale'. Is there any way to change around that?

I've been digging around the forum but haven't been able to find any solution to this. 

Any help would be much appreciated!

Thanks!

0 Likes
Astronaut
1925 0 379

Edit HTML/CSS and open Snippets/product-loop.liquid.  Look for the block of code below.

  {% if product.price_min < product.compare_at_price_min %}
    {% if settings.show_sale_circle %}
    <span class="circle sale">{{ 'collections.general.sale' | t }}</span>
    {% endif %}
  {% endif %}

 Change it to:

  {% if product.available == false %}
    <span class="circle sold-out">Sold Out</span>
  {% elsif product.price_min < product.compare_at_price_min %}
    {% if settings.show_sale_circle %}
    <span class="circle sale">{{ 'collections.general.sale' | t }}</span>
    {% endif %}
  {% endif %}

Also add the following to the end of your CSS file (styles.scss).  Of course you can change the style to your liking.

.product .circle.sold-out, #product .circle.sold-out { font-family: helvetica; background-color: {{ settings.sale_bg_color }}; opacity: .9; filter:alpha(opacity=90); -webkit-font-smoothing: subpixel-antialiased; }

 I hope this helps.

0 Likes
New Member
3 0 0

Hi Alex,

Thanks for your reply!

I replaced the code as above and everything got messed up. The sold out items became on sale, and the Sale items became sold out. You can have a look at what's happening here: http://postimg.org/image/8f3kz9h3l/

Is there any way to fix this? :(

 

 

0 Likes
Astronaut
1925 0 379

I missed a very important part of the code.  Sorry about that!

Try this instead: (I also edited my previous post.)

  {% if product.available == false %}
    <span class="circle sold-out">Sold Out</span>
  {% elsif product.price_min < product.compare_at_price_min %}
    {% if settings.show_sale_circle %}
    <span class="circle sale">{{ 'collections.general.sale' | t }}</span>
    {% endif %}
  {% endif %}

1 Like
New Member
3 0 0

It's working great now. Thank you so much Alex! :)

0 Likes
Highlighted
Excursionist
34 0 6

Hi Alex. This Code works really great! Can you tell me how to change the background of the new "sold out" circles to say a red? so its not the same color as the "sale" products that i have in stock. Thanks!

0 Likes
Astronaut
1925 0 379

You'll need to edit the CSS.  In my previous posts, some CSS was added to the end of styles.scss.  Change the background-color property.  For example, you may end up with:

.product .circle.sold-out, #product .circle.sold-out { font-family: helvetica; background-color: red; opacity: .9; filter:alpha(opacity=90); -webkit-font-smoothing: subpixel-antialiased; }

Feel free to make any other style changes here.

0 Likes