What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Making a Product Temporarily Unavailable

Making a Product Temporarily Unavailable

LisaWommack
Excursionist
42 2 27

Hello,

I need to be able to mark certain products as "contact me" or "temporarily out of stock" and disable the ability to add them to the cart. I have some paintings in art exhibitions and I'd like to give visitors to the site a chance to put down a deposit in case it doesn't sell in the show without prematurely showing it is sold when I change availability to 0. I'd like to do this without adding another app. Any ideas?

Replies 5 (5)

Liam
Community Manager
3108 344 895

Hi LisaWommack,

 

There's a couple ways to replace the buy button on select product pages with a contact link by editing the code of your theme instead of using an app. One approach would be to add a product tag to these certain products and then edit the product theme file to add a condition that will display a specific message in place of the buy button when a product contains that tag. 

 

Where exactly you make this edit depends on the theme that you're using, for example on the Dawn theme, the code that displays the buy button is in the `main-product.liquid` section, and looks something like:

 

{%- when 'buy_buttons' -%}
  {%- render 'buy-buttons' ... -%}

 

You'd want to create a new condition based on the product tag you've added, eg:

 

{%- when 'buy_buttons' -%}
  {% if product.tags contains 'special' %}
    <p>Temporarily unavailable <a href="mailto:liam@shopify.com">email me</a> for details</p>
  {% else %}
    {%- render 'buy-buttons' ... -%}
  {% endif %}

Then a product that has the "special" tag will display the custom message instead of the buy button:

 

Also, you might also want to change the product inventory settings to "Continue selling when out of stock" if you want to set availability to 0 without it being marked as "Sold out" on the product page. 

 

Remember to duplicate your theme and make edits to an unpublished version of your theme to prevent any changes or errors on your live store. 

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

LisaWommack
Excursionist
42 2 27

Thanks so much, Liam. This is super helpful. I'd like to try it before I accept it as a solution. It may be this weekend, but I'll definitely update on the progress. I appreciate you!

LisaWommack
Excursionist
42 2 27

Hi Liam,

I'm just now working on this. I'm using the Studio theme and the only place render buy_button shows up in a search is in Snippets: buy_button.liquid.

{% comment %}
Renders product buy-buttons.
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} product form id.
- section_id: {String} id of section to which this snippet belongs.
- show_pickup_availability:: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

Usage:
{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, show_pickup_availability: true %}
{% endcomment %}

 

I tried adding the suggested code and it produced the wavy red lines underneath, so I'm guessing I haven't put it on the right line. I feel like it should go in this area but not sure: 

<div class="product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}

Any direction you can provide would be greatly appreciated!

LisaWommack
Excursionist
42 2 27

Hello All. I'm still looking for answers on this if anyone has a suggestion.

 

Thanks -

bulogyx
Tourist
3 0 1

I successfully implemented Liam's suggestion... although the theme code has changed a bit since then. I'm using Dawn theme. Note the line numbers below reflect Dawn theme as it is today.

 

In buy_button.liquid:

 

There are three lines (58,83,88) where there is an if statement checking for availability. They look like this:

{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}

 

The first thing to do is add a third criteria to each of those if statement lines to check for a special tag. Mine now looks like this:

{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout or product.tags contains 'unavailable' -%}

 

In my product, I then add a tag 'unavailable' and that will disable the cart and buy it now buttons and change the words on the cart button to "sold out." If you want to change those words to something else, after the if statement (line 88), change this line:

{{ 'products.product.sold_out' | t }}

to be what you want. Mine looks like this:

<p> Temporarily unavailable. Contact us for more information.</p>

 

Don't mess with the if statements that are inside {%- liquid block at the top. Look for if statement lines which begin with

{%- if

Your mileage may vary in other themes. I haven't hunted town the sold out badge code.

 

I hope that helps. It's odd that available/unavailable used to be setting in the product that has gone away. I don't want to remove the products from view, just prevent orders while supply becomes available... without having to pretend to track inventory on manual dropship items.

 

-Barb