We are Underground support

How to add a Pre Order Product Template

Last Updated: Sep 09, 2016 09:18AM EDT

In Shopify you can harness the multiple templates to display different outputs for your products.
This allows you to extend the offering of your products by allowing different layouts or terminology within your product pages.

This details how to add a Pre Order Setup for your products.

1. In your Shopify admin click on themes > customise theme > theme options ( top left ) > Edit HTML / CSS
2. On the next page click on Snippets > Add a new Snippet:
3. Name the new Snippet: preorder
4. Paste in the following code:


<form action="/cart/add" method="post" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}">
  {% if product.options.size > 1 %}
  <div class="select">
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
  {% elsif product.options.size == 1 and product.variants.size > 1 %}
  <div class="select">
    <label>{{ product.options[0] }}</label>
    <select id="product-select-{{ product.id }}" name='id'>
      {% for variant in product.variants %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% endfor %}
    </select>
  </div>
  {% else %}
  <div class="what-is-it">
    {% if product.options.first != 'Title' %}
    <label>{{ product.options.first }}:</label>{% for variant in product.variants %}<span class="it-is">{{ variant.option1 | escape }}</span>{% endfor %}
    {% endif %}
  </div>
  <div class="product-variants"></div><!-- product variants -->  
  <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" />    
  {% endif %}

  {% if product.available %}  
  <div id="product-add">
    <label for="quantity">{{ 'products.product.quantity' | t }}</label> 
    <input min="1" type="number" id="quantity" name="quantity" value="1" />
    <input type="submit" name="button" class="add" value="PRE ORDER" />
  </div>
  <p class="add-to-cart-msg"></p>
  {% endif %}

  <div class="clear"></div>

</form>

{% if template contains 'product' %}
{% if settings.popup_4 %}<a href="#pop-four" class="fancybox"><i class="fa fa-envelope-o"></i> {{ 'products.product.popup_question' | t }}</a>
<div id="pop-four" style="display: none">{% include 'question' %}</div>
{% endif %}
{% endif %}


<script>
  // Shopify Product form requirement
  selectCallback = function(variant, selector) {
    var $product = $('#product-' + selector.product.id);    
    if (variant && variant.available == true) {
      if(variant.compare_at_price > variant.price){
        $('.was', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form', $product).data('money-format')))        
      } else {
        $('.was', $product).text('')
      } 
      $('.product-price', $product).html(Shopify.formatMoney(variant.price, $('form', $product).data('money-format'))) 
      $('.add', $product).removeClass('disabled').removeAttr('disabled').val('{{ 'products.product.add_to_cart' | t }}');
        } else {
        var message = variant ? "{{ 'products.product.sold_out' | t }}" : "PRE ORDER";
        $('.was', $product).text('')
      $('.product-price', $product).text(message);
      $('.add', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
    } 


    if (variant && variant.featured_image) {
      var original_image = $(".bigimage-{{ product.id }} img"), new_image = variant.featured_image;
        Shopify.Image.switchImage(new_image, original_image[0], function (new_image_src, original_image, element) {
        $(element).attr('src', new_image_src);   
        $('.thumbnail[data-image-id="' + variant.featured_image.id + '"]').trigger('click');
        {% if template contains 'product' %}        
        $('.zoomImg').attr('src', new_image_src);
        {% endif %}
      });
    }    
  }; 
</script>

{% if product.variants.size > 1 or product.options.size > 1 %}
<script type="text/javascript">


  $(function() {

    $product = $('#product-' + {{ product.id }});
      if($('.single-option-selector', $product).length == 0) {             
      new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected:
      selectCallback{% if template contains 'product'%}, enableHistoryState: true{% endif %} });
    }

    $(".single-option-selector").selecter();

  });    

Shopify.Image.preload({{ product.images | json }}, 'master');
  
</script>
{% endif %}



 

5. Click Save when done and open the Templates folder
6. Click on Add a new Template
7. In the options that appear choose: Product
8. Name the new template preorder
9. Scroll down to line: 115 and replace this:


 {% include 'product-form' %}

with this:

{% include 'preorder' %}


10. Click save when done.

Now when you open a product page within the Shopify admin you will see a Template field allowing you to choose which template to use for that product.... product or product.preorder

Choose product.preorder for items that you want to display as Pre Order instead of the usual Add to Cart.

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
retail@undergroundmedia.co.uk
http://assets1.desk.com/
false
undergrndmedia
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete