How can I enable a backorder button when inventory is zero?

[wallysplants]

Hi! 

I have the pipeline theme and have dynamic checkout enabled. I would like to enable a back order button, so when my inventory is zero the "Add to Cart" button becomes a "Backorder" button with a small text stating the time frame. I already know that i will need to go to the individual products and make sure they are enabled to sell past zero.

I found an application that can do this, but I'd rather install code myself and not pay monthly.

Can someone please tell me the necessary code and where to insert it?

Please do not ask for my website name. i have before and too many website developers began personally messaging my website store trying to sell their services, which was uncomfortable. 

[Ignelis]

Hello! It's great that you're looking to add this functionality to your store. I can definitely help you with the code you need to add.

To start with, you'll need to create a snippet in your Shopify theme where the backorder button code will live. Here are the steps:

1. In your Shopify admin, go to Online Store > Themes.
2. Click the "Actions" button for the theme you're using and select "Edit code" from the dropdown menu.
3. In the left-hand sidebar, click "Add a new snippet".
4. Name the snippet something like "backorder-button" and click "Create snippet".

Now that you have a snippet created, you can add the code for the backorder button. Here's an example of what the code could look like:

{% if product.available %}
  <form action="/cart/add" method="post">
    <button type="submit" class="btn">Add to cart</button>
  </form>
{% else %}
  <button class="btn">Backorder (Ships in 2-4 weeks)</button>
{% endif %}

This code checks if the product is available for purchase. If it is, the "Add to cart" button will be displayed. If it's not, the "Backorder" button will be displayed with a message stating when the product will be back in stock.

You'll need to replace "Ships in 2-4 weeks" with the actual timeframe for your backorder. You can also modify the HTML and CSS to match the look and feel of your store.

To add this code to your product pages, you'll need to find the code for the "Add to cart" button in your theme and replace it with the code for the backorder button. This will vary depending on your theme, but it's typically found in the "product.liquid" or "product-template.liquid" file.

I hope this helps! Let me know if you have any other questions.

[wallysplants]

Hi! It does not seem to be working. I created a snippet and added the code, but it does not change anything.

You said I need to add the code to the product pages? then why do i need to create a snippet?

Also, I have dynamic checkout enabled. Will this also make sure to change dynamic checkout? 

Thank you!

[wallysplants]

i have this code, is it somewhere here i should replace?

[wallysplants]

This is currently what my code says:

<!-- /snippets/product-buttons.liquid -->

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign buybutton_setting = block.settings.enable_payment_button -%}
{%- if product.selling_plan_groups.size > 0 -%}
{%- assign buybutton_setting = false -%}
{%- endif -%}

<product-form class="product__block__buttons" {{ block.shopify_attributes }}>
<div data-product-form-outer>
{%- form 'product', product, id: uniq_id, data-product-form: '', data-product-handle: product.handle -%}
{% comment %}
Automatically inserted by Shop Pay Installments theme updater
{% endcomment %}
{% unless settings.disable_autogenerated_payment_terms %}
{{ form | payment_terms }}
{% endunless %}
<div class="product__form__inner" data-form-inner>
<div class="product__submit" data-buttons-wrapper data-add-action-wrapper>
<div data-add-action-errors class="add-action-errors"></div>

{%- if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true -%}
{% assign is_preorder = true %}
{%- elsif product.tags contains '_preorder' -%}
{% assign is_preorder = true %}
{% endif %}

{%- assign button_text = 'products.product.add_to_cart' | t -%}
{%- if is_preorder -%}
{%- assign button_text = 'products.product.pre_order' | t -%}
{% comment %} This will add a line item property with 'Sale type: Pre-order' to preorder products {% endcomment %}
<input type="hidden" data-product-preorder name="properties[{{ 'products.product.sale_type' | t }}]" value="{{ 'products.product.pre_order' | t }}">
{%- endif -%}
{%- unless current_variant.available -%}
{%- assign button_text = 'products.product.sold_out' | t -%}
{%- endunless -%}

<div class="product__submit__buttons{% if product.has_only_default_variant %} product__submit__buttons--clear{% endif %}">
<button
type="submit"
name="add"
class="btn--outline btn--full btn--primary uppercase btn--add-to-cart"
data-add-to-cart
{% unless current_variant.available %} disabled="disabled" {% endunless %}>
<span class="btn-state-ready">
<span data-add-to-cart-text>
{{ button_text }}
</span>
<span class="cta__dot">•</span>
<span data-button-price>
{%- if settings.currency_code_enable -%}
{{ current_variant.price | money_with_currency }}
{%- else -%}
{{ current_variant.price | money }}
{%- endif -%}
</span>
</span>

<span class="btn-state-loading">
<svg height="18" width="18" class="svg-loader">
<circle r="7" cx="9" cy="9" />
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
</svg>
</span>

<span class="btn-state-complete">&nbsp;</span>
</button>

{%- if buybutton_setting -%}
<div class="product__submit__quick">
{{ form | payment_button }}
</div>
{%- endif -%}
</div>
</div>
</div>
{%- comment -%} The input with name="id" submits to cart {%- endcomment -%}
<input type="hidden" name="id" value="{{ current_variant.id }}">

<script data-product-json type="application/json">
{{ product | json }}
</script>
{%- endform -%}

[Bunnywabbit]

Hi! Did you happen to resolve this issue by any chance? If yes, Can you let me know how you did it?

[TCBLLC]

Did you ever get this figured out ?

[gabrielaGo]

Hi there,

I could figure out where to put the code. Remember that liquid and Shopify templates are structured by "blocks." So this nice dev explained how to create the block for the button add to cart or back order if the inventory is zero. For this, as he said, locate if the file is product.liquid or product-template in your theme and search for the add to cart submit button code like this:

<button type="submit" name="add"

                  {% unless current_variant.available %} aria-disabled="true"{% endunless %}

                  aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"

                  class="btn product-form__cart-submit{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"

                  {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}

                  data-add-to-cart>

                  <span data-add-to-cart-text>

                   {% if current_variant == blank %}

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

{% elsif current_variant.available %}

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

{% else %}

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

{% endif %}

                  </span>

                  <span class="hide" data-loader>

                    {% include 'icon-spinner' %}

                  </span>

                </button>

And because we created a snippet, I googled the right format to insert a snippet (not the code he shared because we already use it in the snippet file) we just need to tell the template to pull it:
{% render 'backorder-button' %}

So, you will replace the button code just for this line above. Save changes, and you should be able to see the button now:

Feliz Navidad🎅🏽

[amandaricordi]

Hi Gabriela!

Thanks for sharing this here and helping out. 🙂

I tried finding the "add to cart" code but I can't find on my theme. I'm currently using DAWN 13.0.1.

Can you help me please?

[lmtlsauto]

so whwere exactly does this need to go into the pipeline theme? I am trying to do this myself as my site offers backorders and needs to be able to distinguish in stock inventory vs backorders.