Difference between revisions of "Providing downloadable products"
From Spiffy Stores Knowledge Base
| Line 35: | Line 35: | ||
# Click ''Edit Html Version'' | # Click ''Edit Html Version'' | ||
# Tick the ''Custom Templates are Enabled'' box | # Tick the ''Custom Templates are Enabled'' box | ||
| − | # Replace the entire code of the email with the code below, and click ''Save''<br><pre><!DOCTYPE html> | + | # Replace the entire code of the email with the code below, and click ''Save''<br> |
| + | <pre> | ||
| + | <!DOCTYPE html> | ||
<html> | <html> | ||
<head> | <head> | ||
Revision as of 12:55, 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.
Contents
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 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
- 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: #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>