Set up the Order Confirmation Email

Set up the Order Confirmation Email

Overview

Shopify’s order confirmation email shows the product name and variant. It does not show Appify CPO selections, and its built-in reorder posts only a variant id.

This article adds both:

  • The customer’s visible options under each line (Width, Material, engraving text, and so on)
  • A Reorder this item link that rebuilds that configuration in the clicker’s cart

Do this in Shopify Admin → Settings → Notifications → Order confirmation → Edit code. You can also start from the Appify CPO dashboard setup card. Shopify does not let apps read this template, so you paste the code yourself (or use Update with AI on the dashboard).

Search for APPIFY CPO PROPERTIES or APPIFY CPO REORDER later if you need to find or remove a block.

What the customer sees

Under each customized product they see their options as labeled lines (for example, “Width: 48 inches”). Names that start with _ stay hidden.

Reorder this item opens https://your-store.com/apps/calculator-ai/reorder?state=…, shows a short restore message, then lands on /cart. If the published calculator changed, they review the filled-in options first. The link is hidden when _state is blank (older orders).

Snippets to paste

Paste both blocks, in this order, at every product-title location below.

Custom options

<!-- APPIFY CPO PROPERTIES -->
{% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <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>
<!-- APPIFY CPO END PROPERTIES -->

When the nearby code uses component instead of line, change every line.properties in that block to component.properties.

Reorder

<!-- APPIFY CPO REORDER -->
{% assign st = line.properties._state %}
{% if st == blank %}
  {% assign st = line.properties["_state"] %}
{% endif %}
{% if st == blank %}
  {% assign st = component.properties._state %}
{% endif %}
{% if st == blank %}
  {% assign st = component.properties["_state"] %}
{% endif %}
{% if st != blank %}
  <p><a href="{{ shop.url }}/apps/calculator-ai/reorder?state={{ st }}">Reorder this item</a></p>
{% endif %}
<!-- APPIFY CPO END REORDER -->

Steps

Step 1: Open the template

  1. In Shopify admin go to Settings → Notifications.
  2. Under Customer notifications, open Order confirmation.
  3. Click Edit code.
  4. Place the cursor in the Email body (HTML) editor and press Ctrl + F (Windows) or Command + F (Mac).

On an unmodified Shopify default template, make five pastes. If you have edited the template, run the same searches and paste at every match that shows a product title.

Replacement 1 — first order-summary title (about line 394)

  1. Search for {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}.
  2. On an unmodified template the first match is about line 394.
  3. Find the closing </span> and the <br/> on that same title line.
  4. Paste the Custom options snippet, then the Reorder snippet, on the next lines.

It should look like this after the paste:

<span class="order-list__item-title">{{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}</span><br/>

<!-- APPIFY CPO PROPERTIES -->
{% for property in line.properties %}
  {% assign property_first_char = property.first | slice: 0 %}
  {% if property.last != blank and property_first_char != '_' %}
    <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>
<!-- APPIFY CPO END PROPERTIES -->
<!-- APPIFY CPO REORDER -->
{% assign st = line.properties._state %}
{% if st == blank %}
  {% assign st = line.properties["_state"] %}
{% endif %}
{% if st == blank %}
  {% assign st = component.properties._state %}
{% endif %}
{% if st == blank %}
  {% assign st = component.properties["_state"] %}
{% endif %}
{% if st != blank %}
  <p><a href="{{ shop.url }}/apps/calculator-ai/reorder?state={{ st }}">Reorder this item</a></p>
{% endif %}
<!-- APPIFY CPO END REORDER -->

Replacement 2 — second order-summary title (about line 1063)

  1. Search again for {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}.
  2. Open the second match. On an unmodified template this is about line 1063.
  3. Paste the same two snippets after that title’s </span><br/>.

Replacement 3 — third order-summary title (about line 2051)

  1. Search again for {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}.
  2. Open the third match. On an unmodified template this is about line 2051.
  3. Paste the same two snippets after that title’s </span><br/>.

Replacement 4 — fourth order-summary title (about line 2376)

  1. Search again for {{ line_title }}&nbsp;&times;&nbsp;{{ line_display }}.
  2. Open the fourth match. On an unmodified template this is about line 2376.
  3. Paste the same two snippets after that title’s </span><br/>.

Shopify keeps several order-summary layouts in one file. Each of these four titles is a different layout. Paste at all four so every layout shows options and Reorder.

Replacement 5 — component title (about line 2778)

Newer Shopify templates also print the title with component.

  1. Search for {{ component.variant.title }}.
  2. You will see several matches. On an unmodified template, use the one near line 2778 — it sits just below {{ component_title }} and {{ component.quantity }}.
  3. Find the {% endif %} that closes {% if component.variant.title != 'Default Title' %}.
  4. Paste both snippets after that {% endif %}.
  5. In this paste only, change line.properties to component.properties in the Custom options snippet (the Reorder snippet already checks both).

If you have already changed this template and the line number does not match, paste after every {{ component.variant.title }} block that sits under a product title.

Step 3: Save

  1. Click Save.
  2. Wait about 30 seconds.

New order confirmation emails will show the options and Reorder link.

Faster setup in Appify CPO

On the dashboard setup card, choose Order confirmation email, open the Shopify editor, copy the Email body (HTML), paste it into Update with AI, then copy the result back into Shopify and save. Mark the email complete when you are done.

Details

  • Anyone with the email can click Reorder. The item is added to their cart. It does not empty the cart.
  • Fee and shipping-weight rows are recreated when the product is re-added. Do not put Reorder on those rows.
  • If a search term is missing, your template differs from Shopify’s default. Use the dashboard updater, or paste the snippets under each product title you can see in the code.

Examples

  • Custom blinds — The confirmation lists Width: 48 inches and Fabric: Premium Linen. Reorder this item puts the same blind back in the cart.
  • Engraved gift — The customer sees the engraving text and font, then reorders the same piece later from the email.