Pre order ship dates + buttons

[ssartori]

What’s your question? What do you want to achieve?

I have pre-order items that ship at later dates
I would like suggestions on how to better inform my customer about their pre-order purchase
Is it possible to

1. create manual shipping dates for items
2. create pre-order labels for the product image + add pre-order button (instead of buy now or add to cart)

Ex: I already add PRE-ORDER to title and the shipping date in the first line of the product description but this isn’t clear enough; customers are still getting confused bc ship date at checkout shows as standard

(Optional) Store URL

santamaria.love

[tim_tairli]

You may use metafields to keep shipping date for each product/variant.

Then you may add a block to the product page to display this date.

It’s also possible to add this date as a line-item property when adding to cart and it will show in Cart/Checkout/Order data/Notification e-mails.

This would be the easiest to implement.

Let me have a look at other questions and I will return with more detailed solution.

[tim_tairli]

Ok.

---

Define new variant metafield, call it Available Date and make it type “Date”.
Namesapce and key would most likely be custom.available_date.

Set this metafield accordingly on your product variants.

Usually, preorder is set up with “Inventory tracked” and “Continue selling when out of stock” are both checked and actual inventory level is 0 or less.

---

Now go to your product page in “Edit theme” and add a “Custom liquid” block in the “Product” section, position it above the cart button.

Paste this code:

{% # the ID parameter must use uniq on the page %}
<variant-data id="preorder-{{section.id}}">
  {% liquid
    assign product_form_id = "BuyButtons-ProductForm-" | append: section.id

    assign variant = closest.product.selected_or_first_available_variant
    assign message = false
  %}
  {% if variant.inventory_quantity <= 0 and variant.inventory_policy == "continue" %}
    {% capture message -%}
This item will be shipped
{%- if variant.metafields.custom.available_date %}
  on {{ variant.metafields.custom.available_date.value }}
{%- else %}
  when available.
{%- endif -%}
    {%- endcapture -%}
  {%- endif -%}

  {%- if message -%}
    <textarea
      class="preorder-message"
      form={{ product_form_id }}
      readonly
      type="text"
      name="properties[Preorder]"
    >
      {{- message -}}
    </textarea>

  {%- endif -%}
</variant-data>

<script>
  if (!customElements.get('variant-data')) {
    class VariantData extends HTMLElement {
      constructor() { super(); }
      connectedCallback(){
        document.addEventListener('variant:update', ({detail}) => {
          const newContent = detail.data?.html?.getElementById(this.id)?.innerHTML;
          if (newContent) this.innerHTML = newContent;
        });
      }
    }
    customElements.define('variant-data', VariantData )
  };
</script>
<style>
  textarea.preorder-message {
  width: 100%;
  resize: none;
  border: none;
  overflow:hidden;
}
</style>
</style>

If variant has inventory available, the code will show nothing.

When variant is changed to the one which has no available inventory, but has “Continue selling when out of stock”, it will output the message, which will be carried to cart and checkout.
If metafields is set, it will be used, otherwise general text is output.