Add to cart / Back-order Button

Store Design
, , , ,

Topic summary

Goal: On a Flex (Out of the Sandbox) product page, show variant-level “Back Order – Ships in 2–4 Weeks” on the Add to Cart button when a selected color variant is out of stock, while still allowing checkout. Built‑in theme pre‑order works only at product level via collection tags, so it’s not suitable.

Key constraints and context:

  • Shopify doesn’t natively change button text per variant inventory.
  • CSWOOS = “Continue selling when out of stock”; must be enabled for backorder variants.
  • Code snippets (Liquid) are central to the solution.

Proposed approaches:

  1. App-based:

    • Early Bird (demo + free plan) to handle pre/back-orders with variant-level messaging, timelines, discounts, partial payments.
    • Alternative app: K1 PreOrder with variant rules and automatic CSWOOS management.

  2. Theme code customization:

    • Edit product form/button snippet (e.g., product__form.liquid) to condition on selected variant:
      • If variant.available is false or inventory_quantity <= 0 AND inventory_policy == ‘continue’, show “Back Order – Ships in 2–4 Weeks”.
    • Variant metafield option: add metafield (e.g., custom.back_order) and render its value as the button label when present.

Trade-offs: Manual maintenance across theme updates.

Status: No confirmed implementation yet; discussion remains open.

Summarized with AI on December 11. AI used: gpt-5.
1

I keep going around in circles. Please help!

—> Concerns the Product Page & I’m using the Flex-trending Theme from Out of the Sandbox.

We have a products that we keep 2 colours in stock, but other colours would be a 'Pre-order or Back order" with an additional lead time. All colour options are set up as variants.

Back Order Button

  • If a customer selects a variant colour that is out of stock I would like the “add to cart” button to change its text to display “Back Order - Ships in 2-4 Weeks”, but still allow the customer to check out.

If I tick the variants check-box to “keep selling when out of stock”, I still want the customer to be aware of the additional shipping time.

There is a pre-order option in this theme - however this is applied via collection tags and is applied to the whole product - not the individual variant - colours etc… so this will not work either. eh.

This theme has an email notification if out of stock (seen below in the code); but I want to continue to sell the variant instead with notification of additional shipping frames.

I think this is where I need to edit the code in the “product.liquid” but I cannot work it out.

{%- elsif block.type == ‘form’ -%}
{% comment %} Purchase form {% endcomment %}
{% if section_onboarding %}

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

{% comment %} Notify form {% endcomment %}
{% render ‘product__notify-me-form’, product: product %}

{% comment %} Product form {% endcomment %}
{% unless collection_handles contains ‘coming-soon’ %}
{%
render ‘product__form’,
context: ‘product’,
product: product,
sold_out_options: sold_out_options,
selected_variant: selected_variant,
show_payment_button: block.settings.show_payment_button,
collection_handles: collection_handles
%}
{% endunless %}

{% endif %}

Hoping someone can help me out - fingers crossed. Thank you!

2

Hey there!

I think you might be best off considering using an app to handle this level of customization.

Check out my example store here and let me know if this is what you’re trying to achieve? (Password is “demo”)

We just launched a new pre-order/back-order app called Early Bird which makes setting this up pretty simple, and gives you a bunch of options around messaging, labels, timelines, discounts, partial payments etc. You seem like the perfect fit for this type of app.

We have a 100% free plan if you wanted to give it a try on one of your products and see how it works. I’d be happy to guide you through setup and answer any questions too if you’d like.

Hope we can help!

3

You can add a metafield to a product variant, for example custom.back_order with type “Single line text” and then you can modify liquid code

<button name=“add” class=“action_button button button–add-to-cart add_to_cart” data-label={{ add_to_cart_label | json }}>

{% if product.selected_variant.metafields.custom.back_order != blank %} {{ product.selected_variant.metafields.custom.back_order }} {% else %}

{{ ‘products.product.add_to_cart’ | t }}

4

Hey,

Shopify doesn’t natively support automatic button text changes per variant inventory. For your Flex-trending Theme, you’ll need to edit the theme code:

Go to Online Store → Themes → Actions → Edit code. Find your product form snippet (likely product__form.liquid or add-to-cart-button.liquid) and add Liquid conditionals checking variant.available and variant.inventory_quantity <= 0 with variant.inventory_policy == 'continue'. When true, display “Back Order - Ships in 2-4 Weeks”. Enable Continue selling when out of stock for backorder variants under Products → [Product] → Variants → Inventory. Shopify’s customization guide has more details.

Trade-offs: Requires manual coding for each button instance and maintenance during theme updates/switches.

Alternative: Apps like K1 PreOrder (I’m the founder) automate this with variant-level rules, custom messaging, and automatic CSWOOS management. Here is K1 PreOrder listing if relevant.

Happy to help with theme customization if needed.

Best regards,
Yauheni