Shopify version install guide and customization

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.

 

What’s included

Default Shopify emails for Order, Shipping, Customer and Templates.

  • images folder
  • 01_order_confirmation.txt
  • 02_order_canceled.txt
  • 03_order_refund.txt
  • 04_draft_order_invoice.txt
  • 05_abandoned_checkout.txt
  • 06_pos_and_mobile_receipt.txt
  • 07_gift_card_created.txt
  • 08_fulfillment_request.txt
  • 09_shipping_confirmation.txt
  • 10_shipping_update.txt
  • 11_shipment_out_for_delivery.txt
  • 12_shipment_delivered.txt
  • 13_customer_account_invite.txt
  • 14_customer_account_welcome.txt
  • 15_customer_account_password_reset.txt
  • 16_contact_customer.txt
  • 17_new_order.txt
  • 18_new_order_mobile.txt

 

How to Install

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

Theme Accent colors
  default #3cc28d
  material #03a9f4
  bootstrap #0275d8

 

Extra Layout Options

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

How to get in touch

As you probably guessed by now, I'm an email-person. If you have additional questions, you want to show your support, or just say hello, send me a shout at

ionut⊛notification-emails.com

Item support

For less hassle with license codes, use this form.