Show Custom Options on Order Confirmation Emails

Show Custom Options on Order Confirmation Emails

Overview

When customers fill out Calculator AI options on a product page, their selections are saved with the order. By default, Shopify's order confirmation email does not display these custom selections. You can update the email template so customers see exactly what they ordered — dimensions, materials, engraving text, or any other options they chose.

This involves a small edit to the order confirmation email template in Shopify Admin → Settings → Notifications.

Steps

Step 1: Open the Order Confirmation Email Template

  1. In your Shopify admin, go to Settings → Notifications.
  2. Under Customer notifications, find and select Order confirmation.
  3. Click Edit code to open the email template's HTML editor.

Step 2: Add the Custom Options Code

  1. Place your cursor in the Email body (HTML) editor.
  2. Use Ctrl + F (or Command + F on Mac) to open the search bar.
  3. Search for {{ component.variant.title }}. You will find multiple matches. If you have not modifyed this template, you should add the code to LINE 2778. If you have modified the template before, we suggest adding this code to every occurance you find.
  4. Locate the closing {% endif %} tag that follows the variant title line.
  5. Paste the following code directly after that {% endif %} tag:
<!-- CALCAI PROPERTIES -->
{% for property in component.properties %}
  {% assign property_prefix = property.first | slice: 0, 9 %}
  {% if property.last != blank and property_prefix != '_internal' %}
    <span class="order-list__item-property">
      • {{ property.first }}: {{ property.last }}
    </span>
  {% endif %}
{% endfor %}

<style>
 td.order-list__image-cell {
   display: flex;
 }
 span.order-list__item-property {
   display: block;
   height: max-content;
   margin-top: 5px;
   padding-left: 1.5em;
 }
</style>
<!-- CALCAI END PROPERTIES -->

If there are no results for {{ component.variant.title }}, your email template likely differs from Shopify's default version.

Step 3: Save Changes

  1. Click Save to apply your changes.
  2. Wait approximately 30 seconds for the changes to take effect.

New order confirmation emails will now display the customer's Calculator AI option selections alongside each line item.

Details

The code displays each custom option as a labeled line (e.g., "Width: 48 inches") beneath the product name in the email. Internal options used by Calculator AI for processing are automatically hidden — only the selections your customer made are shown.

If you have customized your order confirmation email template significantly, the search term from Step 2 may not appear. This means your template structure differs from Shopify's default, and the code may need to be placed in a different location.

    • Related Articles

    • Show Custom Options on New Order Notification Emails (Staff)

      Overview When a customer places an order with Calculator AI options, their selections are saved with the order. By default, the staff notification email that Shopify sends to you and your team does not include these custom selections. You can update ...
    • Show Custom Options on Packing Slips

      Overview When a customer places an order with Calculator AI options, their selections are saved with the order. By default, Shopify's packing slip template does not include these custom selections. You can update the packing slip template so your ...
    • Custom SKU Rules

      Overview Custom SKU rules let you automatically generate a unique SKU (Stock Keeping Unit) for every product configuration a customer creates. The SKU is built from fragments — short codes assigned to each option value — combined according to a ...
    • Working with Options

      Overview Options are the building blocks of your calculator. Each option represents a field, choice, or display element that appears in the calculator on your storefront. This article covers how to manage options — adding, reordering, duplicating, ...
    • AI Bulk Generate Options

      This is different from the Build with AI wizard that appears when creating a new calculator — AI Bulk Generate adds options to an existing calculator. Overview AI Bulk Generate lets you describe the options you need in plain English, and Calculator ...