New Shopify Certification now available: Liquid Storefronts for Theme Developers

How Do I add a backorder

18 1 5



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. 

Replies 6 (6)
Shopify Partner
123 15 22

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>
{% 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.

Have a nice day ƪ(˘⌣˘)ʃ
Hire me!
WhatsApp: +37062284670
18 1 5

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!

18 1 5

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

Screenshot 2023-03-12 at 7.01.11 PM.png

18 1 5






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 %}">
class="btn--outline btn--full btn--primary uppercase btn--add-to-cart"
{% unless current_variant.available %} disabled="disabled" {% endunless %}>
<span class="btn-state-ready">
<span data-add-to-cart-text>
{{ button_text }}
<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 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" />

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

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

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

1 0 0

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

1 0 0

Did you ever get this figured out ?