Mastering Your Shopify Invoices: How to Add Customer Email (and Fix Layout Issues!)

View original discussion by FrankB1 on Shopify Community →

Hey there, fellow store owners! Ever found yourself tweaking your Shopify invoices, trying to get every detail just right? It’s a common scenario, and frankly, it’s those little touches that make your brand look professional and organized. Recently, a really helpful discussion popped up in the Shopify Community forums that I wanted to share, because it tackles a super common invoice customization challenge: getting customer emails to display correctly.

The original post, from a user named FrankB1, was straightforward: he wanted to add the customer’s email address to his Shopify Invoice App. Sounds simple enough, right? But like many things in web development, the devil's in the details. Frank found that after adding the code, the email address was showing up right next to the customer’s phone number, instead of neatly underneath it. Talk about a minor annoyance that can make an otherwise perfect invoice look a bit… off.

The Invoice Layout Puzzle: Why Email & Phone Were Side-by-Side

Frank shared his code snippet, which looked something like this:

{{ order.shipping_address | format_address }}
  {% if order.shipping_address.phone %}{{ order.shipping_address.phone }}{% endif %}
  {{order.email}}

He even included a screenshot, which is always super helpful for diagnosing these kinds of issues:

Address Code

As you can see, Frank was trying to add {{order.email}}, and while the Liquid code itself was perfectly fine, the output wasn't. The email and phone number were indeed on the same line. This is where a fantastic community member, Moeed, stepped in with a brilliant explanation and solution.

The HTML Whitespace Trick

Moeed quickly pointed out that the issue wasn’t with the Liquid code at all, but with how HTML handles whitespace. You see, new lines in your code editor don't automatically translate to new lines in the rendered HTML output. HTML is quite smart (and sometimes frustrating!) about collapsing whitespace, meaning multiple spaces or newlines often get treated as a single space. So, even though Frank’s code had the phone and email on separate lines in the editor, HTML was rendering them side-by-side.

The fix? You need to explicitly tell HTML to break the line. Moeed suggested two main ways: either using a
tag (which forces a line break) or, even cleaner, wrapping each element in its own block-level HTML element, like a

.

The Clean Solution: Using DIVs for Perfect Layout

Moeed’s recommended solution was to wrap the phone number and email in separate

tags. This is generally considered a cleaner approach than using multiple
tags, as
elements are block-level by default, meaning they'll naturally stack on top of each other.

Here’s the refined code snippet Moeed provided (and that Frank confirmed worked perfectly!):

{% if order.shipping_address %}


  {{ "invoice_template.ship_to_label" | t }}
  {{ order.shipping_address | format_address }}
  {% if order.shipping_address.phone %}
    
{{ order.shipping_address.phone }}

  {% endif %}
  {% if order.email %}
    
{{ order.email }}

  {% endif %}


{% endif %}

Notice a couple of smart additions here:

  • Each of the order.shipping_address.phone and order.email fields is now wrapped in its own
    tag. This ensures they each get their own line.
  • Moeed also included an {% if order.email %} condition around the email address. This is a brilliant touch! For orders created manually or via POS (Point of Sale), there might not be an associated email address. This conditional statement prevents an unsightly blank line or gap from appearing on those invoices, keeping everything looking tidy. Similarly, there's an {% if order.shipping_address %} wrapped around the whole block to ensure it only shows if there's a shipping address.

How to Implement This in Your Shopify Invoices

Ready to apply this fix to your own store? Here’s a step-by-step guide on how to update your invoice templates, typically found in your Order Printer app or similar invoice customization settings:

  1. Access Your Invoice Template: Depending on how you generate your invoices, you'll need to find the right place to edit the template.
    • For Shopify's built-in Order Printer app: Go to your Shopify admin, then Apps, and open Order Printer. Select the template you wish to edit.
    • For other invoice apps: Navigate to the settings or templates section within your specific invoice app.
    • For theme-based customizations (less common for invoices): You might need to go to Online Store > Themes > Actions > Edit code, and look for files like order.liquid or snippets related to invoice generation, but usually, invoice apps provide their own editor.
  2. Locate the Relevant Section: In your invoice template code, look for the section that displays the customer's shipping address, phone number, and where you intend to add the email. It will likely contain code similar to what Frank originally posted. You're looking for where order.shipping_address | format_address is used.
  3. Replace or Add the Code: Carefully replace the existing address block with Moeed's refined code. Make sure to copy the entire block accurately, including the {% if %} and
    tags.
    4. {% if order.shipping_address %}

    
  {{ "invoice_template.ship_to_label" | t }}
  {{ order.shipping_address | format_address }}
  {% if order.shipping_address.phone %}
    
    {{ order.shipping_address.phone }}
    
  {% endif %}
  {% if order.email %}
    
    {{ order.email }}
    
  {% endif %}

    
{% endif %}
  4. Preview Your Changes: Before saving, most invoice editors offer a preview function. Use it! Double-check that the email address now appears on a new line below the phone number, and that everything else still looks correct. Test it with orders that have an email and orders that don't, if possible.
  5. Save Your Template: Once you're happy with the changes, save your updated invoice template.

And there you have it! A seemingly small layout issue, solved with a clear understanding of HTML and Liquid, thanks to our wonderful Shopify Community. It just goes to show that even experienced users run into these kinds of snags, and the collective wisdom of the community is an invaluable resource. Keep those invoices looking sharp and professional!

Share:

Use cases

Explore use cases

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

Explore use cases