Removing the Sold Out icon

New Member
4 0 0

Hey everyone, how would I remove the "Sold Out" icon on an item that has zero invetory? Furthermore, would it be possible to remove the Add to Cart button as well?

 

Thank you!

0 Likes
Shopify Staff
Shopify Staff
35 0 4

Hi  Bryan,


I am Ryan from the Shopify Support team. You can Temporarily hide your add to cart buttons  by following this document. This will hide the add to cart button for all of your products. If you are trying to do this for a select few products you can create a new product.liquid template. This can be found in the Admin under Online Store > Themes > the three dot ... button > Edit HTML/ CSS. On the left side there will be a blue link "Add a new template" Which will allow you to create alternative liquid templates. Here you can add an additional product.liquid template with an alternate name such as product.hidecart.liquid. Once this has been created you can comment out the cart button. To make sure the products you would like to have the cart button hidden on you will go in to each product in the Admin and change the theme template the product is using. I have an screenshot you can refer to.

As for removing the Sold out icon this would also have to be commented out on the product.liquid templates as well. Or you could allow for overselling of this product. In the Admin click on the Products tab, and find the product(s) you would like to have the Sold Out Icon removed from. If you check the box "Allow customers to purchase this product when it's out of stock" The product(s) will still have the inventory tracked but will now allow for overselling effectively removing the Sold Out icon specifically for said product(s).

Hope this helps :P

Ryan

Shopify Support.

0 Likes
New Member
6 0 0

/deleted

0 Likes
New Member
4 0 0

Does this fix still work as I'm not having much luck with it?

0 Likes
New Member
4 0 0
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

{% if collection %}
  <div class="text-center return-link-wrapper page-width">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ shop.url | append: product.url | json }},
  {%- if product.featured_image -%}
    {%- assign image_size = product.featured_image.width | append: 'x' -%}
    "image": [
      {{ product.featured_image.src | img_url: image_size | prepend: "https:" | json }}
    ],
  {%- endif -%}
  "description": {{ product.description | strip_html | json }},
  {%- if current_variant.sku != blank -%}
    "sku": {{ current_variant.sku | json }},
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": {{ product.vendor | json }}
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>

Where in the codes needs to be edited out to remove the "Sold Out Box"? I've done what I thought and it didn't work.

0 Likes