Indicating "Sold Out" in Simple Theme

New Member
5 0 0

Hi,

New to Shopify and trying to start customizing my store. I'm currently using the Simple theme, and I'd like to somehow indicate that an item is out of stock. The individual product page shows "Sold Out" instead of the "Add to Cart" button, but I would find this frustrating as a customer. I'd want to know the item was sold out from its collection listing.

I've seen some tutorials, but they seem pretty specific to the theme. I could probably really use a primer on the basic organization of the site code. For example, how is theme.liquid related to collections.liquid, and product.liquid? Do I need to be modifying collections.liquid, product.liquid, or something else?

I'd like to start out as simply as possible and just replace the price with "Out of Stock" before a customer clicks through to individual listings.

Thanks in advance!

0 Likes
Tourist
25 0 1

Hi Derek,

Me too. There is a 'sold out' overlay graphic banner that you can implement to appear on your product photos on the simple theme, have you tried that makes it quite clear the item is sold. I don't know how to get rid of the price on sold items would like to know also. 

Re: learning the rest of the stuff  I am just ploughing through all the help documentation and videos and gradually some of it is starting to sink in.

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
7 0 1

Hey Guys,

 

We have a support doc for just this : http://docs.shopify.com/support/your-store/products/how-to-add-a-sold-out-overlay-to-product-images

 

It does vary from theme to theme and in the linked example you need to modify the Collections.liquid file. In the Simple theme however, the part of the code that loops through each product to display them in the grid is called product-grid-item.liquid and is in the snippets folder

colelctions.liquid

Other themes may do the same thing, but the snippet maybe called product-loop.liquid. Same principles apply. 

 

As for how theme.liquid relates, Theme.liquid is used on every single page. It has the main html stuff than every page needs to work and includes things like scripts, meta data, the header and footer of the theme. Every other page gets stuck into the the theme.liquid file. So for the collections page, you are going to have product-grid-item is stuck in the middle of collection.liquid, and then that collection.liquid file is then stuck into theme.liquid. Check out http://docs.shopify.com/themes/the-basics/build-your-theme/structure for more details.

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

A Sold Out overlay was added a couple of weeks ago to the Simple theme. You can re-install the theme to get it. The files affected by that change were /assets/themes.scss.liquid and snippets/product-grid-item.liquid.

In the stylesheet, this was added:

section.product-grid div.columns a .sold-out {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.50);
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  height: 45px;
  min-height: 45px !important;
  line-height: 45px;
  position: absolute;
  z-index: 3;
  bottom: 20%;
  left: 0;
}

New product-grid-item.liquid:

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}{% assign on_sale = true %}{% endif %}
<div class="four columns {% cycle 'alpha','','omega' %}">
  <a href="{{ product.url | within: collection }}" id="product-{{ forloop.index }}" {% unless template == "product" %}class="animated fadeInUpBig"{% endunless %}>
    {% if on_sale  %}<div class="sale">Sale</div>{% endif %}
    {% unless product.available %}<div class="sold-out">Sold Out</div>{% endunless %}
    <img src="{{ product.featured_image.src | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" class="product" />
    <h3>{{ product.title }}</h3>
    <h4>{% if product.price_varies %}<small>From</small> {% endif %}{{ product.price | money }} {% if on_sale == true %}<del>{{ product.compare_at_price | money }}</del>{% endif %}</h4>
  </a>
  <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% cycle '', '', '<br class="clear">' %}

 

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

Thanks Jon and Caroline.  I've replied to Jon in a follow-up email.

Caroline, what's the best practice for updating your theme? If I reinstall it, it will wipe out any changes I've made. Should I just change the two files you indicated?

When I do so, I get the result in the attached screenshot. Is this the way it's supposed to work? That doesn't look like an overlay to me. It just looks like the image has been replaced by text (which doesn't seem like a great solution). I'd like the customer to see the image/text/price of the product if possible, but also an indicator that it's sold out. It's entirely possible I did something wrong...I'm new to this.

Thanks for any help! 

0 Likes
Shopify Staff
Shopify Staff
5704 0 287

The image you are showing me looks like you have not added the CSS to your stylesheet.

The best is to update both files.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

Yep, thought I had updated that file properly. Guess I hadn't. Looks good now.

Thanks!

0 Likes
New Member
1 0 0

I have the most recent theme of Simple-Theme but there is no overlay for sold out (like in some other themes). I have tried to sort ths for some time now and I really need help. it would be amazing.

0 Likes