Difference between revisions of "Providing downloadable products"

Latest revision as of 11:05, 19 August 2023

You are able to modify your templates to support downloadable products or digital 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;

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

1 Part 1 - Setting up your templates for downloadable products
- 1.1 Step 1 - Edit your customer template to provide a download link
- 1.2 Step 2 - Edit your Order Confirmation email template
2 Part 2 - Creating your downloadable products
- 2.1 Step 1 - Create your product page
  - 2.1.1 Finding out your Product ID
  - 2.1.2 Give your product variation a unique SKU
- 2.2 Step 2 - Create a zip file for your customer to download

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:

Go to the Design & Assets -> Theme editor section of your store's Toolbox.
Scroll down to the Additional Theme Templates - Customers section, and click on the Order.liquid template to edit it.

Scroll down to where you see the line

{{ line_item.title | link_to: line_item.product.url, 'View Product', target: '_blank' }}

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

If you are using the Simple Theme, use the following instructions:

Go to the Design & Assets -> Theme editor section of your store's Toolbox.
Scroll down to the Additional Theme Templates - Customers section, and click on the Order.liquid template to edit it.

Scroll down to where you see the line

<a href="{{ line_item.url }}" target="_blank">{{ item_title[0] | remove: '&lt;span&gt;' | remove: '&lt;br&gt;' | remove: '&lt;/span&gt;' }}</a>

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.

Go to the Design & Assets -> Email templates section of your store's Toolbox.
Click on your Order Confirmation email template.
Click Reload Template Defaults. This will load in a clean default version of your template.
Click Edit Html Version
Tick the Custom Templates are Enabled box
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: #CCCCCC;
        color: #000000;
        font-size: 12px;
        font-family: 'Lucida Sans','Lucida Grande',Arial,Tahoma;
        margin: 10px 0px;
      }

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

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

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

      .header_right {
        width: 145px;
      }

      .title {
        font-size: 25px;
        line-height: 25px;
        color: #FFFFFF;
        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: #666666;
      }

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

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

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

      .link {
        color: #666666;
        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: #EEEEEE;
      }

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

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

      .summary_left_details {
        color: #666666;
        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: #666666;
      }

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

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

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

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

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

      .item {
        vertical-align: top;
        color: #000000;
        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: #EEEEEE;
      }

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

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

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

      .item_total {
        font-size: 15px;
        font-weight: bold;
        color: #666666;
        vertical-align: middle;
        text-align: right;
        border-top-color: #EEEEEE;
        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: #666666;
        text-decoration: none;
      }
      
      .download-button {
        color: #FFFFFF;
        background-color: #CCCCCC;
        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.

Contact us

Resources

Difference between revisions of "Providing downloadable products"

From Spiffy Stores Knowledge Base

Latest revision as of 11:05, 19 August 2023

Contents

Part 1 - Setting up your templates for downloadable products

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

Step 2 - Edit your Order Confirmation email template

Part 2 - Creating your downloadable products

Step 1 - Create your product page

Finding out your Product ID

Give your product variation a unique SKU

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

SPIFFY STORES

DESIGN & FEATURES

Social

HELP

@@ Line 1: / Line 1: @@
-We currently do not support 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.
+You are able to modify your templates to support downloadable products or digital products.  There are a few steps to setting up this process, which are detailed below.
-<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>
+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 [mailto:support@spiffystores.com.au email us] providing us with the following information;
-==Step 1 - Create your product page==
+# Your store name
+# Let us know the type of downloadable products you are planning to sell
+# Ensure your email states that you approve the $70.00 charge
-When you have created your product, make a note of it's ''Product ID'', as you will need to name your file using these.
-====Finding out your Product ID====
+== 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.
-Your product ID is an internal number than cannot be seen in your storefront by your customers.
+To do so, follow the steps below:
-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'''''.
-<pre>
-https://yourstore.spiffystores.com/admin/products/12052
-</pre>
-====Give your product variation a unique SKU====
+# Go to the ''Design & Assets -> Theme editor'' section of your store's Toolbox.
+# Scroll down to the Additional Theme Templates - Customers section, and click on the Order.liquid template to edit it.
-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.
+# Scroll down to where you see the line<br><pre>{{ line_item.title | link_to: line_item.product.url, 'View Product', target: '_blank' }}</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 - 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''
-<pre>
+If you are using the '''Simple''' Theme, use the following instructions:
-{{ product.id }}-{{ variant.sku }}.zip
-</pre>
-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.
+# Go to the ''Design & Assets -> Theme editor'' section of your store's Toolbox.
+# Scroll down to the Additional Theme Templates - Customers section, and click on the Order.liquid template to edit it.
+# Scroll down to where you see the line<br><pre><a href="{{ line_item.url }}" target="_blank">{{ item_title[0] | remove: '&amp;lt;span&amp;gt;' | remove: '&amp;lt;br&amp;gt;' | remove: '&amp;lt;/span&amp;gt;' }}</a></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 3 - 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.
 # Go to the ''Design & Assets -> Email templates'' section of your store's Toolbox.
@@ Line 38: / Line 36: @@
 # Tick the ''Custom Templates are Enabled'' box
 # Replace the entire code of the email with the code below, and click ''Save''<br>
-<pre>
+<pre style="width:100%">
 <!DOCTYPE html>
 <html>
@@ Line 44: / Line 42: @@
      <style type="text/css">
        body {
-         background-color: #CCC;
+         background-color: #CCCCCC;
-         color: #000;
+         color: #000000;
          font-size: 12px;
          font-family: 'Lucida Sans','Lucida Grande',Arial,Tahoma;
@@ Line 53: / Line 51: @@
        .main {
          width: 550px;
-         background-color: #FFF;
+         background-color: #FFFFFF;
          margin: 10px auto;
        }
@@ Line 60: / Line 58: @@
          width: 530px;
          height: 61px;
-         background-color: #666;
+         background-color: #666666;
        }
@@ Line 75: / Line 73: @@
          font-size: 25px;
          line-height: 25px;
-         color: #FFF;
+         color: #FFFFFF;
          padding-left: 10px;
        }
@@ Line 104: / Line 102: @@
        .positive {
-         color: #666;
+         color: #666666;
        }
        .block {
          background-color: #999;
-         color: #FFF;
+         color: #FFFFFF;
        }
@@ Line 125: / Line 123: @@
        .link {
-         color: #666;
+         color: #666666;
          text-decoration: none;
        }
@@ Line 141: / Line 139: @@
          border-bottom-width: 1px;
          border-bottom-style: solid;
-         border-bottom-color: #EEE;
+         border-bottom-color: #EEEEEE;
        }
@@ Line 150: / Line 148: @@
        .summary_left_title {
-         color: #FFF;
+         color: #FFFFFF;
          text-align: left;
          padding: 5px 10px 3px;
-         background-color: #666;
+         background-color: #666666;
          font-weight: bold;
          font-size: 11px;
@@ Line 159: / Line 157: @@
        .summary_left_details {
-         color: #666;
+         color: #666666;
          vertical-align: top;
          text-align: left;
@@ Line 173: / Line 171: @@
          border-width: 1px;
          border-style: solid;
-         border-color: #666;
+         border-color: #666666;
        }
@@ Line 179: / Line 177: @@
          color: #666;
          text-align: left;
-         background-color: #FFF;
+         background-color: #FFFFFF;
          padding: 5px 0px 3px 10px;
          font-size: 11px;
@@ Line 185: / Line 183: @@
        .summary_right_details {
-         color: #666;
+         color: #666666;
          vertical-align: top;
          height: 100%;
-         background-color: #FFF;
+         background-color: #FFFFFF;
          padding: 5px 5px 10px 10px;
          font-size: 11px;
@@ Line 194: / Line 192: @@
        .credit_card {
-         color: #666;
+         color: #666666;
          vertical-align: middle;
          height: 100%;
@@ Line 202: / Line 200: @@
        .items {
          width: 530px;
-         border-color: #666;
+         border-color: #666666;
          border-style: solid;
          border-width: 1px;
@@ Line 208: / Line 206: @@
        .item_header {
-         color: #FFF;
+         color: #FFFFFF;
-         background-color: #666;
+         background-color: #666666;
          font-weight: bold;
          padding: 5px 10px;
@@ Line 217: / Line 215: @@
        .item {
          vertical-align: top;
-         color: #000;
+         color: #000000;
          border-bottom-style: solid;
          border-bottom-width: 1px;
@@ Line 235: / Line 233: @@
        .item_last {
-         border-bottom-color: #EEE;
+         border-bottom-color: #EEEEEE;
        }
@@ Line 245: / Line 243: @@
        .item_image img {
-         border-color: #CCC;
+         border-color: #CCCCCC;
          border-style: solid;
          border-width: 3px;
@@ Line 252: / Line 250: @@
        .item_subtotal {
          background-color: #F4F4F4;
-         color: #666;
+         color: #666666;
          padding: 5px 10px;
          text-align: right;
@@ Line 261: / Line 259: @@
          font-size: 15px;
          font-weight: bold;
-         color: #666;
+         color: #666666;
          vertical-align: middle;
          text-align: right;
-         border-top-color: #EEE;
+         border-top-color: #EEEEEE;
          border-top-style: solid;
          border-top-width: 1px;
@@ Line 285: / Line 283: @@
        .footer_link {
-         color: #666;
+         color: #666666;
          text-decoration: none;
        }
        .download-button {
-         color: #FFF;
+         color: #FFFFFF;
-         background-color: #CCC;
+         background-color: #CCCCCC;
          padding: 7px 5px;
          display: block;
@@ Line 423: / Line 421: @@
                          {% 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 %}
@@ Line 519: / Line 520: @@
      </div>
 </body>
-</html></pre>
+</html>
+</pre>
 You can also edit the text version of your order confirmation template, by replacing the code with the code provided below...
-<pre>
+<pre style="width:100%">
 {{ shop_name | upcase }} - Order ID {{ order_name }}
@@ Line 581: / Line 583: @@
 Automatic email generated by Spiffy Stores - http://www.spiffystores.com
 </pre>
+== 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'''''.
+<pre>
+https://yourstore.spiffystores.com/admin/products/12052
+</pre>
+==== 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''
+<pre>
+{{ product.id }}-{{ variant.sku }}.zip
+</pre>
+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.