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.
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:
In your Shopify admin, go to Online Store > Themes.
Click the “Actions” button for the theme you’re using and select “Edit code” from the dropdown menu.
In the left-hand sidebar, click “Add a new snippet”.
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 %}
{% else %}
{% 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.
{%- 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 %}
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>
{% 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 %}
{% include ‘icon-spinner’ %}
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:
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.
