Product pages - Allow pre-orders for products

Alex-Miller
Excursionist
18 2 4
After you create the new page template you just change the templates on products that may go out of stock that you wish to support preorder, and mark the product “continue selling when out of stock”
 
When out of stock that will be indicated on the page as preorder. 
 
I suggest you try it with a test product before implement site wide. 
 
You can ping me directly if you need any help
AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
0 Likes
ClarkL
New Member
1 0 0

did you ever get an answer to this? 

0 Likes
roseblack
New Member
1 0 0

I got this to work using some of the tips in the comments; however, I have 1 weird issue remaining:

When you load the product page, it says "add to cart," but when you switch the variant, it swaps over to "pre-order" and stays that way for all of the variants. How can I get it to read "pre-order" when you land on the page rather than having the awkward swap?

Thank you!

0 Likes
ErikLeighland
New Member
1 0 0

@Alex-Miller Any chance you could help!?  I have multiple items on pre order, new shirts. Every time a customer has to check out with each item. Is there a way to have the customer add items to their cart and check out with multiple pre orders? 

GOOD RIDE SURF CO

0 Likes
Alex-Miller
Excursionist
18 2 4

Sure it's possible. I checked your site - there seems to be a bug. 

Please feel free to email me

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
0 Likes
neeka_feh
Tourist
7 0 1

Where / when will this message pop up? Thanks for the comment btw! I successfully have added the pre-order button & removed the BIN button but now I want to make sure the customer knows the item is on pre-order. 

0 Likes
leatheraholicx
Tourist
10 0 4

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:

Screenshot 2021-07-05 at 1.35.08 PM.jpg

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

 

0 Likes
Alex-Miller
Excursionist
18 2 4

Sorry for the slow response here. Yes this is possible.  You'll want to set the button text as well for the product. Please feel free to email or DM me.

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
0 Likes
Alex-Miller
Excursionist
18 2 4

hello @leatheraholicx 

The product strings appear to be the same.  I think you can just replace that part of the script. If you need support, please feel free to DM or email me.

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
0 Likes
hbeau
New Member
1 0 0

Hi there,

Thanks so much for sharing this! I've gone through and edited all the code as you said to do- but when I go to the product to change the "Theme Template" it still only have the option of 'default product' and don't give me the option for 'product-pre-order'. I have everything saved exactly as the instructions stated and I've tried twice now! Hoping you can help me with this! 

0 Likes