Lil Commerce is a set of powerful HTML templates designed for store owners and app makers who deal with Shopify email communications.
It includes 3 starter themes with popular design styles which make matching your existing design really easy and fast.
These templates are compatible with 40+ email clients and devices: Gmail, Outlook 2010, Outlook 2011, Outlook 2013, Yahoo! Mail, Outlook.com, Gmail App (Android), iPad, iPad Mini and more! For a full compatibility report click here.
Default Shopify emails for Order, Shipping, Customer and Templates.
To install the email templates you’ll need access to Files and Notifications in your store’ Settings.
Go to your stores admin to get starterd, then click Settings > Files. Click Upload files and select all the files from the images folder.
Start by picking one of the themes as a base for your new awesome responsive emails.
default material bootstrap
Next you will need to upload all email-related images to your store. To do this go to your store’s admin, then Settings > Files and click Upload files. Select all the files from images folder. Once the upload is done head over to Notifications (Settings menu).
The Notifications section has a complete list of emails your store sends out (Order, Shipping, Customer and Templates). We’ll overwrite the default emails with our custom code.
Selecting one of the notifications from the list. Next, replace the content of the Email body (HTML) field with the content of the corresponding .txt file (e.g. Order Confirmation > 01_order_confirmation.txt). Hit Save once you are done.
Repeat the process for all the email notifications you want to update.
#protip Use the Revert to default at the end of the edit page to restore your email to their default state.
Click the Customize button from the Notifications page to update the Accent color or add a image-based logo (maximum width 168px).
#3cc28d#03a9f4#0275d8
There are a few extra styling options that you can use to customize extra colors, or you can add extra information to the email footer.
You can find the styling options at the start of every .txt file, e.g. Order Confirmation.
{% assign email_background = "#cfd8dc" %}
{% assign jumbotron = "#303f9f" %}
{% assign header = "#3f51b5" %}
{% assign footer_icon_1 = "TwitterURL" %}
{% assign footer_icon_2 = "InstagramURL" %}
{% assign footer_icon_3 = "YoutubeURL" %}
{% assign footer_address = "Store Address" %}
{% capture email_title %}Thank you for your purchase! {% endcapture %}
{% capture email_body %}Hi {{ customer.first_name }}, we're getting your order ready to be shipped. We will notify you when it has been sent.{% endcapture %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="margin: 0;padding: 0;min-width: 100%;background-color: #ffffff;">
...
Example of styling options for the material theme. Please note that the header color option is only available in this theme.
You can use custom colors by updating the default values for each variable. Use full HEX color codes for maximum compatibility.
Update the email background use email_background. To customize the jumbotron background color update the value for jumbotron. Do the same for the header background if available.
Add extra information to the email footer by adding your social links to the footer icon variables or add the store address ( footer_address = “Store Address” ).
footer_icon_1 adds Twitter icon, corresponding image is email_footer_icon_1.png
footer_icon_2 add Instagram icon, corresponding image is email_footer_icon_2.png
footer_icon_3 add YouTube icon, corresponding image is email_footer_icon_3.png
footer_address adds store address next to the copyright notice
If you're having trouble with your purchase and need assistance you can get in touch with me by going to the Support tab on the item page.
You can find the Support tab on the ThemeForest item page.
A quick way to do this is by going to the Account menu and clicking on Downloads. Find the item and click on the title.
You can also use the form on the EnvatoMarket profile page.