Add Pre-Order Button and Note [Multiple variants product] - Shopify

Add Pre-Order Button and Note [Multiple variants product] - Shopify

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible with all Shopify 2.0 FREE Themes.

If you have different Shopify theme and would love to add the preorder button function, please contact me for price quote. 

Add a pre-order button to your Shopify 2.0 FREE themes. This only change the button text if the product variant quantity is equal to zero. Note: I said variant, which means if a certain product variant has a quantity of more than zero, you will not see the change. You can also add a pre-order note to make sure your customer is aware what they are buying.

Before editing the code, make sure you have the "Track quantity", and "Continue selling when out of stock" checked in the product you want to have a pre-order.

shopify product

What you are buying:

  • Change the button to whatever text you want
  • Add a pre-order note with dynamic placement
  • Use a metafield for pre-order note to be dynamic

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

To start: 

1. Go to Code Editor by clicking Online store > Themes > Actions > Edit code.

2. Open the main-product.liquid under Section folder. Then, paste the code below.

3. Find this code here "{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}" and the {% endform %. Replace the code with the code below. 

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>

<div class="variant_available_select hidden">
<select id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option data-available-variant="{{ variant.id }}" value="{{ variant.id }}"
data-preorder-btn="{{block.settings.preorder_btn}}"
data-available="{{ variant.available }}"
data-preorder="{% if variant.available and variant.inventory_quantity <= 0 %}true{% else %}false{% endif %}">
{{- variant.inventory_quantity -}}
</option>
{%- endfor -%}
</select>
</div>

<div class="product-form__buttons">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{%- if product.selected_or_first_available_variant.inventory_quantity > 0 -%}
{{ 'products.product.add_to_cart' | t }}
{%- else - %}
{{block.settings.preorder_btn}}
{%- endif -%}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- if block.settings.show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}

 

 4. Before the " {%- when 'buy_buttons' -%}", paste the code below.

{% when 'preorder_note' %}
<div class="preorder-message {% if product.selected_or_first_available_variant.inventory_quantity <= 0 %}show_note{% endif %}">
{{block.settings.preorder}}
</div>
<style>
.preorder-message {
display: none
}

.show_note {
display: block !important;
}
</style>

 5. At the schema section, under the "type": "buy_buttons", you will see the "type": "checkbox", after the closing bracket place the code below. See video for more information

,{
"type": "text",
"id": "preorder_btn",
"label": "Pre-order button label",
"default": "Pre-order now"
}
]
},
{
"type": "preorder_note",
"name": "preorder note",
"settings": [
{
"type": "richtext",
"id": "preorder",
"default": "<p>Please allow us 5-7 days to ship the item.</p>",
"label": "Pre-order note"
}

 

6. Go to Asset folder, open the global.js file, and find the "toggleAddButton" code, replace the   toggleAddButton code with the code below. 

toggleAddButton(disable = true, text, modifyClass = true) {
const productForm = document.getElementById(`product-form-${this.dataset.section}`);

if (!productForm) return;
const addButton = productForm.querySelector('[name="add"]');
const addButtonText = productForm.querySelector('[name="add"] > span');
const variantQuantity = productForm.querySelector(`[data-available-variant="${this.currentVariant.id}"]`);

if (!addButton) return;

if (disable) {
addButton.setAttribute('disabled', 'disabled');
if (text) addButtonText.textContent = text;
} else {
addButton.removeAttribute('disabled');
addButtonText.textContent = window.variantStrings.addToCart;
}

if(variantQuantity.dataset.preorder == "true") {
addButtonText.textContent = variantQuantity.dataset.preorderBtn;
if(!document.querySelector('.preorder-message')) return;
document.querySelector('.preorder-message').classList.add('show_note');
if(!productForm.querySelector('.shopify-payment-button')) return;
productForm.querySelector('.shopify-payment-button').classList.add('hidden');
} else {
if(!document.querySelector('.shopify-payment-button')) return;
document.querySelector('.preorder-message').classList.remove('show_note');
if(!productForm.querySelector('.shopify-payment-button')) return;
productForm.querySelector('.shopify-payment-button').classList.remove('hidden');
}

if (!modifyClass) return;
}

That is it (",)

Copied!
Back to blog

2 comments

Hi @AD,

You probably had error on pasting. Please contact me using “Chat with us”

Made4Uo

Hiya, it says “Invalid JSON in tag ‘schema’” after pasting the schema bit, please help!

AD

Leave a comment