Providing downloadable products

From Spiffy Stores Knowledge Base

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.

If the process is a little difficult for you, we are able to update your templates for you for a one-off fee of $70 AUD. To request this, please email us providing us with the following information;

  1. Your store name
  2. Let us know the type of downloadable products you are planning to sell
  3. Ensure your email states that you approve the $70.00 charge

Note: We do not provide free support for modifying your templates. If your current theme doesn't support customer accounts, you will need to ensure you either update it or switch to a theme that does.

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 %}
                      {% if line.sku contains "-download" and financial_status != "paid" %}
                        <span class="small">You will need to <a href="{{ shop.url }}/customers/sign_up">log into your account to download this file</a> once we have recorded payment for your order.</span>
                      {% 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 page

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 or customer template.

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=6231"