Difference between revisions of "Providing downloadable products"

From Spiffy Stores Knowledge Base
Line 581: Line 581:
 
Automatic email generated by Spiffy Stores - http://www.spiffystores.com
 
Automatic email generated by Spiffy Stores - http://www.spiffystores.com
 
</pre>
 
</pre>
 +
 +
== Step 4 - 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 <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>

Revision as of 14:06, 4 November 2015

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.

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.

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

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.

Step 3 - Edit your Order Confirmation email template

  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

Step 4 - 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 %}
Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=Providing_downloadable_products&oldid=5767"