Beyond the Basics: How to Display Custom Product Options on Shopify Order Confirmations & Receipts

Hey everyone,

As a Shopify expert and community analyst, I often see recurring questions that highlight common pain points for store owners. One such topic that popped up recently, generating some really helpful discussion, was around getting those crucial "additional details" – think custom product options like burger toppings or engraving requests – to show up properly on order confirmation emails and POS receipts.

The Challenge: Where Did My Custom Details Go?

Our friend expressivearomas kicked off a thread asking exactly this. They had a product options app capturing extra details at checkout, saving them as "additional details" with the customer's order. The goal? To have these custom options visible on the order confirmation email and mobile receipt, not just buried in the admin.

This is a super common scenario. You invest in an app to give customers more choices, but then those choices don't always flow seamlessly into your customer communications. It can lead to confusion for customers and extra work for you if you have to manually confirm details.

Understanding How Shopify Stores Custom Data

The core of the problem, as Taha_Dev and v.marychenka pointed out, is that Shopify can store these custom bits of information in a few different places:

• line.properties: Custom options tied directly to a specific product line item (e.g., "lettuce" and "tomato" for a "burger").
• attributes: Custom fields applied to the order as a whole (e.g., a gift message for the entire order).
• note: A general order note.
• Metafields: A more advanced way to store custom data, often used by apps.

Knowing where your app saves this data is the first, most critical step.

Step 1: The Detective Work – Finding Your Data's Hiding Spot

Before you dive into editing code, you need to figure out which of these storage spots your product options app is using. v.marychenka shared a brilliant diagnostic code snippet for this. It's a temporary piece of code that will print out all potential custom data points onto a test receipt.

How to Run the Diagnostic:

1. Navigate to Notifications: In your Shopify Admin, go to Settings > Notifications > Customer notifications.

2. Find the POS and Mobile Receipt Template: Under "Point of Sale," click "POS and mobile receipt," then Edit code.

3. Paste the Diagnostic Code: At the very top of the code editor, paste the following Liquid code snippet:

   Note: {{ note }}
   
   {% for a in attributes %}Order {{ a.first }}: {{ a.last }}
   {% endfor %}
   {% for line in line_items %}{% for p in line.properties %}{{ line.title }} {{ p.first }}: {{ p.last }}
   {% endfor %}{% endfor %}
   

   Important: v.marychenka advises doing this when your shop is quiet, as every receipt sent during this time will include these test lines.

4. Save and Test: Click Save. Then, ring up a test order (like a "burger with toppings" as expressivearomas described) through your POS. Make sure to tap "Email receipt" and send it to your own email address.

5. Analyze the Test Receipt: Check the email. Look for lines starting with "Note:", "Order [attribute name]:", or "[product title] [property name]:". This will tell you exactly where your custom options are being stored.

6. Remove Diagnostic Code: Once you've identified the storage location, go back to the "POS and mobile receipt" template and remove the diagnostic code you added. Save it again.

Step 2: Implementing the Fix – Displaying Your Details

Now that you know where the data lives, you can apply the correct code to both your "Order confirmation" email and your "POS and mobile receipt" templates. Remember, as v.marychenka stressed, you'll likely need to edit both templates if you want the details everywhere.

Before you make any changes, always copy the existing template code into a document as a backup!

Option A: If Details are Stored as line.properties (Per Item)

This is common for product options like toppings or engraving text. You'll want these details to appear right under the product name in the order summary.

1. Open Templates: Go to Settings > Notifications > Customer notifications.

2. Edit Order Confirmation & POS Receipt: Click on "Order confirmation," then Edit code. Repeat for "POS and mobile receipt" under "Point of Sale."

3. Find the Product Title: In both templates, search for line.title. This is where the product name is displayed.

4. Paste the Code: Immediately after the line containing line.title, paste this code snippet:

   {% for p in line.properties %}
     {% assign first_char = p.first | slice: 0 %}
     {% unless p.last == blank or first_char == '_' %}
       
   {{ p.first }}: {{ p.last }}
     {% endunless %}
   {% endfor %}
   

   This code loops through all properties for each line item, filtering out empty or internal properties (those starting with an underscore _).

5. Preview and Save: Always click Preview before hitting Save.

Option B: If Details are Stored as attributes (Order-Wide)

If your diagnostic test showed the details under "Order attributes" (e.g., a gift message for the entire order), you'll use this code. You'll typically want these to appear in a general "Order Details" section.

1. Open Templates: Go to Settings > Notifications > Customer notifications and open both "Order confirmation" and "POS and mobile receipt" for editing.

2. Find a Suitable Spot: Look for a section related to general order information, or create a new one. A good place might be near shipping/billing address details, or at the top/bottom of the order summary.

3. Paste the Code: Paste this snippet:

   {% for a in attributes %}
     {{ a.first }}: {{ a.last }}
   
   {% endfor %}
   

   This code simply loops through all order attributes and displays them.

4. Preview and Save: Don't forget to preview your changes before saving!

What If Neither Option Works? (Metafields)

If your diagnostic test didn't reveal your custom details in note, attributes, or line.properties, it's highly likely they're being stored as metafields. This is a more advanced storage method often used by sophisticated apps.

In this case, your best bet is to reach out to the support team for the product options app you're using. Ask them for the specific "namespace" and "key" they use to store the data. With that information, a developer can help you pull the metafields into your notification templates.

Customizing your Shopify notifications can feel a bit daunting, especially when you're diving into Liquid code. But as this community thread shows, with a little detective work and the right snippets, it's totally achievable!

The key takeaways here are:

• Diagnose first: Always figure out where your data is stored before trying to implement a fix.
• Backup always: Copy your template code before making any changes.
• Test thoroughly: Make a real test order and check the email/receipt before pushing live.

It's amazing how much you can achieve by leveraging the power of the Shopify platform and the collective wisdom of its community. Happy customizing!