Re: Product pages - Allow pre-orders for products
If you have products that are out of stock, you can sell them as pre-orders. This is done by creating an alternate product template, and editing your payment settings. You can also use this customization to continue selling products that are on back-order.
Note: This customization isn't compatible with dynamic checkout buttons. If your theme supports dynamic checkout, then prevent the buttons from showing by following the steps to hide dynamic checkout buttons on product pages.
Sectioned and non-sectioned themes
The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.
If you are using a sectioned theme, then click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.
Hi! Yes i solved this today!!
(Hat tip to @John_G2 for the inspiration to loop through the variants for their policy and quantity in liquid INSIDE the JS)
You can check the example on my development shop:
https://aimhuge-dev-dec20.myshopify.com/products/product-preorder
Password is 123456 (check the catalog → product-preorder)
How to do it?!
1. Followed the tutorial linked on the first page of this thread to create a new template option for products that allow preorder
2. BUT skip this part of the tutorial
3) Replace the product strings bit of script in product.pre-order.liquid
<script>
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
sold_out: {{ 'products.product.sold_out' | t | json }}
}
</script>
with the following:
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
// | t filter translates from strings files
// there is no Pre-order string my default, so we add it without the t filter
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }},
sold_out: {{ 'products.product.sold_out' | t | json }},
preorder: {{ 'Pre-order' | json }}
}
// inventory quantity and policy were depercated from liquid
// https://community.shopify.com/c/API-Announcements/Deprecated-Notice-inventory-quantity-and-inventory-policy-fields/m-p/419770
// but can be accessed by reading the product into a variable
// and backfilling the inventory quanity & policy into the product
const product = {{ product | json}}
let v;
{% for variant in product.variants %}
v = getVariantById({{ variant.id}})
v.inventory_quantity = {{ variant.inventory_quantity | json }}
v.inventory_policy = {{ variant.inventory_policy | json }}
{% endfor %}
// then we just change the text of the CTA when the select is changed
document.querySelector('.single-option-selector').onchange = ()=>{
const selectEl = document.querySelector('[name="id"]') // the select
const cta = document.querySelector('.product-form__cart-submit') // the CTA
setTimeout(()=>{ // requires a little delay for some reason
const [options] = getSelectedOptions(selectEl)
const variant = getVariantById(parseInt(options.value))
if(variant.inventory_quantity > 0 ){
cta.textContent = theme.productStrings.addToCart
} else if( variant.inventory_policy === "continue" ){
cta.textContent = theme.productStrings.preorder
} else {
cta.textContent = theme.productStrings.sold_out
}
},5)
};
// fire the event on page load (check if it's pre-order)
document.querySelector('.single-option-selector').onchange()
// helper functions
function getVariantById(id){
const [variant] = product.variants.filter( (v) => v.id === id )
return variant
}
function getSelectedOptions(selectEl) {
const result = [];
const options = selectEl.getElementsByTagName('option');
for (let i = 0; i < options.length; i++) {
if (options[i].selected)
result.push(options[i]);
};
return result;
}
</script>
CC @Jennifer42
Hi @Alex-Miller ,
Thank you for providing the tutorial for adding pre-order function for variants! I'm using debut theme (Shop Link) and was able to follow the steps until step 3 as I have a much longer code than yours with the "theme.productStrings" part of product.pre-order.liquid and I'm not sure which part should be replaced. I attached the full script of my product.pre-order.liquid below. Grateful for your advice the steps forward, please. Thanks in advance!
Yours:
Mine:
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}
{% section 'product-pre-order-template' %}
{% section 'product-recommendations' %}
<div id="backToCollection"></div>
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'Pre-order' | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
};
if(sessionStorage.backToCollection) {
theme.backToCollection = {};
theme.backToCollection.collection = JSON.parse(sessionStorage.backToCollection);
var productCollections = {{ product.collections | json }};
var showCollection = false;
if (productCollections) {
productCollections.forEach(function(collection) {
if (collection.title === theme.backToCollection.collection.title) {
showCollection = true;
}
});
}
if(showCollection) {
var backToCollectionHTML = '<div class="text-center return-link-wrapper page-width"><a href="' + theme.backToCollection.collection.link + '" class="btn btn--secondary btn--has-icon-before">{% include 'icon-arrow-left' %}{{ 'products.product.back_to_collection' | t }} ' + theme.backToCollection.collection.title + '</a></div>';
var backToCollectionContainer = document.getElementById('backToCollection');
backToCollectionContainer.insertAdjacentHTML('afterbegin', backToCollectionHTML);
}
}
</script>
{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_media -%}
{%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
Leatheraholicx
Great instructions! Very easy to follow! I did everything exactly as you said, but I'm getting this error on most of my items. Do you have any insight on this "Translation missing"?
You'll see it worked for the Pebble color in the pants, but not for the white.
Thank you for the tip! I managed to do the pre-order and get it to work. However I would like to add a message in the section to inform the customer about delayed shipping.
May I know how I should do that?
Non-sectioned themes
Authorizing payment for pre-orders
When selling products as pre-orders, you should not capture payment immediately unless the customer is aware that they are purchasing something that is not currently available. Instead, you can authorize a payment without capturing the funds immediately. Authorizing a payment at the time of checkout allows you to capture the funds at a later date, when the product is available and you are ready to fulfill the order.
Note: If you communicate to your customers that you are charging them in advance for an item that will ship at a later date, then you can capture funds immediately for a pre-order product.
- From your Shopify admin, go to Settings > Payment providers.
- Scroll down to find the Payment authorization section.
- Select Manually capture payment for orders:
- Click Save.
Caution: Authorization periods expire after a certain period of time. After an authorization expires, you may no longer legally capture payment for that order. Shopify Payments has an authorization period of 7 days. To authorize payments for a longer period, you must use a third-party payment gateway.
Creating a pre-order product page template
To change the Add to cart button text for your pre-order products, you must create a new product template.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Templates directory, click Add a new template.
- From the drop-down menu, select product, and name the template
pre-order: - Click Create template. Your new
product.pre-order.liquidtemplate will open in the code editor. - Find and replace the Add to cart button text.
- Look for this code:
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
Replace it with:
<span data-add-to-cart-text>
{{ 'Pre-order' | json | remove: '"' }}
</span>
In the same file, look for a <script> tag that contains this line of code:
addToCart: {{ 'products.product.add_to_cart' | t | json }},
Replace it with:
addToCart: {{ 'Pre-order' | json }},
Every theme is different, and the code used for the Add to cart button text may vary. If you replace instances ofproducts.product.add_to_cartwithPre-order(leaving all other punctuation intact), then your Add to cart button text should change to read Pre-order instead.
Note: If you can't find the above lines of code, then they might be found in your theme.liquid file instead. - Click Save.
Assigning the template to a product
- From your Shopify admin, go to Products > All products.
- Click the name of the product you want to make available for pre-order.
- In the Theme templates sidebar section, change product to product.pre-order:
- Click Save.
Inventory levels
If you are tracking inventory for a product, then you might want to allow customers to purchase pre-order products even if they have an inventory amount of 0.
To edit the inventory settings for a product:
- From your Shopify admin, go to Products > All products.
- Click the name of the product you want to make available for pre-order.
- Click Edit next to the first variant:
- Check Allow customers to purchase this product when it's out of stock:
- Click Save.
Note: This setting is available for each variant, so you must change the setting for each one that you would like to be available for pre-order. You can edit all the variants of a product at the same time by using bulk editing.
Hi,
This worked for me, except that now it made the order text boxes wider, thus making the product image smaller. How can I get the layout back to how it was (red shirt), with the Pre-Order changes? See images below
I can't seem to find the Themes Templates sidebar section. I followed the instructions in 1 and 2, but see no reference to Theme Templates on the product page.
Where is this?
Thanks.
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024