Difference between revisions of "Providing downloadable products"

From Spiffy Stores Knowledge Base
Line 3: Line 3:
 
<span style="color: red;">Note:  Customers can only download an item after the product has been paid for.  This means that you will need to email your customer a link after you have received payment if they have paid by PayPal Website Payments Standard and other less immediate payment methods such as Bank Deposit.</span>
 
<span style="color: red;">Note:  Customers can only download an item after the product has been paid for.  This means that you will need to email your customer a link after you have received payment if they have paid by PayPal Website Payments Standard and other less immediate payment methods such as Bank Deposit.</span>
  
−
=Part 1 - Setting up your templates for downloadable products=
+
==Part 1 - Setting up your templates for downloadable products==
  
 
Before you can set up your products, you need to make sure that your customers can download them.  Follow the instructions below to modify your templates to allow downloads.
 
Before you can set up your products, you need to make sure that your customers can download them.  Follow the instructions below to modify your templates to allow downloads.
  
−
== Step 1 - edit your customer template to provide a download link==
+
=== Step 1 - edit your customer template to provide a download link===
  
 
If your store's theme includes customer templates, you can add in the ability for customers to download the product after they have logged in.  To do so, follow the steps below.
 
If your store's theme includes customer templates, you can add in the ability for customers to download the product after they have logged in.  To do so, follow the steps below.
Line 16: Line 16:
 
# Paste the following code immediately after, and click save <pre>{% if line_item.sku contains "-download" and order.financial_status == "paid" %}{% capture download_file %}{{ shop.url }}/files/{{ line_item.product.id }}-{{ line_item.sku | downcase }}.zip{% endcapture %}<br><a href="{{ download_file }}" target="_blank" class="button">Download</a>{% endif %}</pre>
 
# Paste the following code immediately after, and click save <pre>{% if line_item.sku contains "-download" and order.financial_status == "paid" %}{% capture download_file %}{{ shop.url }}/files/{{ line_item.product.id }}-{{ line_item.sku | downcase }}.zip{% endcapture %}<br><a href="{{ download_file }}" target="_blank" class="button">Download</a>{% endif %}</pre>
  
−
==Step 2 - Edit your ''Order Confirmation'' email template==
+
===Step 2 - Edit your ''Order Confirmation'' email template===
  
 
If you also want to provide a link in their confirmation email when they have ordered, follow the instructions below to modify your ''Order Confirmation'' email.
 
If you also want to provide a link in their confirmation email when they have ordered, follow the instructions below to modify your ''Order Confirmation'' email.
Line 572: Line 572:
 
<br><br>
 
<br><br>
  
−
=Part 2 - Creating your downloadable products=
+
==Part 2 - Creating your downloadable products==
  
 
Now that your templates are set up, you can now continue with the relatively easy process of creating your downloadable products.  Follow the instructions below for each downloadable product.
 
Now that your templates are set up, you can now continue with the relatively easy process of creating your downloadable products.  Follow the instructions below for each downloadable product.
  
−
==Step 1 - Create your product pages==
+
===Step 1 - Create your product pages===
  
 
When you have created your product, make a note of it's ''Product ID'', as you will need to name your file using this.   
 
When you have created your product, make a note of it's ''Product ID'', as you will need to name your file using this.   
  
−
====Finding out your Product ID====
+
=====Finding out your Product ID=====
  
 
Your product ID is an internal number than cannot be seen in your storefront by your customers.   
 
Your product ID is an internal number than cannot be seen in your storefront by your customers.   
Line 589: Line 589:
 
</pre>
 
</pre>
  
−
====Give your product variation a unique SKU====
+
=====Give your product variation a unique SKU=====
  
 
On the product edit page, ensure that the product variation has a unique SKU.  For the purposes of this tutorial, the SKU we have set is ''sbw246-download''.  The last part of the SKU should always be "-download" so that we can provide a link to download the file in the order confirmation email.
 
On the product edit page, ensure that the product variation has a unique SKU.  For the purposes of this tutorial, the SKU we have set is ''sbw246-download''.  The last part of the SKU should always be "-download" so that we can provide a link to download the file in the order confirmation email.
  
−
==Step 2 - Create a zip file for your customer to download==
+
===Step 2 - Create a zip file for your customer to download===
  
 
On your computer, create a zip file for you customer to download.  In this tutorial, it should be named ''12052-sbw246-download.zip''
 
On your computer, create a zip file for you customer to download.  In this tutorial, it should be named ''12052-sbw246-download.zip''

Revision as of 17:46, 4 November 2015

We currently do not provide support for downloadable products, but you are able to modify your templates to support downloadable products. There are a few steps to setting up this process, which are detailed below.

Note: Customers can only download an item after the product has been paid for. This means that you will need to email your customer a link after you have received payment if they have paid by PayPal Website Payments Standard and other less immediate payment methods such as Bank Deposit.

Part 1 - Setting up your templates for downloadable products

Before you can set up your products, you need to make sure that your customers can download them. Follow the instructions below to modify your templates to allow downloads.

Step 1 - edit your customer template to provide a download link

If your store's theme includes customer templates, you can add in the ability for customers to download the product after they have logged in. To do so, follow the steps below.

  1. Go to the Design & Assets -> Theme editor section of your store's Toolbox.
  2. Scroll down to the Additional Theme Templates - Customers section, and click on the Order.liquid template to edit it.
  3. Scroll down to where you see the line 
    {{ line_item.title | link_to: line_item.product.url, 'View Product', target: '_blank' }}
  4. Paste the following code immediately after, and click save 
    {% if line_item.sku contains "-download" and order.financial_status == "paid" %}{% capture download_file %}{{ shop.url }}/files/{{ line_item.product.id }}-{{ line_item.sku | downcase }}.zip{% endcapture %}<br><a href="{{ download_file }}" target="_blank" class="button">Download</a>{% endif %}

Step 2 - Edit your Order Confirmation email template

If you also want to provide a link in their confirmation email when they have ordered, follow the instructions below to modify your Order Confirmation email.

  1. Go to the Design & Assets -> Email templates section of your store's Toolbox.
  2. Click on your Order Confirmation email template.
  3. Click Reload Template Defaults. This will load in a clean default version of your template.
  4. Click Edit Html Version
  5. Tick the Custom Templates are Enabled box
  6. Replace the entire code of the email with the code below, and click Save
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        background-color: #CCC;
        color: #000;
        font-size: 12px;
        font-family: 'Lucida Sans','Lucida Grande',Arial,Tahoma;
        margin: 10px 0px;
      }

      .main {
        width: 550px;
        background-color: #FFF;
        margin: 10px auto;
      }

      .header {
        width: 530px;
        height: 61px;
        background-color: #666;
      }

      .header_left {
        width: 385px;
        vertical-align: middle;
      }

      .header_right {
        width: 145px;
      }

      .title {
        font-size: 25px;
        line-height: 25px;
        color: #FFF;
        padding-left: 10px;
      }

      .small {
        font-size: 10px;
      }

      .bold {
        font-weight: bold;
      }

      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .center {
        text-align: center;
      }

      .negative {
        color: #FD0000;
      }

      .positive {
        color: #666;
      }

      .block {
        background-color: #999;
        color: #FFF;
      }

      .order {
        padding: 0px 7px;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
      }

      .message {
        padding: 10px 0px;
        font-size: 12px;
      }

      .link {
        color: #666;
        text-decoration: none;
      }

      .summary {
        margin-bottom: 15px;
        width: 530px;
      }

      .summary_left {
        width: 255px;
        background-color: #F4F4F4;
        vertical-align: top;
        height: 100%;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #EEE;
      }

      .summary_left > table, .summary_right > table {
        height: 100%;
        width: 100%;
      }

      .summary_left_title {
        color: #FFF;
        text-align: left;
        padding: 5px 10px 3px;
        background-color: #666;
        font-weight: bold;
        font-size: 11px;
      }

      .summary_left_details {
        color: #666;
        vertical-align: top;
        text-align: left;
        height: 100%;
        padding: 10px;
        font-size: 11px;
      }

      .summary_right {
        width: 255px;
        vertical-align: top;
        height: 100%;
        border-width: 1px;
        border-style: solid;
        border-color: #666;
      }

      .summary_right_title {
        color: #666;
        text-align: left;
        background-color: #FFF;
        padding: 5px 0px 3px 10px;
        font-size: 11px;
      }

      .summary_right_details {
        color: #666;
        vertical-align: top;
        height: 100%;
        background-color: #FFF;
        padding: 5px 5px 10px 10px;
        font-size: 11px;
      }

      .credit_card {
        color: #666;
        vertical-align: middle;
        height: 100%;
        padding: 0px 10px 10px 0px;
      }

      .items {
        width: 530px;
        border-color: #666;
        border-style: solid;
        border-width: 1px;
      }

      .item_header {
        color: #FFF;
        background-color: #666;
        font-weight: bold;
        padding: 5px 10px;
        font-size: 12px;
      }

      .item {
        vertical-align: top;
        color: #000;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding: 10px;
        font-size: 11px;
      }

      .item_odd {
        background-color: #F9F9F9;
        border-bottom-color: #F6F6F6;
      }

      .item_even {
        background-color: #FEFEFE;
        border-bottom-color: #FAFAFA;
      }

      .item_last {
        border-bottom-color: #EEE;
      }

      .item_image {
        height: 50px;
        width: 50px;
        float: left;
      }

      .item_image img {
        border-color: #CCC;
        border-style: solid;
        border-width: 3px;
      }

      .item_subtotal {
        background-color: #F4F4F4;
        color: #666;
        padding: 5px 10px;
        text-align: right;
        font-size: 11px;
      }

      .item_total {
        font-size: 15px;
        font-weight: bold;
        color: #666;
        vertical-align: middle;
        text-align: right;
        border-top-color: #EEE;
        border-top-style: solid;
        border-top-width: 1px;
        padding: 10px 10px 10px 5px;
      }

      .footnote {
        font-size: 10px;
        font-style: italic;
        padding: 3px 0px 0px;
        float: right;
      }

      .footer {
        font-size: 11px;
        padding-top: 5px;
        color: #666;
        text-align: center;
      }

      .footer_link {
        color: #666;
        text-decoration: none;
      }
      
      .download-button {
        color: #FFF;
        background-color: #CCC;
        padding: 7px 5px;
        display: block;
        float: left;
        clear: right;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    </style>
  </head>
<body>
    <table class="main" border="0" cellpadding="10" cellspacing="0">
      <tbody>
        <tr>
          <td>
            <table class="header" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td class="header_left">
                    <div class="title"> {{ shop_name }}</div>
                  </td>
                  <td class="header_right block order">
                    Order ID {{ order_name }}
                    <br>
                    <span class="small">{{ order_date }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="message">
              <p>Dear {{ customer.name }},</p>
              <p>Thank you for your order on the {{ shop_name }} store!
              We will process your order as soon as possible and let you know when your items have been shipped.</p>
              <p>Please check the details of your order below, and contact us if there are any issues.
              You can email us at <a href="mailto:{{ shop_email }}" class="link">{{ shop_email }}</a>.</p>
            </div>
            <table class="summary" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <td class="summary_left">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <th class="summary_left_title">Delivery Address</th>
                        </tr>
                        <tr>
                          <td class="summary_left_details">
                            <p>{{ shipping_address.name }}
                            {% if shipping_address.company.size > 0 %}<br>{{ shipping_address.company }}{% endif %}
                            {% if shipping_address.address1.size > 0 %}<br>{{ shipping_address.address1 }}{% endif %}
                            {% if shipping_address.address2.size > 0 %}<br>{{ shipping_address.address2 }}{% endif %}
                            {% if shipping_address.city.size > 0 %}<br>{{ shipping_address.city }}{% endif %}
                            {% if shipping_address.province.size > 0 %}, {{ shipping_address.province }}{% endif %}
                            {% if shipping_address.zip.size > 0 %}  {{ shipping_address.zip }}{% endif %}
                            {% if shipping_address.country.size > 0 %}<br>{{ shipping_address.country }}{% endif %}</p>
                            {% if billing_address.phone.size > 0 %}<strong>Phone: </strong>{{ billing_address.phone }}{% endif %}
                            <br>
                            <strong>Email: </strong>{{ customer.email }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                  <td width="20"> </td>
                  <td class="summary_right">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tbody>
                        <tr>
                          <th class="summary_right_title">Payment Summary</th>
                        </tr>
                        <tr>
                          <td class="summary_right_details">
                          {% if creditcard %}
                            <table border='0' cellpadding='0' cellspacing='0'>
                              <tbody>
                                <tr>
                                  <td class="credit_card">
                                    <img src="{{ creditcard.url | system_images_url }}" alt="{{ creditcard.type }}" width="32" height="20" title="Credit card type used for this purchase">
                                  </td>
                                  <td class="credit_card bold">
                                    {{ creditcard.type }}
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                            <strong>Card Holder: </strong>{{ creditcard.name }}<br>
                            <strong>Card Number: </strong>{{ creditcard }}
                          {% else %}
                            Payment by {{ gateway }}<br>
                            {{ gateway_message }}
                          {% endif %}
                            <br><br><br><br>
                            Order Placed: {{ order_date }} {{ order_time }}
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="items" border="0" cellpadding="0" cellspacing="0">
              <tbody>
                <tr>
                  <th class="item_header left" colspan="2">Item Description</th>
                  <th class="item_header center" width="58">Quantity</th>
                  <th class="item_header right" width="70">Price</th>
                  <th class="item_header right" width="89">Total</th>
                </tr>
              {% for line in line_items %}
                {% if forloop.even %}
                  {% assign item_class = 'item_even' %}
                {% else %}
                  {% assign item_class = 'item_odd' %}
                {% endif %}
                {% if forloop.last %}
                  {% capture item_class %}{{ item_class }} item_last{% endcapture %}
                {% endif %}
                <tr>
                  <td class="item {{ item_class }}">
                    <div class="item_image">
                      <img src="{{ line.product.featured_image | product_img_url: 'thumb' }}" alt="{{ line.title | strip_html }}">
                    </div>
                  </td>
                  <td class="item {{ item_class }}" width="205">
                    {{ line.title }}
                    {% if line.sku %}
                      <br>
                      <span class="small">{{ line.sku }}</span>
                      {% if line.sku contains "-download" and financial_status == "paid" %}
                        {% capture download_file %}{{ shop.url }}/files/{{ line.product.id }}-{{ line.sku | downcase }}.zip{% endcapture %}
                        <a href="{{ download_file }}" target="_blank" class="download-button">Download</a>
                      {% endif %}
                    {% endif %}

                  </td>
                  <td class="item {{ item_class }} center">
                    {{ line.quantity }}
                  </td>
                  <td class="item {{ item_class }} right">
                    {{ line.price | money }}
                  </td>
                  <td class="item {{ item_class }} right">
                    {{ line.line_price | money }}{% unless line.taxable %}*{% endunless %}
                  </td>
                </tr>
              {% endfor %}
              {% if discounts_amount > 0 %}
                <tr>
                  <td class="item_subtotal" colspan="4">
                    Coupon Discount - {{ discount_code }}
                  </td>
                  <td class="item_subtotal">
                    <span class="negative">{{ discounts_savings | money }}</span>
                  </td>
                </tr>
              {% endif %}
                <tr>
                  <td class="item_subtotal" colspan="4">
                    Subtotal
                  </td>
                  <td class="item_subtotal">
                    {{ subtotal_price | money }}
                  </td>
                </tr>
                <tr>
                  <td class="item_subtotal" colspan="4">
                    Shipping/Handling
                  </td>
                  <td class="item_subtotal">
                    {{ shipping_price | money }}
                  </td>
                </tr>
              {% if credit > 0 %}
                <tr>
                  <td class="item_subtotal" colspan="4">
                    Less Store Credit
                  </td>
                  <td class="item_subtotal">
                    -{{ credit | money }}
                  </td>
                </tr>
              {% endif %}
              {% if (tax_label == 'export') and (included_taxes > 0) %}
                <tr>
                  <td class="item_subtotal" colspan="4">
                    Less included taxes (Export Order)
                  </td>
                  <td class="item_subtotal">
                    <span class="negative">-{{ included_taxes | money }}</span>
                  </td>
                </tr>
              {% endif %}
              {% if tax_price > 0 %}
                <tr>
                  <td class="item_subtotal" colspan="4">
                    {% if (shop.country_iso == 'AU') and (tax_label == 'GST') %}
                    TAX INVOICE ({% if shop.tax_number.size == 0 %}To be supplied{% else %}{{ shop.tax_number }}{% endif %}) - 
                    {% endif %}
                    {% if included_taxes > 0 %}Including{% else %}Plus{% endif %} {{ tax_label }}
                  </td>
                  <td class="item_subtotal">
                    {{ tax_price | money }}
                  </td>
                </tr>
              {% endif %}
                <tr>
                  <td class="item_total" colspan="3">
                    Order Total
                  </td>
                  <td class="item_total" colspan="2">
                    {{ total_price | money_with_currency }}
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="footnote">* indicates a Tax Free item</div>
          </td>
        </tr>
      </tbody>
</table>
    <div class="footer">
      <a href="{{ shop.url }}" class="footer_link bold">{{ shop.url }}</a>
      <br>
      Automatic email generated by Spiffy Stores -
      <a href="http://www.spiffystores.com/" class="footer_link">http://www.spiffystores.com</a>
    </div>
</body>
</html>

You can also edit the text version of your order confirmation template, by replacing the code with the code provided below... 

{{ shop_name | upcase }} - Order ID {{ order_name }}

Dear {{ customer.name }},

Thank you for your order on the {{ shop_name }} store!  We will process your order as soon as possible and let you know when your items have been shipped.

Please check the details of your order below, and contact us if there are any issues. You can email us at {{ shop_email }}.


Delivery Address
----------------

Name: {{ shipping_address.name }}
Company: {{ shipping_address.company }}
Address 1: {{ shipping_address.address1 }}
Address 2: {{ shipping_address.address2 }}
City: {{ shipping_address.city }}
State: {{ shipping_address.province }}
Postcode: {{ shipping_address.zip }}
Country: {{ shipping_address.country }}

Phone: {{ billing_address.phone }}
Email: {{ customer.email }}

Payment Summary
---------------

{% if creditcard %}Card Type: {{ creditcard.type }}
Card Holder: {{ creditcard.name }}
Card Number: {{ creditcard }}{% else %}
Payment by: {{ gateway }}
{{ gateway_message }}{% endif %}

Order Placed: {{ order_date }} {{ order_time }}

Items Ordered
-------------

{% for line in line_items %}{{ line.quantity }} x "{{ line.title | strip_html }}" for {{ line.price | money }} each. Total = {{ line.line_price | money }}{% if line.taxable %}{% else %}*{% endif %}
{% if line.sku contains "-download" and financial_status == "paid" %}{% capture download_file %}{{ shop.url }}/files/{{ line.product.id }}-{{ line.sku | downcase }}.zip{% endcapture %}Download Link: {{ download_file }}{% endif %}
{% endfor %}

{% if discounts_amount > 0 %}Coupon Discount - {{ discount_code }}: {{ discounts_savings | money }}{% endif %}
Subtotal: {{ subtotal_price | money }}
Shipping/Handling: {{ shipping_price | money }}
{% if credit > 0 %}Less Store Credit: -{{ credit| money }}{% endif %}
{% if (tax_label == 'export') and (included_taxes > 0) %}Less included taxes (Export Order): -{{ included_taxes | money }}{% endif %}
{% if tax_price > 0 %}{% if included_taxes > 0 %}Including{% else %}Plus{% endif %} {{ tax_label }}: {{ tax_price | money }}{% endif %}

ORDER TOTAL: {{ total_price | money_with_currency }}
{% if tax_price > 0 and (shop.country_iso == 'AU') and (tax_label == 'GST') %}TAX INVOICE ({% if shop.tax_number.size == 0 %}To be supplied{% else %}{{ shop.tax_number }}{% endif %}){% endif %}

{{ shop.url }}

* indicates a Tax Free item

Automatic email generated by Spiffy Stores - http://www.spiffystores.com



Part 2 - Creating your downloadable products

Now that your templates are set up, you can now continue with the relatively easy process of creating your downloadable products. Follow the instructions below for each downloadable product.

Step 1 - Create your product pages

When you have created your product, make a note of it's Product ID, as you will need to name your file using this.

Finding out your Product ID

Your product ID is an internal number than cannot be seen in your storefront by your customers.

Once you have saved your product, your product ID can be seen when editing the product in the URL of your product. It is the last part of the URL of the page. In the example below, the product ID is 12052. 

https://yourstore.spiffystores.com/admin/products/12052
Give your product variation a unique SKU

On the product edit page, ensure that the product variation has a unique SKU. For the purposes of this tutorial, the SKU we have set is sbw246-download. The last part of the SKU should always be "-download" so that we can provide a link to download the file in the order confirmation email.

Step 2 - Create a zip file for your customer to download

On your computer, create a zip file for you customer to download. In this tutorial, it should be named 12052-sbw246-download.zip 

{{ product.id }}-{{ variant.sku }}.zip

Once you have done this, go to the Design & Assets -> Uploaded files section of your store's Toolbox and upload your zip file. Once you have uploaded your zip file, you should make sure the file name is correct by clicking on it. Note: regardless of whether your SKU is uppercase, your file name should be all in lowercase.

Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Providing_downloadable_products&oldid=5771"