Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Product pages - Allow pre-orders for products

Product pages - Allow pre-orders for products

TyW
Shopify Staff (Retired)
463 71 1240

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.

pre01.png


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.

 

 

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 112 (112)
bsidesmetal
Visitor
1 0 0

I have done all the steps for the debut theme, however when I click my pre-order product the product won't open. It says "Liquid error: Error in tag 'section' - 'product-pre-order-template' is not a valid section type".

 

Any ideas on where I made a mistake and how to fix it.

sellysells
Visitor
1 0 1

Did you ever get an answer? This is the issue with mine

Alex-Miller
Excursionist
18 2 4

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

https://community.shopify.com/c/Shopify-Design/Product-pages-Allow-pre-orders-for-products/m-p/62591...

2.  BUT skip this part of the tutorial

Alex-Miller_0-1613025289763.png

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 

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

Script updated to handle products with only one variant (aka no variant selector)

 

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

  const selectEl = document.querySelector('[name="id"]') // the select
  const cta = document.querySelector('.product-form__cart-submit') // the CTA 
  const currentVariant = getVariantById({{product.selected_or_first_available_variant.id}})
  
  // fire the event on page load (check if it's pre-order)
  updateCTA(currentVariant, cta)

  // then we just change the text of the CTA when the select is changed
  document.querySelector('.single-option-selector').onchange = ()=>{
    
    setTimeout(()=>{ // requires a little delay for some reason
      const [options] = getSelectedOptions(selectEl)
      const variant = getVariantById(parseInt(options.value))
      updateCTA(variant, cta)
    },5)
  };

  // helper functions
  function getVariantById(id){
    const [variant] = product.variants.filter( (v) => v.id === id )
    return variant
  }

  // update the cta based on the inventory quantity and policy
  function updateCTA(variant, ctaEl){
    if(variant.inventory_quantity > 0 ){
        return ctaEl.textContent = theme.productStrings.addToCart
      } else if( variant.inventory_policy === "continue" ){
        return ctaEl.textContent = theme.productStrings.preorder
      } else {
        return ctaEl.textContent = theme.productStrings.sold_out
    }
  }

  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>

 

AIMHUGE GROWTH CONSULTING
Alex@aimhuge.com
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

 

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
Sarah07
Visitor
1 0 0

Hi,

I've implemented this and have the pre-order working as it's supposed to, but we have just noticed that the product codes and collection names are not showing up on the product pages for pre-orderable items. Any ideas as to how to solve this? Do I possibly also need to create a 'product-details-pre-order-template.liquid as well? We have sites using the Mobilia theme and also some using the Envy theme, so I need to fix it on both themes as we've found that the issue is the same in both.

Mattia234
Tourist
4 0 1

I just changed the translation: add to cart ---> Pre-order 

What's the different? I need the pre-order to appear once i've not products on stock. 

YuriLee
Visitor
1 0 0

If I change my payment to manually capture payment, will this affect all other purchases outside of the pre-order style?

rnickerson
Tourist
3 0 2

@YuriLee I asked this along with several other operational and procedural questions a while back and got zero response from the OP or anyone else. Hopefully you'll have better luck...

tangeklang55
Visitor
1 0 0

Thank you for this tutorial. I have implemented the solution for Sectioned themes. I have 3 product variants, S, M and L. I tested this out by indicate S and L at 0 inventory and M at 1 inventory, but when I select M on the front end, the button still says Pre-order. Do you have any inkling where I may have gone wrong in my implementation?

ootdnewyork10
Excursionist
19 0 8

Hi TyW,

Thank you for your easy-to-follow instructions. Do you happen to have an updated or applicable to "brooklyn" theme version by chance? Your codes don't work fo my store. Store url is www.ootdnewyork10.com and the theme, again, is brooklyn. 

NormaLili
Visitor
2 0 0

TyW, 

 

I am following your instructions to the Tee. Maybe I am missing something the line code for the style for the boost template does not have the following below for me to replace. 

addToCart: {{ 'products.product.add_to_cart' | t | json }}, to addToCart: {{ 'Pre-order' | json }},

instead I have the following code.

<script type="application/json" class="ProductJson-{{ product.id }}">
{{ product | json }}
</script>

 

Do you have any updated instructions?

NevWally_31
Visitor
1 0 2

Good Day I have followed instructions and everything works great! I have one question though, how can products that are in stock show an "in stock" or "add to cart" to show that they are in stock and not on preorder, and then switch to pre-order if the inventory stock hits 0? Would one have to change the Template suffix or is there a script that can be included?

jocelynkellner
Excursionist
27 0 1

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. 

 

Screen Shot 2021-01-26 at 12.43.30 PM.pngScreen Shot 2021-01-26 at 12.43.35 PM.png

luxuriaistanbul
Excursionist
33 0 4

Thank you for the solution, this worked for my debut theme shop!

zeffire
Visitor
2 0 1

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.

zeffire_0-1614241718955.png

 

May I know how I should do that?

hasheleyc
Excursionist
12 0 29

Sections > product template liquid > line 152 >         <div class="free_ship"><img width="50px" src="https://cdn0.iconfinder.com/data/icons/e-commerce-69/512/delivery-512.png"><span style="font-size: 20px;padding-left: 5px;">type your message about delayed shipping here</span></div>

 

This is the only way I could think of doing it.

henriettaprice
New Member
6 0 0

Hi there, thank you so much for this tutorial, it worked perfectly! 

 

Im just wondering how to get the quantity picker showing when you have pre order template enabled. As its currently only the 'preorder' button available 

 

thanks so much! 

 

Henrietta 

amber101
Tourist
4 0 6

Please help! After following all steps and disabling dynamic checkout, I cannot find the code/script: 

<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>

anywhere !!  I'm stuck at step 11 😞 I have the style narrative if that helps!

Algalsc
Excursionist
40 0 8

I'm also using Narrative and can't find the add-to-cart code to replace. My website is www.perfectdd.com, can you help enable pre-order please?

karenACC
Visitor
1 0 1

I am excited about having a way for my customers to pre-order an item when it is out of stock. Will this automatically change to pre-order when an item is out of stock? Or do I have to manually mark each item to pre-order? Can I keep the variety out of stock that I want to change to pre-order in with the other same items? or do they have to be somewhere completely else on my website?

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
ErikLeighland
Visitor
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

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
wickerpedia
Visitor
1 0 0

These changes work great to change the Product Page. But many users will also be using the Featured Product widget on their Home page and thus also need to make the same change in the file:

featured-product.liquid



 

 

ashleighmaree
Visitor
2 0 1

This worked great!
Do you know if there is a way that inventory stock will show as Add to Cart, whilst the "allow to purchase whilst out of stock" will show as the Pre-Order button?

TyW
Shopify Staff (Retired)
463 71 1240

 

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.

 

  1. From your Shopify admin, go to Settings > Payment providers.
  2. Scroll down to find the Payment authorization section.
  3. Select Manually capture payment for orders:

    pre02.jpg
  4. 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.

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click Add a new template.
  4. From the drop-down menu, select product, and name the template pre-order:

    pre03.jpg
  5. Click Create template. Your new product.pre-order.liquid template will open in the code editor.
  6. Find and replace the Add to cart button text.
  7. 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 of products.product.add_to_cart with Pre-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.

  8. Click Save.

 

Assigning the template to a product

 

 

  1. From your Shopify admin, go to Products > All products.
  2. Click the name of the product you want to make available for pre-order.
  3. In the Theme templates sidebar section, change product to product.pre-order:

    pre05.png

  4. 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:

 

  1. From your Shopify admin, go to Products > All products.
  2. Click the name of the product you want to make available for pre-order.
  3. Click Edit next to the first variant:

    pre06.png

  4. Check Allow customers to purchase this product when it's out of stock:

    pre07.png

  5. 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.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

maxscloset
Visitor
1 0 0

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

Doc1.jpg

 

Dallas-modern12
Visitor
1 0 0

I cannot find the Add to cart section in the code to edit for the pre-order?


PaulWS
Visitor
2 0 1

I have followed the instructions and am using Debut theme.  Pre-order button is working, but for the variant that I have in stock, it still says pre-order.  How do I adjust this so it actually shows as an add to cart variant?  Thanks for the info so far. 

CIVICSports
Visitor
3 0 0

I've followed all intrucstion and using the Debut theme. It works well on the product page, showing Pre-Order Button. But once testing to place the order, i got the error message : "Your cart has been updated and the items you added can’t be shipped to your address. Remove the items to complete your order."

 

The shipping rules have been set same as all other products... so I'm on sure where the problem is ?

molliemais
Visitor
1 0 0

I am also having this issue, did you ever resolve it?

Jennifer42
Tourist
11 0 4

hi did you get any response to this ? 

Jennifer42
Tourist
11 0 4

are you still searching as well? 

All of my items are now on prep-order even the one that are in stock 

 

danielb
New Member
4 0 0

hi i searched through the file and i dont have this 

addToCart: {{ 'products.product.add_to_cart' | t | json }},

in there 

Lilsquirrel
Visitor
1 0 2

This worked for me but my variants currently in stock now show as 'Pre-order'. 

How do I fix this?

Thanks in advance!

mtraff
Tourist
7 0 1

Has anyone use Pre Order Now or other plugins?  My concern is the access level that those plugins require to your account.  I am curious why Shopify just doesn't allow this as their base functionality in there platform.

I have the Venture theme and the code is not the same as the instructions, and based on comments it appears that variants will not work?

Has anyone done this with the venture theme?

rnickerson
Tourist
3 0 2

This is my question too. I've been asked to review this process to see if we can offer pre-order for out of stock products in our shop. Looking over the steps it seems that the end result of following this tutorial would have your product page always show the preorder button regardless of stock quantities.

This code discriminates based on availability:

<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>

This code just always shows the same Preorder text:

<span data-add-to-cart-text>
{{ 'Pre-order' | json | remove: '"' }}
</span>

Additionally, why does this snippet hard-code the Pre-order text rather than using the settings data? And why is it piped through the json filter and removing quotes. I'm probably just missing something here so I feel like there needs to be a bit more explanation around this thinking.

I get that this would only happen for products where you change the template from `product` to `product.pre-order`, but is that the expected workflow here, that you have to manually change the template whenever you notice that you're out of stock?

Wouldn't it be better to replace the text with similar logic?

<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'Pre-order' | json | remove: '"' }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>

Also the tutorial doesn't mention anything about what the practical implications are, if any, of switching from automatically to manually capturing payments. Does this affect the way orders are placed? Charged? The workflow around order completion?

Again, I'm sure I'm missing something here, so if anyone can answer any of these questions I'd appreciate it. Thanks!

 

 

 

phoebeelin
Visitor
1 0 0

Hi, I followed all the instructions on this and I replaced the code with the one you said because mine all said pre-order disregarding the availability. However, once I changed it, I test it and set an item to no stock and it still says add to cart? How do I fix this? I have the debut theme btw.

MichaelGam
Visitor
1 0 0

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. 

 

Screen Shot 2020-11-17 at 11.29.11 AM.png

SaraSteapedSlow
Tourist
9 1 8

Is it possible to create a confirmation email specifically for when a pre-ordered item is purchased? 

Ma6
Visitor
1 0 0

I followed all the steps ,however the products image became smaller and some coding text appeared at the bottom of product description 

so I deactivated the product on preorder 

theshortspine
Tourist
5 0 3

I followed the instructions for the pre-order template and now have one. But the product images don't show up as a grid. What do I need to change? I'm on Brooklyn theme (sectioned). Thanks!

roseblack
Visitor
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!

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
hbeau
Visitor
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! 

OliUK
Shopify Partner
235 2 56

Hi everyone,

 

Just adding to this thread as Dawn will be the new default template in Shopify soon.

A lot of the same applies, but app blocks/sections-everywhere is a big change.

I put together this guide over the last couple of weeks on integrating with and without an app.

 

Cheers,

Oli

 

——————————

Founder @ www.preproduct.io

The smarter way to launch products. 

 

 

spudnik95
Visitor
1 0 0

Hi,

I'm using narrative theme and have followed the sectioned theme instructions. I have changed all of my products to the pre order template (after recoding with your guide), I disabled the dynamic checkout buttons, changed the capture setting to manual, turned the quantity to 0, and allowed the product to be sold after selling out and the preorder button still doesn't appear. Do you have any other suggestions? 

Thank you!

-Hana

cherieorganic
Visitor
2 0 0

Does this work with subscription too? I'm using ReCharge shopify app for reocurring subscription.