When a customer orders a customized product, BigCommerce includes it in its order emails like any other product. With a few changes to your email templates, these emails can show the customer's design and a readable summary of their choices.
NOTE
This article involves editing the HTML code of your email templates. If you're not comfortable with code, we recommend asking a web developer to make these changes for you.
How order emails work with Kickflip
Each customized product is added to the cart with 4 Kickflip options that carry the customer's design:
Option | Content |
Design ID | The design's identifier in Kickflip. |
Design Image | A link to the image of the customer's design. |
Design Token | A technical key that protects the design. |
Design Summary | The customer's choices, one per line (e.g. Base Color: Orange). |
By default, the Order Email and Order Status Update templates show every product option as plain text. Without any changes, your customers will see these 4 options as they are, including the technical ones, and the product image instead of their design.
After the changes below, these emails show:
The customer's design instead of the product image.
The design summary, one choice per line.
Your other product options as usual.
The Design ID, Design Image and Design Token options are hidden.
Before you start
In your BigCommerce admin, go to Marketing › Transactional Emails.
Next to the template you want to change, click ..., then Edit Template.
Open the Code tab.
After each change, click Save, then place a test order to check the result.
Order Email (order confirmation)
The Order Email template is sent to the customer when they place an order. It's the most important one to update.
Showing the design image
Press Ctrl + F (Cmd + F on Mac) and search for products__image-container.
Select the whole block that contains it, from
{{#if thumbnail}}to the next{{/if}}:{{#if thumbnail}}
<th class="products__image-container">
<img src="{{thumbnail}}" class="products__image" alt="{{name}}">
</th>
{{/if}}Replace it with:
{{#if thumbnail}}
<th class="products__image-container">
{{#if attribute_lines}}
{{#contains (join attribute_lines '|') 'Design Image: '}}
{{#each attribute_lines}}
{{#contains this 'Design Image: '}}
<img src="{{#replace 'Design Image: ' this}}{{/replace}}" class="products__image" alt="{{../name}}">
{{/contains}}
{{/each}}
{{else}}
<img src="{{thumbnail}}" class="products__image" alt="{{name}}">
{{/contains}}
{{else}}
<img src="{{thumbnail}}" class="products__image" alt="{{name}}">
{{/if}}
</th>
{{/if}}Click Save.
Customized products now show the customer's design. Your other products keep their regular image.
Showing the design summary
Search for products__attributes.
Select the whole block that contains it:
{{#if attribute_lines}}
<p class="products__attributes">{{join attribute_lines ', '}}</p>
{{/if}}Replace it with:
{{#if attribute_lines}}
<p class="products__attributes">
{{#each attribute_lines}}
{{#contains this 'Design Summary: '}}
<span style="display: block; white-space: pre-line;">{{#replace 'Design Summary: ' this}}{{/replace}}</span>
{{else contains this 'Design ID: '}}
{{else contains this 'Design Image: '}}
{{else contains this 'Design Token: '}}
{{else}}
<span style="display: block;">{{this}}</span>
{{/contains}}
{{/each}}
</p>
{{/if}}Click Save.
The summary is now shown one choice per line, and the technical options are hidden. Your other product options are shown one per line.
Order Status Update
The Order Status Update template is sent when the order status changes (for example, when it's shipped). It lists products in several sections (products shipped, products to be shipped, ready for pickup, picked up), and each section has its own copy of the product code. Repeat the two changes below in every section.
NOTE
In this template, product options are stored as a name and a value, so the code differs slightly from the Order Email template.
Showing the design image
Search for products__image-container.
For each match, select the block:
{{#if thumbnail}}
<th class="products__image-container">
<img src="{{thumbnail}}" class="products__image" alt="{{name}}">
</th>
{{/if}}Replace it with:
{{#if thumbnail}}
<th class="products__image-container">
{{#any attribute_lines name='Design Image'}}
{{#each attribute_lines}}
{{#if name '===' 'Design Image'}}
<img src="{{value}}" class="products__image" alt="{{../name}}">
{{/if}}
{{/each}}
{{else}}
<img src="{{thumbnail}}" class="products__image" alt="{{name}}">
{{/any}}
</th>
{{/if}}Click Save.
Known limitations
Your changes depend on BigCommerce's templates. If BigCommerce updates its default templates, or if you restore a template to its default version, you'll need to apply these changes again.
Only new emails are affected. Emails already sent keep their original content.
Line breaks in the summary rely on a style that some email clients, such as Outlook on desktop, don't support. In those clients, the summary choices may appear on a single line.
The design image is loaded from Kickflip. Some email clients block remote images until the customer chooses to display them, as they do for your product images.
Option names must stay unchanged. The code relies on the names Design ID, Design Image, Design Token and Design Summary. Don't rename these options on your products.