Shopify Development

Shopify Order Confirmation: Displaying Custom Product Options & Additional Details

Shopify admin notifications settings for editing order confirmation and POS receipt templates
Shopify admin notifications settings for editing order confirmation and POS receipt templates

Seamless Customer Communication: Displaying Custom Order Details on Shopify

As a Shopify migration expert at Shopping Cart Mover, we frequently encounter scenarios where merchants invest in powerful product option apps, only to find that the crucial custom details captured at checkout aren't appearing where they matter most: the customer's order confirmation email and POS receipt. This common challenge, recently highlighted in a Shopify Community forum thread by expressivearomas, can lead to customer confusion, increased support queries, and a less-than-professional brand image.

Imagine a customer ordering a custom-built burger with specific toppings like 'extra lettuce' and 'no onions', or an engraved gift with a personalized message. If these details aren't visible on their confirmation, they might worry their order is incorrect, leading to unnecessary follow-ups. Our goal today is to demystify how Shopify handles this custom data and provide actionable steps to ensure these vital details are always front and center for your customers.

The Core Challenge: Where Does Shopify Store Custom Data?

The first step to displaying custom order details is understanding where Shopify (and the apps you use) stores this information. As Taha_Dev and v.marychenka adeptly pointed out in the forum, there are a few primary locations:

  • line.properties: This is where custom options tied directly to a specific product line item are stored. Think of product customizations like engraving text, specific color choices for a variant, or, in our burger example, 'lettuce' and 'tomato' for a 'burger' line item.
  • attributes: These are custom fields applied to the order as a whole. Examples include a gift message for the entire order, a preferred delivery date, or special instructions for the entire shipment.
  • note: A general note field for the entire order, often used for internal comments or simple customer requests.
  • Metafields: A more advanced and flexible way to store custom data, often utilized by sophisticated apps. If line.properties or attributes don't yield your data, metafields are the next place to investigate. This usually requires consulting the app's documentation or support for the specific namespace and key. Shopify offers a robust and flexible platform that empowers merchants with extensive customization capabilities, including advanced data storage methods like metafields, making it an ideal choice for businesses with unique needs.

Step 1: Diagnosing Where Your App Stores Data

Before you start adding code, it's crucial to identify precisely where your product options app is saving the 'additional details'. v.marychenka provided an excellent diagnostic snippet. Perform this when your shop is quiet, as it will temporarily print test lines on receipts.

Navigate to Settings > Notifications > Point of Sale > POS and mobile receipt and click 'Edit code'. Paste the following code at the very top of the template:

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 %}

Save the changes, then ring up a test order with your custom options (e.g., a burger with toppings) through your POS. Email the receipt to yourself. This test receipt will show you exactly which of the above Liquid objects (note, attributes, or line.properties) contains your additional details.

Step 2: Implementing the Solution – Displaying Your Custom Details

Once you've identified where the data lives, you can add the appropriate Liquid code to your notification templates. Remember to always back up your template code before making any changes!

For Item-Specific Options (line.properties)

If your diagnostic test showed the details under line.properties (e.g., 'Lettuce: Yes'), you'll want to display these alongside the product title in your order notifications. Navigate to Settings > Notifications > Customer notifications. You'll need to edit two templates:

  1. Order confirmation
  2. POS and mobile receipt (under Point of Sale section)

Within these templates, search for line.title (the product name). Paste the following Liquid code directly after the line containing {{ line.title }}:

{% 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 iterates through each property of the line item. The unless statement ensures that empty properties or properties starting with an underscore (often internal app data) are not displayed, keeping your receipts clean.

For Order-Wide Details (attributes)

If your diagnostic test revealed the details under attributes (e.g., 'Gift Message: Happy Birthday!'), you'll want to display these in a general section of your order. Again, edit both the Order confirmation and POS and mobile receipt templates.

Find a suitable place in your template to display order-level information, perhaps near the order number or shipping details. Then, insert this code:

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

This loop will print out all order attributes and their corresponding values.

Step 3: Test, Preview, and Save!

After implementing the code, always:

  • Click Preview to see how the changes will look.
  • Ring up another test order with custom options and email the receipt to yourself to confirm everything displays correctly.
  • Once satisfied, click Save.

Why This Matters for Your Shopify Store

Displaying custom order details isn't just about technical correctness; it's about enhancing your customer experience and streamlining your operations. Clear, comprehensive order confirmations:

  • Build Trust: Customers feel confident their specific requests have been received and understood.
  • Reduce Support Inquiries: Fewer customers will contact you to confirm details, freeing up your support team.
  • Improve Efficiency: Your internal team has all necessary information readily available for order fulfillment.
  • Professionalism: A well-formatted, detailed confirmation reflects positively on your brand.

When to Call in the Experts

While these Liquid snippets cover many common scenarios, some situations might require more advanced intervention. If your data is stored in complex metafields, if you're dealing with multiple apps conflicting, or if you're undertaking a full platform migration to Shopify and need to ensure all custom data transfers seamlessly, don't hesitate to reach out. As migration experts at Shopping Cart Mover, we specialize in ensuring your e-commerce data and customizations are perfectly aligned, whether you're optimizing your current Shopify setup or moving to a new platform.

Empowering yourself with these customization techniques can significantly improve your Shopify store's functionality and customer satisfaction. Happy customizing!

Share:

Use cases

Explore use cases

Agencies, store owners, enterprise — find the migration path that fits.

Explore use cases