How to customize the Upcoming order email

Recharge uses your global styles from your Page Builder (such as logos, colors, fonts, and spacing) to automatically style your Upcoming order email. To fully customize the notification, Recharge provides you access to the HTML/Jinja template so you can make any changes you'd like.

This guide explains how to make common edits and how to extend the template further using available variables.

Before you start

• Recharge recommends sending a test email after each change to confirm your template renders as expected. This helps catch formatting issues, broken Jinja logic, or missing data before your customers receive the message.

Change your logo

You can edit your logo directly in the page builder:

1. Open your Upcoming order email experience.
2. Click on the Notification node and select Customize landing page.
3. Select Global styles.
4. Click Select Image under Logo.
5. Upload or replace your logo image.
6. Adjust the width for your logo.
7. Click Done to save your changes.

Customers see your logo in the header of the email.

Change the email font

Email clients only support web-safe or CDN-hosted fonts. If your website uses a custom font, Recharge recommends you leave the option to "inherit" in your global styles so that your landing page automatically uses the same font. You can override this option or use a different font just for your email notifications:

1. Open your Upcoming order email experience.
2. Click on the Notification node and select Edit email body.
3. Locate the following in the Email body: {% set font_family = (store.global_styles.global_body_font|title) if store.global_styles.global_body_font != 'inherit' else 'Helvetica Neue' %}
   
4. Replace (store.global_styles.global_body_font|title) if store.global_styles.global_body_font != 'inherit' else 'Helvetica Neue' with the name of your new font.
   
5. Click Done and Apply to save your changes.

Recharge supports the following fonts:

• Alegreya
• Arvo
• Berkshire Swash
• Bitter
• Cabin
• Cinzel
• Cormorant
• Dancing Script
• DM Sans
• Exo
• Inter
• Josefin Sans
• Lato
• League Spartan
• Lora
• Merriweather
• Montserrat
• Noto Sans
• Nunito
• Open Sans
• Oswald
• Playfair Display
• Poppins
• PT Sans
• Raleway
• Roboto
• Rubik
• Source Sans Pro
• Ubuntu
• Work Sans

Update the Preview Text

The Preview Text is the short snippet of text that appears next to or below the subject line of an email in most email clients. 

You can update the Preview Text in the email body editor: 

1. Open your Upcoming order email experience.
2. Click on the Notification node and select Edit email body.
3. Locate the following in the Email body: {% set preview_text = 'This is a reminder of your upcoming order: Review your products and easily make any last-minute changes before it ships.'%} 
   
4. Replace the text in quotes with your preferred messaging.
5. Click Done and Apply to save your changes.

Available variables

Use the following variables when customizing your Upcoming order email.

Store details variables

Customer details variables

Charge details variables

Charge line items variables

To display individual products from a charge, use the {{ charge.line_items }} array in a for-loop. Each item in the array contains product-specific information like quantity, title, and total price.

Example

<ul>
{% for item in charge.line_items %}
<li>{{ item.quantity }}× {{ item.title }} – {{ item.total_price }}</li>
{% endfor %}
</ul>

Available variables

Billing and shipping address variables

Delay options variables

Recharge provides a list of delay options that you can display in your Upcoming order emails, allowing customers to postpone upcoming charges.

Example

{% if delay_options %}
{% for d in delay_options %}
{% if d.unit != "custom" %}
<a href="{{ d.url }}">Delay {{ d.value }} {{ d.unit }}</a>
{% else %}
<a href="{{ d.url }}">Choose custom date</a>
{% endif %}
{% endfor %}
{% endif %}

Cross-Sell products variables

You can dynamically display cross-sell product recommendations in your Upcoming order email using the {{ cross_sell_products }} array. These products are typically surfaced post-purchase or ahead of a scheduled charge to encourage add-ons and increase order value.

Example

{% if cross_sell_products %}
{% for p in cross_sell_products %}
<a href="{{ p.url }}">Buy {{ p.product_title }}</a>
<img src="{{ p.image.original }}" alt="{{ p.product_title }}"/>
{% endfor %}
{% endif %}

Variables

Cross-Sell discount variables

Translate delay option frequency units

The Upcoming order email does not automatically translate the delay option frequency units. To display translated units, create a translation map in the email template and reference the translated value when rendering each delay option.

Example

{% set unit_translations = {
  'day': 'jour',
  'week': 'semaine',
  'month': 'mois',
  'year': 'année',
  'hour': 'heure',
  'minute': 'minute',
  'custom': 'custom'
} %}

{% if delay_option.unit != 'custom' %}
  Je souhaite un report de {{ delay_option.value }} {{ unit_translations[delay_option.unit] }}{% if delay_option.value  1 %}s{% endif %}
{% else %}
  Choisissez la date qui vous convient
{% endif %}

Update the values in unit_translations to match your preferred language. This example uses French translations and adds an s when the delay value is greater than one.