A general knowledge of HTML and CSS will be need to make any changes to the email template. We suggest using the following link to find a template and modify it for your use:
https://stripo.email/templates/
In this tutorial, we will be using one of these templates and modifying it to work with the app.
Once you've selected your template, you can start editing it by clicking the Use In editor for Free button:
In our example, we dont need some of these sections so we will remove them and change the sections we do want to keep. To remove a section or element, click on it so the bounding box shows, then hover over the three dots to show more options. Click on the Trashcan icon to remove this:
The other icons are (in order) Save toLibrary, Move, Copy, and Delete
To edit a section or element, click on it show the bounding box so you know the element has been selected and change the text. You can also edit the colors, alignment, line spacing and padding by using the Content and Appearance panel on the left side:
This panel also serves to add images and edit links, like any social media buttons you want to add:
Now that we've edited our template, were ready to bring it into the app and add our short codes:
To do this, we will export the html file (you will need to create an account to be able to export the file). Click on the Export button at the top of the page:
Click on Html in the popup window, and click Download HTML File:
Open this file in a text editor program like NotePad, now we will add our shortcodes to the template. Shortcodes are what automatically pull the information for the order, like the customers name and products they want to purchase. You don't have to add the shortcodes in the text editor, you can always add them in the template editor if you prefer.
Locate your placeholder text that you will change to shortcodes
Before:
After:
Our example has the customers first name, products, subtotal, tax and total with the View Status button.
Here are the Shortcodes with brief description of each:
| {{ order_number }} | Order Number |
| {{ total_price }} | Order Total |
| {{ customer.first_name }} | Customer First Name |
| {{ customer.last_name }} | Customer Last Name |
| {{ currency }} | Order Currency |
| {{ customer.email }} | Customers Email |
| {{ ordertable }} | Product Details of the Order |
| {{ customer_name }} | Full Name, First & Last |
| {{ w3_public_notes }} | Custom Order Notes |
| {{ w3_private_notes }} | Custom Internal Notes |
| {{ w3_due_date | date:'dd-MM-yyyy' }} | Custom Due Date Formatted |
| {{ ordertable_with_properties }} | Product Details with Properties |
| {{ ordertable_with_properties_image }} | Product Details with properties & images |
| {{ ordertable_with_propeties_vendor }} | Product Details with properties & vendor |
| {{ tracking_company }} | Displays the tracking company (Carrier) |
| {{ tracking_number }} | Displays the tracking number |
| {{ billing_address.first_name }} | First Name of Customer from Billing |
| {{ billing_address.last_name }} | Last Name of Customer from Billing |
| {{ billing_address.address1 }} | Billing Address Line 1 |
| {{ billing_address.address2 }} | Billing Address Line 2 |
| {{ billing_address.city }} | Billing Address City |
| {{ billing_address.province_code }} | Billing Address State/ Province |
| {{ billing_address.zip }} | Billing Address Zip/Postal code |
| {{ billing_address.phone }} | Billing Phone |
| {{ shipping_address.first_name }} | First Name of Customer from Shipping |
| {{ shipping_address.last_name }} | Last Name of Customer from Shipping |
| {{ shipping_address.address1 }} | Shipping Address Line 1 |
| {{ shipping_address.address2 }} | Shipping Address Line 2 |
| {{ shipping_address.city }} | Shipping Address City |
| {{ shipping_address.province_code }} | Shipping Address State/ Province |
| {{ shipping_address.zip }} | Shipping Address Zip/Postal code |
| {{ shipping_address.phone }} | Shipping Phone |
| {{ note }} | Notes from Order |
Once we've added our shortcodes we can now copy the code and place it in the app, press ctrl+A to select all and copy.
Now open the app and go to the Email Templates tab and click on the Status template you want to edit, make sure your on the HTML tab (Design will let you see how the email looks):
Select all of the html in the editor and paste your copied code, if you didn't add the shortcodes previously add them now. Scroll to the bottom and click the Save Template button.
You've now successfully edited this status template!
| Before | After |
If your having problems or not sure about something, please email us at support@w3trends.com
We'd be happy to help you with the status templates!