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 to Library, Move, Copy, and Delete
To edit a section or element, click on it to 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:
Your template should have the Products and Checkout button as a bare minimum, our example has the customers first name, products, subtotal, tax and total with the Checkout button.
To add the products, you will need a for loop similar to below but with your styles added:
{% for line in line_items %}
<tr class="item">
<td>
{{ line.title }}
</td>
<td>
{{ line.price }} {{ currency }}
</td>
</tr>
{% endfor %}
The checkout button will need the href set to {{ invoice_url }}:
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 ctrl+C to copy.
Now open the app and go to the Templates tab and open the Email template, make sure your on the Editor tab (Preview will let you see how the template looks):
Select all of the html in the Editor tab and paste your copied code, if you didn't add the shortcodes previously add them now. Scroll to the bottom of the screen and click the Save button.
You've now successfully edited your email 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 email template!