Start by uploading the contents of the email/img directory to your theme assets folder, you can do this via the admin page by clicking the active theme Edit HTML/CSS button, expanding the Assets folder tree and clicking Add a new asset.
To update your live email designs, click "Settings" then click "Notifications", you should now see a list of each live email template, click the one you want to update ("Order Confirmation" for example), click the "HTML Email" tab and delete whatever is in there already. Now you'll need to find the relevant template, in this case we'd open the email/order-confirmation.html file, highlight all code, copy it, go back to your web browser and paste in the code.
You're now ready to start tweaking the variables, these are the blocks at the top of the file which look like this:
{% capture something %}
Stuff here
{% endcapture %}
You can edit anything in-between the {% capture something %}{% endcapture %} tags and the changes will reflect throughout the template.
You can also remove certain variables, for example, if you don't want the coupon code promo sections to show just simply remove any variable which has coupon in the name, so in the case you'd delete the following:
{% capture coupon_code %}
Stuff here
{% endcapture %}
{% capture coupon_message %}
Stuff here
{% endcapture %}
This is an optional step, it allows you to manage the images and icons used in the email deigns.
Copy the following code to the very bottom of your theme's config/settings.html file.
<fieldset>
<legend>HTML Emails</legend>
<h3 class="heading">Images</h3>
<table>
<tr>
<th>
<label>Logo</label>
</th>
<td>
<input type="file" name="email-logo.gif" data-max-width="250" data-max-height="250" />
</td>
</tr>
<tr>
<th>
<label>Product Share Facebook Icon</label>
</th>
<td>
<input type="file" name="email-product-fb-icon.gif" data-max-width="30" data-max-height="30" />
</td>
</tr>
<tr>
<th>
<label>Product Share Twitter Icon</label>
</th>
<td>
<input type="file" name="email-product-tw-icon.gif" data-max-width="30" data-max-height="30" />
</td>
</tr>
<tr>
<th>
<label>Product Share Pinterest Icon</label>
</th>
<td>
<input type="file" name="email-product-pi-icon.gif" data-max-width="30" data-max-height="30" />
</td>
</tr>
<tr>
<th>
<label>Footer Facebook Icon</label>
</th>
<td>
<input type="file" name="email-fb-icon.gif" data-max-width="50" data-max-height="50" />
</td>
</tr>
<tr>
<th>
<label>Footer Twitter Icon</label>
</th>
<td>
<input type="file" name="email-tw-icon.gif" data-max-width="50" data-max-height="50" />
</td>
</tr>
<tr>
<th>
<label>Footer Pinterest Icon</label>
</th>
<td>
<input type="file" name="email-pi-icon.gif" data-max-width="50" data-max-height="50" />
</td>
</tr>
<tr>
<th>
<label>Footer Instagram Icon</label>
</th>
<td>
<input type="file" name="email-in-icon.gif" data-max-width="50" data-max-height="50" />
</td>
</tr>
<tr>
<th>
<label>Tick Icon</label>
</th>
<td>
<input type="file" name="email-tick-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Cross Icon</label>
</th>
<td>
<input type="file" name="email-cross-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Back Icon</label>
</th>
<td>
<input type="file" name="email-back-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Lock Icon</label>
</th>
<td>
<input type="file" name="email-lock-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Van Icon</label>
</th>
<td>
<input type="file" name="email-van-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Gift Icon</label>
</th>
<td>
<input type="file" name="email-gift-icon.gif" data-max-width="100" data-max-height="100" />
</td>
</tr>
<tr>
<th>
<label>Gift Icon (Large)</label>
</th>
<td>
<input type="file" name="email-gift-icon-large.jpg" data-max-width="300" data-max-height="200" />
</td>
</tr>
</table>
</fieldset>If you want to make more advanced changes to these templates you'll need to understand and be able to run the build process first and throughout development.
- Node.js (Download and run the installer from nodejs.org)
- Grunt's command line interface (
sudo npm install -g grunt-cli) - Ruby (Download and run the installer from ruby-lang.org)
- Sass (
sudo gem install sass) - Premailer (
gem install premailer hpricot nokogiri)
If you haven't used Grunt before check out Chris Coyier's post on getting started with Grunt.
Open up terminal, cd to this directory and run npm install to install the necessary packages.
cd shopify-custom-html-email
npm install
grunt
All automation is powered by Grunt, when making changes to the templates you should run the default grunt task with the grunt command, when run the following happens:
- A local server is started and opened in your default browser, using
email/as the base, so you can view the project web pages/files as if you were on a live server. - Sass files located in
src/scss/are compiled tosrc/css/, if you're not familiar with Sass, think CSS on steroids. - Any
.htmlfiles located inemail/get deleted, so we start from a fresh set of emails each time the Grunt task is run. - All files located in
src/templates/get run through the simple template system assemble and compiled toemail/, this is used to avoid code repetition. - The files which have just been run through assemble get further processed through Premailer, this inlines all CSS.
- Files get watched for changes, if changed their corresponding task will run again, if your browser is on the local server, it will auto-refresh the pages too, so you can see the changes without having to manually refresh every time.
When you're done making changes, just run the grunt build task, this does all the above and then minifies the HTML (this is needed to due the Shopify email template byte limit). When this task has completed you now have production-ready files to use.