Customizing Shopify Invoices: How to Display Customer Email Correctly

View original discussion by FrankB1 on Shopify Community →

Hey everyone! As a Shopify migration expert and someone who spends a lot of time digging through community discussions, I often see common questions pop up that, while seemingly small, can make a huge difference in your day-to-day operations and customer communication. One such topic recently caught my eye in the Shopify forums: how to add a customer's email address to your store's invoices and, crucially, how to make sure it looks right.

You know how it goes – you want to provide all the necessary details to your customers, and sometimes the default invoice template just doesn't quite cut it. FrankB1, a fellow store owner, ran into this exact scenario. He was trying to add the customer's email to his invoices generated by the Shopify Invoice App, which is a really smart move for clear record-keeping and customer service. But he hit a snag: the email address kept appearing right next to the customer's phone number, instead of neatly underneath it.

The Invoice Formatting Conundrum: Email and Phone on One Line

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

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

And he even provided a helpful screenshot to illustrate the problem:

Address Code

It's a common little gotcha when you're working with HTML and Liquid in Shopify. You might add new lines in your code editor, expecting them to translate into new lines on the rendered page or invoice, but HTML doesn't always work that way. It tends to "collapse" whitespace, meaning multiple spaces or new lines often get treated as a single space.

The Expert Insight: Why HTML Collapses Whitespace (and How to Fix It!)

Thankfully, Moeed, a sharp Shopify Partner, jumped in with a brilliant explanation and a clean solution. As Moeed wisely pointed out, there was nothing inherently "wrong" with Frank's Liquid code itself. The issue was purely an HTML formatting quirk. To force a new line in HTML, you need to explicitly tell it to break the line. You can do this with either a
tag or by wrapping each element you want on its own line in a block-level HTML element, like a

.

Moeed provided an updated code snippet that not only fixed the line break issue but also added a nice little safeguard:

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

Breaking Down Moeed's Solution:

  • Tags for New Lines: By wrapping both {{ order.shipping_address.phone }} and {{ order.email }} in their own
    tags, Moeed ensured that each would render on a separate line. A
    is a block-level element, meaning it naturally starts on a new line and takes up the full width available.
  • Conditional Display ({% if %}): This is a really important best practice! Moeed wrapped the email display in an {% if order.email %}...{% endif %} statement. Why? Because not every order will have an email address (think manual orders or Point of Sale transactions). This conditional check prevents an empty line or blank space from appearing on invoices where no email is present, keeping your invoices clean and professional. He also added an outer {% if order.shipping_address %} to ensure the whole block only renders if there's a shipping address.
  • Re-adding Shipping Label and Address: The solution also includes the {{ "invoice_template.ship_to_label" | t }} and {{ order.shipping_address | format_address }} which are crucial for a complete shipping address block.

Frank quickly confirmed that Moeed's code worked perfectly, solving his formatting challenge! It's a fantastic example of the Shopify community coming together to help each other out with practical, actionable advice.

How to Implement This in Your Shopify Invoice Template

Ready to update your own invoices? Here's a step-by-step guide based on the community's solution:

  1. Access Your Invoice Template:
    • From your Shopify admin, go to Apps.
    • Find and click on the Shopify Order Printer (or whichever invoice app you're using that allows template customization).
    • Look for the option to Manage Templates or Edit Templates.
  2. Locate the Relevant Section:
    • You'll be looking for the section of code that handles the shipping address information. It often contains Liquid variables like order.shipping_address or order.shipping_address.phone.
    • If you're using the Order Printer app, you'll typically be editing an HTML/Liquid file directly.
  3. Replace or Insert the Code:
    • Carefully find the existing code block that displays the shipping address and phone number. It might look similar to Frank's initial attempt.
    • Replace that section with Moeed's refined code: 
      {% 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 %}
    • Important Note: Always back up your original template code before making any changes! Just copy and paste it into a text document somewhere safe.
  4. Test Your Changes:
    • Preview an existing order's invoice to ensure the email address appears correctly underneath the phone number (or address) and that everything else looks as expected.
    • Test with an order that doesn't have an email (if you have one, or simulate a manual order) to ensure no blank lines appear.

Customizing your Shopify store's documents, like invoices, is a fantastic way to enhance your brand's professionalism and provide clear information to your customers. It's these little tweaks that often make a big difference in the customer experience and streamline your operations. If you're looking to start your own online store and haven't chosen a platform yet, Shopify makes it incredibly easy to get started and offers a ton of flexibility for customization, even for those who aren't coding wizards. This community discussion is a perfect example of how even small coding challenges have straightforward solutions with a bit of expert guidance!

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools