Easy Shop Newsletter Template
The Easy Shop newsletter template can be used with any email/newsletter software to showcase an online shop of any sort.
It has a beautiful call to action section/banner at the top, then a section for products and more sections for promotions, content or articles as needed.
It includes a standard HTML newsletter template which can be used universally with any email/newsletter software and then a dedicated newsletter template to be used with our WordPress Newsletter plugin which includes all the necessary shortcodes, tracking, content areas, etc. to make it as easy as possible for you to start sending newsletters.
Included in the Package
- Photoshop file (PSD)
- Font files (TTF)
- Images (JPG, PNG, etc)
- Mixed version (index.html)
- Newsletter plugin version (index-newsletters.html)
Installing the Newsletter Template
These installation instructions are mainly for installation and use with our WordPress Newsletter plugin to illustrate the use of shortcodes and other features.
For any other email/newsletter software, you shouldn’t have to follow any specific instructions other than just uploading the HTML file or pasting the HTML code into that software.
Add to the Newsletter Plugin
Once you have purchased and downloaded the newsletter template, extract the ZIP which contains all the included files as mentioned above.
First, you’ll want to upload all the files in the
images/ folder somewhere on your server via FTP or through the WordPress media uploader accordingly since emails always pull images remotely on the clients’ side. Once you have uploaded the contents of the
images/ folder somewhere, make a note of the remote, absolute URL to that folder.
Now go to Newsletters > Templates in the Newsletter plugin and click “Add New” at the top. Fill in a title, choose the
index-newsletters.html file which will be uploaded. Alternatively, you can copy/paste the file’s HTML.
The newsletter template is distributed with relative image paths. So the images are
src="images/logo.jpg" for example and you want them to be remote, absolute URLs like
src="http://domain.com/easy-shop/images/logo.jpg" so that all readers/subscribers can pull the images into their email clients. Eg, in this case, the prepend URL will be
http://domain.com/easy-shop/ that will be added before
images/logo.jpg for example. Now take the URL of where you uploaded the images previously and put that into the “Image Prepend URL” setting/field.
Should I Apply Inline Styles?
The inline styles are optional and you can apply them if you’d like for cross-client compatibility but it is up to you.
We recommend that you do not apply the inline styles at the time of saving the newsletter template but that you rather turn on the “Auto Inline Styles” setting under Newsletters > Configuration > Sending Settings in the plugin itself. That way the raw newsletter template can be used and inline styles can be applied at the time of sending to both the template and the content inside it for more accurate rendering.
Then save your template and you’re done! If the images appear broken, you know that there is an issue with your image prepend URL or that the images weren’t uploaded correctly.
Using the Different Areas/Elements
The Easy Shop newsletter template comes with several elements/sections that you can use.
1. Logo Image
The logo image can be changed by editing the template under Newsletters > Templates by selecting the image, clicking the image icon/button in the WYSIWYG editor and then specifying a new logo image URL of your own logo as needed.
The link on the logo automatically goes to your WordPress site’s home page with the use of the
2. View Online Text & Link
The view online text and link can be changed or text can be added to this block by editing the newsletter template under Newsletters > Templates in the plugin. The “Click Here” link’s URL is automatically generated by the
3. Main Menu/Navigation
The menu/navigation can be edited by editing the template under Newsletters > Templates. You can change the text of the existing links, remove some or additional menu items as needed. They don’t link to anything by default so you can insert URLs to link to as needed.
4. Banner/Call To Action Image
The banner/call to action image can be changed out with any image by editing the template under Newsletters > Templates by using the WYSIWYG editor. Simply select the image and click the image icon/button in the editor to replace it with your own image.
It links to your home page by default using
5. Products/Services Grid
The products are fixed/static and can easily be edited by editing the newsletter template under Newsletters > Templates in the plugin.
To edit the products, select the images and insert your own, change the text of the prices to insert your own prices and insert your own URLs on the “Buy Now” buttons to link to your products accordingly.
To add more products, such as another row of 3 products, simply copy and paste the first set of products over to create a second row, resulting in 6 products total.
6. First Content Block
The first content block can contain any text or HTML as needed.
By default, it contains
[newsletters_content id="1"] which will automatically insert the content of the first content area that you add to a newsletter.
To generate a post with heading, excerpt, featured thumbnail and “Read More” button as illustrated above, you may use a
[newsletters_post...] shortcode such as this:
That generates the same output as you see in the image above for #6.
7 & 8. Second and Third Content Blocks
The second and third content blocks work in a similar fashion as the first one.
They can be used for any text/HTML but by default, they contain
[newsletters_content id="2"] and
[newsletters_content id="3"] which will result in showing the content of content areas 2 and 3 that you add to a newsletter.
To output a post with a heading, larger (medium) thumbnail, an excerpt and “Read More” link as illustrated above, you may use a shortcode such as this:
9. Footer Text and Unsubscribe Link
The footer text consists of several parts.
The email address uses
[newsletters_bloginfo show="admin_email"] to output the WordPress administrator email.
The telephone number is static and can be edited manually with your own business phone number.
The copyright is static but the year date is generated by
[wpmldate format="%Y"] automatically.
The unsubscribe link is automatically generated by
10. Social Media Icons/Links
The social media icons are static images with no URLs linking on them.
You can add more icons or change the images out to your own social media icons as needed.
You can also remove some of them if you only use certain of the illustrated social networks.
Then put the URLs of your social network pages on the images to link them accordingly.