Add to cart / Back-order Button

[Gaffoolery]

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 %}
<div class="product-form-container has-padding-top">
<div class="purchase-details">
<div class="purchase-details__buttons purchase-details__spb--false">
<button name="add" class="action_button button button--add-to-cart add_to_cart" data-label={{ add_to_cart_label | json }}><span class="text">{{ 'products.product.add_to_cart' | t }}</span></button>

</div>
</div>
</div>
{% else %}
<div class="product-form-container has-padding-top">

{% 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 %}
</div>
{% endif %}

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

[JayAdra]

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!

[DanCodes]

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 }}>

<span class="text">{% if product.selected_variant.metafields.custom.back_order != blank %} {{ product.selected_variant.metafields.custom.back_order }} {% else %}

 {{ 'products.product.add_to_cart' | t }}</span></button>