Emails
Examples

Email Templates Code Examples

This article provides examples of how to customize email templates. The examples are for use in the recently updated templates. You can enable the new version of transactional emails by going to Marketing > Transactional Emails and clicking Try New Experience. When you are ready to use a template, make sure to Enable the template from the respective dropdown.

The following code examples demonstrate how to update text, add a button, change logo size, change the font size, and add a tracking script to an email.

Previewing changes can help you write accessible emails (opens in a new tab). Read more about satisfying Web Content Accessibility Guidelines (WCAG) 2.1 (opens in a new tab) with BigCommerce's Stencil framework.

Updating text

To change existing text in an email template, update information in the Phrases and Code tabs. For detailed instructions, see Editing Template Phrases (opens in a new tab).

Adding a button

You can create an email button using HTML. The following code example adds a blue button with white text to the Account Created template.

Go to Transactional Emails > Email Templates. Click ... next to Account Created and select Edit Template. Copy and paste the contents below into the Content editor. Ensure that you paste the text outside the open <table> and closed </table> tags.

Add an email button
<table class="row">
   <tr>
      <th class="column">
         <table>
            <tr>
               <th>
                  <a href="{{store.path}}" style = "background-color:blue; color:white" class="sign-in">{{lang 'sign_in'}}</a>
               </th>
               <th class="expander"></th>
            </tr>
         </table>
      </th>
   </tr>
</table>

You can select a different button background and text color. We suggest adhering to the minimum color contrast standards (opens in a new tab) set by WCAG.

Add button

Changing logo size

To change the size of your logo that appears in your email, specify width and height values in the Content editor. Go to Transactional Emails > Email Templates. Click ... next to Order Email and select Edit Template. Go to the Code tab and replace:

Default logo size
<img src="{{store.logo.url}}" alt="{{store.logo.title}}">

with

Custom logo size
<img src="{{store.logo.url}}" alt="{{store.logo.title}}" width="200" height="200">

You can also add width and height values to images.

Change logo size

Changing font size

To change the email font size, use the style attribute. You can define attributes such as color and font size within the paragraph <p> tag. Go to Transactional Emails > Email Templates, click ... next to Guest Account, and select Edit Template. Go to the Code tab and replace:

Default font size
<p>{{lang 'help'}}</p>

with

Custom font size in pixels
<p style="font-size:16px;">{{lang 'help'}}</p>

To make your text responsive so that readers can view it on a variety of devices and screen sizes, use the viewport width (vw) unit to set the font-size. vw style settings allow you to control the widths of elements no matter the viewport size.

Custom font size in pixels using viewport width
<p style="font-size:2.0vw">{{lang 'help'}}</p>

Adding a tracking script

You can add a tracking script to an email template. To ensure that the script appears in the email, add or update information in the Phrases and Code tabs.

Go to Transactional Emails > Email Templates. Click ... next to Order Status Update and select Edit Template. In the Phrases tab, use tracking_title for phrase name and Tracking information for phrase value. Then copy and paste the contents below into the Content editor.

Add a tracking script
 <th>
   <h2>{{lang 'tracking_title'}}</h2>
   {{#if order.tracking}}
      <ul class="tracking">
         {{#each order.tracking}}
            <li>
               <p>
                  <a href="{{link}}" target="_blank">
                     {{#if id}}
                        {{id}}
                     {{else}}
                        {{lang 'tracking_label'}}
                     {{/if}}
                  </a>
                  {{#if shipping_method}}
                     ({{shipping_method}})
                  {{/if}}
               </p>
            </li>
         {{/each}}
      </ul>
   {{else}}
      <p class="tracking">{{lang 'no_tracking_numbers'}}</p>
   {{/if}}
</th>

Add tracking email

Did you find what you were looking for?