Re: New Order Printer app - and customer email and order number missing

Solved

New Order Printer app - and customer email and order number missing

declanm
Not applicable
2 0 0

I've just copied the code from the legacy to the new app - and the customer email and order number are missing completely.


Is there anything I need to be adding to the code to pull these through again?

 

 

 

declanm_1-1716888306582.png

 

 

see below code for email:

 

 

 

 

{% if customer.email != blank %}
<li>{{ customer.email }}</li>
{% endif %}

 

 

 

 

 

and then order number:

 

 

 

 

 .printer-preview-content .t118122 .order-number-barcode,
        .printer-preview-content .t118122 .product-barcode {
          display: block;

 

 

 

also if anyone has any obvious suggestions, please let me know as I've not had much experience with this app

Accepted Solutions (2)

MakP
Shopify Partner
33 9 13

This is an accepted solution.

For the order number, make sure you have changed "{{ order_name }}" to "{{ order.name }}" - Slight difference, but the second works and the first does not.

 

On the email: Your code is actually working fine when I test it. This may sound silly, but I would just double check that the order you're testing this on actually contains a customer email (I only mention this because your screenshot looks like a test order and it could be possible there is no email for that particular order number). If you're sure your order contains an email, you could try changing your code to include the "order." prefix, which should result in the same thing:

 

{% if order.customer.email != blank %}
<li>{{ order.customer.email }}</li>
{% endif %}

 

View solution in original post

MakP
Shopify Partner
33 9 13

This is an accepted solution.

Changing {{ note }} to {{ order.note }} should solve this:

<!-- Me -->
<!-- Common Base Styling -->
{% assign primary_font = "Roboto"%}
{% assign primary_font_color = "#000000" %} <!-- Black text color -->
{% assign primary_font_size = "11px"%}
{% assign secondary_font = "Roboto"%}
{% assign secondary_font_color = "#333333" %} <!-- Grey text color -->
{% assign theme_color = "#000000"%}
<script type="text/javascript">
    var fHead = document.head || document.getElementsByTagName('head')[0];
      {% assign font_weights = "300,400,700" | split: ',' %}
      {% for font_weight in font_weights %}
        var font1Id = 'font-{{ primary_font | replace: " ", "-" }}-{{ font_weight }}';
        if (!document.getElementById(font1Id)) {
          var linkElement = document.createElement('link');
          linkElement.setAttribute('id', font1Id)
          linkElement.setAttribute('rel', 'stylesheet');
          linkElement.setAttribute('type', 'text/css');
          linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ primary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
          fHead.appendChild(linkElement);
        };
        {% if secondary_font != blank and secondary_font != primary_font %}
          var font2Id = 'font-{{ secondary_font | replace: " ", "-" }}-{{ font_weight }}';
          if (!document.getElementById(font2Id)) {
            var linkElement = document.createElement('link');
            linkElement.setAttribute('id', font2Id)
            linkElement.setAttribute('rel', 'stylesheet');
            linkElement.setAttribute('type', 'text/css');
            linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ secondary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
            fHead.appendChild(linkElement);
          };
        {% endif %}
      {% endfor %}
</script>
<script>
    $(function () {
         if (navigator.userAgent.indexOf('Safari') != -1 &&
         navigator.userAgent.indexOf('Chrome') == -1) {
             $("body").addClass("safari");
         }
       });
</script>
<style type="text/css">
    /* ### BASE - PAGE SIZING AND MARGIN SETUP NORMALIZATION ACROSS BROWSERS ### */
      @Page {
        margin: 12mm !important;
        margin-top: 12mm !important;
        margin-right: 12mm !important;
        margin-bottom: 12mm !important;
        margin-left: 12mm !important;
      }
      @media print {
        .safari {
          padding-top: 15px;
          box-sizing: border-box;
        }
        .printer-preview-content:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .printer-preview-content {
          padding-left: 15px;
          padding-right: 15px;
          box-sizing: border-box;
        }
      }
      @media screen {
        .printer-preview-content {
          padding: 14px 0;
          min-height: 800px;
          /* background-image: url(http://basehold.it/i/14) */
        }
        .printer-preview-content .printer-preview-content {
          margin-right: auto;
          margin-left: auto;
          max-width: 680px;
        }
      }
      @media screen,print {
    
        /* ### BASE - TYPOGRAPHY AND REMOVAL OF STANDARD SHOPIFY STYLING ### */
        .printer-preview-content .t118122 * {
          color: {{ secondary_font_color }};
          font-family: '{{ primary_font }}';
          font-size: {{ primary_font_size }};
          font-weight: 400;
          line-height: 14px;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
          margin: 0 0 0 0;
          padding: 0 0 0 0;
          -webkit-print-color-adjust: exact;
          overflow: visible !important;
        }
        .printer-preview-content .t118122 h1 {
          font-size: 28px;
          line-height: 42px;
        }
        .printer-preview-content .t118122 h2 {
          font-size: 18px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h3 {
          font-size: 14px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h1,
        .printer-preview-content .t118122 h2,
        .printer-preview-content .t118122 h3 {
          margin-bottom: 14px;
        }
        .printer-preview-content .t118122 a,
        .printer-preview-content .t118122 a * {
          text-decoration: none !important;
        }
        .printer-preview-content .t118122 b,
        .printer-preview-content .t118122 b * {
          font-weight: bold;
        }
        .printer-preview-content .t118122 .text-right {
          text-align: right;
        }
        .printer-preview-content .t118122 .text-center {
          text-align: center;
        }
        .printer-preview-content .t118122 .no-wrap {
          white-space: nowrap;
        }
    
        /* ### BASE - GRID AND RE-USABLE LAYOUT COMPONENTS ### */
        .printer-preview-content .t118122 .row {
          width: 100%;
          display: block;
          clear: both;
        }
        .printer-preview-content .t118122 .row:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .t118122 .col-xs-1,
        .printer-preview-content .t118122 .col-xs-2,
        .printer-preview-content .t118122 .col-xs-3,
        .printer-preview-content .t118122 .col-xs-4,
        .printer-preview-content .t118122 .col-xs-5,
        .printer-preview-content .t118122 .col-xs-6,
        .printer-preview-content .t118122 .col-xs-7,
        .printer-preview-content .t118122 .col-xs-8,
        .printer-preview-content .t118122 .col-xs-9,
        .printer-preview-content .t118122 .col-xs-10,
        .printer-preview-content .t118122 .col-xs-11,
        .printer-preview-content .t118122 .col-xs-12 {
          float: left;
          min-height: 1px;
          margin-bottom: 28px;
        }
        .printer-preview-content .t118122 .col-xs-12 {
          width: 100%;
        }
        .printer-preview-content .t118122 .col-xs-11 {
          width: 91.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-10 {
          width: 83.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-9 {
          width: 75%;
        }
        .printer-preview-content .t118122 .col-xs-8 {
          width: 66.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-7 {
          width: 58.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-6 {
          width: 50%;
        }
        .printer-preview-content .t118122 .col-xs-5 {
          width: 41.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-4 {
          width: 33.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-3 {
          width: 25%;
        }
        .printer-preview-content .t118122 .col-xs-2 {
          width: 16.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-1 {
          width: 8.33333333%;
        }
        .printer-preview-content .t118122 .col-no-margin {
          margin-bottom: 0 !important;
        }
        .printer-preview-content .t118122 .clear-fix::after {
          content: "";
          clear: both;
          display: table;
        }
        .printer-preview-content .t118122 .half-margin-top {
          margin-top: 7px !important;
        }
        .printer-preview-content .t118122 .half-margin-bottom {
          margin-bottom: 7px !important;
        }
        .printer-preview-content .t118122 .margin-bottom {
          margin-bottom: 14px !important;
          margin-top: 1px;
        }
        .printer-preview-content .t118122 .margin-top {
          margin-top: 14px !important;
        }
        .printer-preview-content .t118122 .double-margin-top {
          margin-top: 28px !important;
        }
        .printer-preview-content .t118122 .double-margin-bottom {
          margin-bottom: 28px !important;
        }
    
        .printer-preview-content .t118122 .strikethrough {
          text-decoration: line-through !important;
        }
    
        .printer-preview-content .t118122 .break {
          word-break: break-all !important;
        }
    
        /* ### BASE - TABLE STYLING ### */
        .printer-preview-content .t118122 table,
        .printer-preview-content .t118122 .table {
          width: 100%;
          max-width: 100%;
          background-color: transparent;
          border-collapse: collapse;
        }
        .printer-preview-content .t118122 table thead {
          display: table-row-group;
        }
        .printer-preview-content .t118122 table tbody tr {
          page-break-inside:avoid !important;
          page-break-after:auto !important;
        }
        .printer-preview-content .t118122 table tbody tr td {
          page-break-inside:avoid !important;
        }
        .printer-preview-content .t118122 th {
          white-space: nowrap;
          text-align: left;
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 td {
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 .order-table tbody > tr:nth-child(odd) td {
          background-color: #f5f5f5;
        }
        .printer-preview-content .t118122 .pricing-table tbody > tr:nth-child(even) > td {
          background-color: #f5f5f5;
        }
    /*    .printer-preview-content .t118122 .pricing-table tbody > tr > td.pricing-table-title {
          word-break: break-all;
        }*/
        .printer-preview-content .t118122 th.order-table-qty {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-price {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-item-total,
        .printer-preview-content .t118122 th.order-table-reason {
          width: 17%;
        }
        .printer-preview-content .t118122 th.order-table-return-comments {
          width: 30%;
        }
        .printer-preview-content .t118122 .pricing-table-text {
          text-align: right;
          white-space: nowrap;
        }
    
        /* ### BASE - PRODUCT IMAGE SIZING TO RETAIN LINE HEIGHT RYTHM) ### */
        .printer-preview-content .t118122 .product-image-wrapper {
          width: 56px;
          max-height: 56px;
          vertical-align: middle;
          text-align: center;
        }
        .printer-preview-content .t118122 .product-image {
          padding: 0 4px;
          page-break-inside:avoid !important;
          max-width: 56px;
          height: auto;
          max-height: 56px;
    }
    
        /* ### BASE - LISTS RESET ### */
        .printer-preview-content .t118122 ul {
          list-style: none;
        }
        .printer-preview-content .t118122 li {
          color: {{ secondary_font_color }};
          list-style: none;
        }
    
        /* ### BASE - LOGO ### */
        .printer-preview-content .t118122 .logo-wrapper {
          display: inline-block;
          width: 100%;
          padding-bottom: 7px;
        }
        .printer-preview-content .t118122 .logo {
          float: left;
          padding-right: 15px;
          max-width: 30%;
          max-height: 28.2px;
        }
    
        /* ### BASE - BARCODE ### */
        .printer-preview-content .t118122 .order-number-barcode,
        .printer-preview-content .t118122 .product-barcode {
          display: block;
        }
    
        /* ### BASE - ADDITONAL COMMON SHARED TYPOGRAPHY AND ALIGNMENT ### */
        .printer-preview-content .t118122 .address {
          margin-right: 5%;
        }
        .printer-preview-content .t118122 .col-xs-8 order.notes,
        .printer-preview-content .t118122 .col-xs-6 order.notes {
          margin-right: 20%;
        }
        .printer-preview-content .t118122 order.notes-title,
        .printer-preview-content .t118122 order.return-codes {
          margin: 7px 0;
        }
        /* ### BASE - HORIZONTAL RULE MARKS ### */
        .printer-preview-content .t118122 hr {
          background: {{ theme_color }};
          border-top: 0;
          border: 0;
          height: 2px;
          width: 100%;
          margin-bottom: -2px;
        }
    
      }
</style>
<!-- Template Specific Styling -->
<style type="text/css">
    @media screen,print {
      /* ### DESIGN SPECIFIC - TYPOGRAPHY ### */
      .printer-preview-content .t118122 h1 {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 h2 {
        font-family: '{{ secondary_font }}';
      }
      .printer-preview-content .t118122 h3 {
        font-family: '{{ secondary_font }}';
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - STORE DETAILS ### */
      .printer-preview-content .t118122 .logo-wrapper {
        max-width: 90%;
      }
      .printer-preview-content .t118122 .shop-address-name {
        color: {{ theme_color }};
        font-family: '{{ secondary_font }}';
        font-size: 15px;
        font-weight: 700;
        padding-top:3px;
        padding-bottom:3px;
      }
      .printer-preview-content .t118122 .shop-social-block {
        text-align: center;
      }
      .printer-preview-content .t118122 .shop-contact-block b,
      .printer-preview-content .t118122 .shop-contact-block b * {
        font-weight: 700;
        color: {{ theme_color }};
      }
      .printer-preview-content .t118122 #header-row .shop-address-name,
      .printer-preview-content .t118122 #header-row .order-details,
      .printer-preview-content .t118122 #header-row .logo-wrapper {
        padding-left: 0px;
      }
    
      /* ### DESIGN SPECIFIC - ORDER DETAILS ### */
      .printer-preview-content .t118122 .order-details-title {
        display: inline-block;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:first-of-type * {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:not(:first-of-type) * {
        font-weight: normal;
      }
    
      /* ### DESIGN SPECIFIC - BILL TO AND SHIP TO ADDRESS ### */
      .printer-preview-content .t118122 .address-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - TABLE HEADER ### */
      .printer-preview-content .t118122 .order-table thead tr th {
        padding-left: 4px;
        padding-right: 4px;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
        background-color: {{ theme_color }};
        color: #fff;
      }
    
      /* ### DESIGN SPECIFIC - TABLE BODY (SHARED) ### */
      .printer-preview-content .t118122 .order-table tbody tr td,
      .printer-preview-content .t118122 .pricing-table tbody tr td {
        padding-left: 4px;
        padding-right: 4px;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
      }
      /* ### DESIGN SPECIFIC - ORDER TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description,
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-qty {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description p.line-item-sku {
        font-weight: normal;
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description span.line-item-refund {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 3px;
        background-color: #FFEA8A;
        border-radius: 14px;
      }
    
      /* ### DESIGN SPECIFIC - PRICING TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title span,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        background-color: {{ theme_color }};
        color: #fff;
      }
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title *,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text * {
        color: #fff;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
      }
    
      /* ### DESIGN SPECIFIC - ORDER NOTES ### */
      .printer-preview-content .t118122 order.notes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - RETURN FORM REASON CODES ### */
      .printer-preview-content .t118122 .return-codes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .return-codes b,
      .printer-preview-content .t118122 .return-code b * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - THANK YOU MESSAGE ### */
      .printer-preview-content .t118122 .thanks-text {
        text-align: center;
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .thanks-text * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - GIFT MESSAGE ### */
      .printer-preview-content .t118122 .gift-text {
        text-align: center;
        font-weight: 700;
        width: 80%;
        margin: 0 10%;
        padding-top:28px;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text * {
        font-weight: 700;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text svg {
        padding-bottom:7px;
      }
    
      /* ### DESIGN SPECIFIC - TERMS AND CONDITIONS ### */
      .printer-preview-content .t118122 .terms-text {
        font-size: 9px;
        text-align: center;
      }
      .printer-preview-content .t118122 .terms-text * {
        font-size: 9px;
      }
    
      /* ### DESIGN SPECIFIC - SOCIAL ICONS ### */
      .printer-preview-content .t118122 .social-icons {
        display: inline;
        width: 20px;
        margin: 7px 4px;
      }
    
    }
</style>
<div class="printer-preview-content" contenteditable="true" spellcheck="false" title="Click to edit text (changes will be printed but not saved)">
    <div class="t118122">
        <div class="row">
            <div class="col-xs-4">
            </div>
            <div class="col-xs-8">
                <div class="shop-address-name editable" data-key="shop_name">
                               Campus&Co Dunstable
                </div>
                <div class="shop-address-block full-editable" data-key="shop_block">
                    <p>                  campusandcodunstable.com<br>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <div class="address-title bill-to-title editable" data-key="bill_to">Bill to</div>
                <ul class="address">
                    {% assign billing_address = billing_address | default: customer.default_address %}
                    {% if billing_address and billing_address != blank %}
                        <li>{{ billing_address.name }}</li>
                        {% if billing_address.company != blank %}
                            <li>{{ billing_address.company }}</li>
                        {% endif %}
                        <li>{{ billing_address.address1 }}</li>
                        {% if billing_address.address2 != blank %}
                            <li>{{ billing_address.address2 }}</li>
                        {% endif %}
                    <li>
  {{ billing_address.city }} 
  {% if billing_address.province_code != '' %}
    {{ billing_address.province_code | replace: "ENG", "" }}
  {% else %}
    {{ billing_address.province | default: "England" }}
  {% endif %}
</li>
                        <li>{{ billing_address.zip | upcase }}</li>
                        {% if shop.country != billing_address.country %}
                            <li>{{ billing_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ billing_address.phone | default: customer.phone }}</li>
                    {% elsif customer != blank %}
                        {% if customer.name != blank %}
                            <li>{{ customer.name }}</li>
                        {% endif %}
                        {% if order.customer.email != blank %}
                        <li>{{ order.customer.email }}</li>
                        {% endif %}
                        {% if customer.phone != blank %}
                            <li><span class="editable" data-key="tel">Tel.</span> {{ customer.phone }}</li>
                        {% endif %}
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                {% if shipping_address and shipping_address != "" and shipping_address != nil %}
                    <div class="address-title ship-to-title editable" data-key="ship_to">Deliver to</div>
                {% endif %}
                <ul class="address">
                    {% if shipping_address and shipping_address != blank %}
                        <li>{{ shipping_address.name }}</li>
                        {% if shipping_address.company != blank %}
                            <li>{{ shipping_address.company }}</li>
                        {% endif %}
                        <li>{{ shipping_address.address1 }}</li>
                        {% if shipping_address.address2 != blank %}
                            <li>{{ shipping_address.address2 }}</li>
                        {% endif %}
                        <li>{{ shipping_address.city }} {% if shipping_address.province_code != blank %}{{ shipping_address.province_code | replace: "ENG", "" }}{% else %}{{ shipping_address.province | replace: "England", "" }}{% endif %}</li>
                        <li>{{ shipping_address.zip | upcase }}</li>
                        {% if shop.country != shipping_address.country %}
                            <li>{{ shipping_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ shipping_address.phone }}</li>
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                <ul class="order-details">
                    <li class="order-details-invoice">
                        <span class="order-details-title editable" data-key="invoice_number">Order No:</span>
                        <span class="order-details-text">{{ order.name }}</span>
                    </li>
                    <li class="order-details-date">
                        <span class="order-details-title editable" data-key="date">Order Date:</span>
                        <span class="order-details-text">{{ order.created_at | date: "%d %B, %Y" }}</span>
                    </li>
                    {% assign transaction_text = "" %}
                    {% for transaction in transactions %}
                        {% if transaction.status != "failure" and transaction.status != "error" %}
                            {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                                {% if transaction.payment_details.credit_card_company != blank and transaction.payment_details.credit_card_company != "unknown" %}
                                    {% capture t_text %}{{ transaction.payment_details.credit_card_company }}{% endcapture %}
                                {% else %}
                                    {% capture t_text %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
                                {% endif %}
                                {% unless transaction_text contains t_text %}
                                    {% if transaction_text != blank %}
                                        {% assign transaction_text = transaction_text | append: ", " %}
                                    {% endif %}
                                    {% assign transaction_text = transaction_text | append: t_text %}
                                {% endunless %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    {% if transaction_text != blank and transaction_text != "manual" %}
                        <li class="order-details-payment">
                            <span class="order-details-title editable" data-key="payment_method">Payment:</span>
                            <span class="order-details-text">{{ transaction_text }}</span>
                        </li>
                    {% endif %}
                    {% if shipping_method.title != blank %}
                        <li class="order-details-shipping">
                            <span class="order-details-title editable" data-key="shipping_method">Fulfilment:</span>
                            <span class="order-details-text">{{ shipping_method.title }}</span>
                        </li>
                    {% endif %}
                    {% assign total_items_count = 0 %}
                    {% for line_item in line_items %}
                        {% assign total_items_count = total_items_count | plus: line_item.quantity %}
                    {% endfor %}
                    <li class="order-details-item-count">
                        <span class="order-details-title editable" data-key="total_items_count">Total Items:</span>
                        <span class="order-details-text">{{ total_items_count }}</span>
                    </li>
                    <li class="order-details-email">
                        <span class="order-details-title editable" data-key="customer_email">Email:</span>
                        <span class="order-details-text">{{ email }}</span>
                    </li>
                </ul>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-no-margin">
                <table class="order-table table">
                    <thead>
                        <tr>
                            <th colspan=2 class="order-table-title editable" data-key="item">Item Description</th>
                            <th class="order-table-qty text-center editable" data-key="qty">Qty</th>
                            <th class="order-table-price text-right editable" data-key="price">Price</th>
                            <th class="order-table-item-total text-right editable" data-key="item_total">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% assign line_items = line_items | sort: "vendor" %}
                        <!-- Bold Product Options Snippet 1 -->
                        {% assign hidden_variant_ids = "" %}
                        {% for line_item in line_items %}
                            {% if line_item.properties._boldVariantIds %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: ',' %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: line_item.properties._boldVariantIds %}
                            {% endif %}
                        {% endfor %}
                        {% assign hidden_variant_ids = hidden_variant_ids | split: ',' %}
                        <!-- END Bold Product Options Snippet 1 -->
                        {% for line_item in line_items %}
                            {% if line_item.quantity < 1 %}{% continue %}{% endif %}
                            <!-- Bold Product Options Snippet 2 -->
                            {% if hidden_variant_ids contains line_item.variant_id %}{% continue %}{% endif %}
                            {% assign adjusted_item_price = line_item.price %}
                            {% assign adjusted_line_price = line_item.price | times: line_item.quantity %}
                            {% for line_item2 in line_items %}
                                {% if line_item.properties._boldVariantIds contains line_item2.variant_id %}
                                    {% assign adjusted_item_price = adjusted_item_price | plus: line_item2.price %}
                                    {% assign adjusted_line_option_price = line_item2.price | times: line_item.quantity %}
                                    {% assign adjusted_line_price = adjusted_line_price | plus: adjusted_line_option_price %}
                                {% endif %}
                            {% endfor %}
                            <!-- END Bold Product Options Snippet 2 -->
                            <tr>
                                <td class="product-image-wrapper">{% if line_item.image != blank %}<img class="product-image" src="{{ line_item.image | img_url: 'medium' }}"/>{% endif %}</td>
                                <td class="line-item-description">
                                    <p style="font-weight: 700;"><a href="https://{{ shop.domain }}/products/{{ line_item.product.handle }}" style="font-weight: 700;color: inherit;" target="_blank">{% if line_item.vendor != blank %}{{ line_item.vendor | append:' - ' }}{% endif %}
                                            {{ line_item.title | replace: " - Default Title", "" }}</a></p>
                                    {% if line_item.sku != blank %}
                                        <p class="line-item-sku">{{ line_item.sku }}</p>
                                    {% endif %}
                                    {% for p in line_item.properties %}
                                        {% assign p_internal = p.first | slice: 0 %}
                                        {% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %}
                                            {% if p.last contains "cdn.shopify.com" or p.last contains "/uploads/" or p.last contains ".png?" or p.last contains ".jpg?" or p.last contains "//uploadery.s3" %}
                                                <p class="line-item-property">{{ p.first }}:<br>
                                                </p>
                                                <a href="{{ p.last }}" target="_blank"><img src="{{ p.last }}" alt="{{ p.first }}" width="60" border="0" style="width: 60px; height: auto !important;"></a>
                                            {% else %}
                                                <p class="line-item-property">{{ p.first }}: <b>{{ p.last | newline_to_br }}</b></p>
                                            {% endif %}
                                        {% endunless %}
                                    {% endfor %}
                                    {% assign refunded_quantity = 0 %}
                                    {% for refund in refunds %}
                                        {% for refund_line_item in refund.refund_line_items %}
                                            {% if line_item.id == refund_line_item.line_item_id %}
                                                {% assign refunded_quantity = refunded_quantity | plus: refund_line_item.quantity %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                    {% if refunded_quantity > 0 %}
                                        <span class="line-item-refund">Refunded × {{ refunded_quantity }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-center line-item-qty" {% if line_item.quantity > 1 %}style="outline: 1px solid red !important"{% endif %}>&times; {{ line_item.quantity }}</td>
                                <td class="text-right no-wrap line-item-price">
                                    {% if line_item.original_price and line_item.original_price > adjusted_item_price %}
                                        {% assign original_price = line_item.original_price %}
                                    {% elsif line_item.variant.compare_at_price and line_item.variant.compare_at_price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.compare_at_price %}
                                    {% elsif line_item.variant.price and line_item.variant.price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.price %}
                                    {% else %}
                                        {% assign original_price = 0 %}
                                    {% endif %}
                                    {% if original_price > 0 and original_price > adjusted_item_price %}
                                        <p class="strikethrough"><s>{{ original_price | money }}</s></p>
                                    {% endif %}
                                    <p>{{ adjusted_item_price | money }}</p>
                                </td>
                                <td class="text-right no-wrap line-item-line-price">{{ adjusted_line_price | money }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-8">
                <div class="order.notes">
                    {% if order.note != blank or attributes != blank %}
                        <div class="order.notes-title editable" data-key="order.notes">Customer Notes</div>
                    {% endif %}
                    <div class="order.notes-text">
                        {{ order.note | newline_to_br }}
                        {% for attribute in attributes %}
                            {% assign a_internal = attribute.first | slice: 0 %}
                            {% unless a_internal == "_" %}
                                <br>
                                <b>{{ attribute.first | replace: "-", " " | replace: "_", " " | capitalize }}:</b> {{ attribute.last | newline_to_br }}
                            {% endunless %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <table class="pricing-table table">
                    <tbody>
                        {% for discount in discounts %}
                            {% if discount.amount != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span>{% if discount.code != blank %} <span class="break">{{ order.discount.code }}</span>{% endif %}</td>
                                    <td class="pricing-table-text">-{{ order.discount.amount | money }}</td>
                                </tr>
                            {% endif %}
                        {% else %}
                            {% if total_discounts != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span></td>
                                    <td class="pricing-table-text">-{{ order.total_discounts | money }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td class="pricing-table-title editable" data-key="subtotal">Subtotal</td>
                            <td class="pricing-table-text">{{ order.subtotal_price | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="shipping_handling">Shipping</td>
                            <td class="pricing-table-text">{{ order.shipping_price | default: 0 | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="total_tax">VAT</td>
                            <td class="pricing-table-text">{{ order.total_tax | default: 0 | money }}</td>
                        </tr>
                        <tr class="pricing-table-total-row">
                            <td class="pricing-table-title"><span class="editable" data-key="total">Total incl. VAT</span></td>
                            <td class="pricing-table-text">{{ order.total_price | money }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 shop-social-block half-margin-bottom">
                <div class="shop-social">
                </div>
                <a href="https://{{ shop.domain }}" target="_blank">
                    <div class="shop-domain editable" data-key="shop_domain">
                        campusandcodunstable.com
                    </div>
                </a>
            </div>
            <div class="col-xs-12 col-no-margin">
                <div class="terms-text full-editable" data-key="terms_and_conditions">
                    <p>
                        <p>If you have any questions, please get in touch: <b>lutononline@pinnaclegroupeu.com</b></p>
                    </p>
                </div>
                <div class="thanks-text full-editable" data-key="thanks">
                    <p>
                        <p>Thank you for your support!</p>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
    </div>
</div>

 

 

View solution in original post

Replies 3 (3)

MakP
Shopify Partner
33 9 13

This is an accepted solution.

For the order number, make sure you have changed "{{ order_name }}" to "{{ order.name }}" - Slight difference, but the second works and the first does not.

 

On the email: Your code is actually working fine when I test it. This may sound silly, but I would just double check that the order you're testing this on actually contains a customer email (I only mention this because your screenshot looks like a test order and it could be possible there is no email for that particular order number). If you're sure your order contains an email, you could try changing your code to include the "order." prefix, which should result in the same thing:

 

{% if order.customer.email != blank %}
<li>{{ order.customer.email }}</li>
{% endif %}

 

declanm
Not applicable
2 0 0

Many Thanks @MakP that has worked...

However I now cannot get the order notes to print. On the old app, any notes put on in the cart, pulled through to the order printout, for the pickers to view. I have tried changing to order.notes but still not working. Probably an easy fix as above - have you got any suggestions?

<!-- Me -->
<!-- Common Base Styling -->
{% assign primary_font = "Roboto"%}
{% assign primary_font_color = "#000000" %} <!-- Black text color -->
{% assign primary_font_size = "11px"%}
{% assign secondary_font = "Roboto"%}
{% assign secondary_font_color = "#333333" %} <!-- Grey text color -->
{% assign theme_color = "#000000"%}
<script type="text/javascript">
    var fHead = document.head || document.getElementsByTagName('head')[0];
      {% assign font_weights = "300,400,700" | split: ',' %}
      {% for font_weight in font_weights %}
        var font1Id = 'font-{{ primary_font | replace: " ", "-" }}-{{ font_weight }}';
        if (!document.getElementById(font1Id)) {
          var linkElement = document.createElement('link');
          linkElement.setAttribute('id', font1Id)
          linkElement.setAttribute('rel', 'stylesheet');
          linkElement.setAttribute('type', 'text/css');
          linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ primary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
          fHead.appendChild(linkElement);
        };
        {% if secondary_font != blank and secondary_font != primary_font %}
          var font2Id = 'font-{{ secondary_font | replace: " ", "-" }}-{{ font_weight }}';
          if (!document.getElementById(font2Id)) {
            var linkElement = document.createElement('link');
            linkElement.setAttribute('id', font2Id)
            linkElement.setAttribute('rel', 'stylesheet');
            linkElement.setAttribute('type', 'text/css');
            linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ secondary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
            fHead.appendChild(linkElement);
          };
        {% endif %}
      {% endfor %}
</script>
<script>
    $(function () {
         if (navigator.userAgent.indexOf('Safari') != -1 &&
         navigator.userAgent.indexOf('Chrome') == -1) {
             $("body").addClass("safari");
         }
       });
</script>
<style type="text/css">
    /* ### BASE - PAGE SIZING AND MARGIN SETUP NORMALIZATION ACROSS BROWSERS ### */
      @page {
        margin: 12mm !important;
        margin-top: 12mm !important;
        margin-right: 12mm !important;
        margin-bottom: 12mm !important;
        margin-left: 12mm !important;
      }
      @media print {
        .safari {
          padding-top: 15px;
          box-sizing: border-box;
        }
        .printer-preview-content:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .printer-preview-content {
          padding-left: 15px;
          padding-right: 15px;
          box-sizing: border-box;
        }
      }
      @media screen {
        .printer-preview-content {
          padding: 14px 0;
          min-height: 800px;
          /* background-image: url(http://basehold.it/i/14) */
        }
        .printer-preview-content .printer-preview-content {
          margin-right: auto;
          margin-left: auto;
          max-width: 680px;
        }
      }
      @media screen,print {
    
        /* ### BASE - TYPOGRAPHY AND REMOVAL OF STANDARD SHOPIFY STYLING ### */
        .printer-preview-content .t118122 * {
          color: {{ secondary_font_color }};
          font-family: '{{ primary_font }}';
          font-size: {{ primary_font_size }};
          font-weight: 400;
          line-height: 14px;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
          margin: 0 0 0 0;
          padding: 0 0 0 0;
          -webkit-print-color-adjust: exact;
          overflow: visible !important;
        }
        .printer-preview-content .t118122 h1 {
          font-size: 28px;
          line-height: 42px;
        }
        .printer-preview-content .t118122 h2 {
          font-size: 18px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h3 {
          font-size: 14px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h1,
        .printer-preview-content .t118122 h2,
        .printer-preview-content .t118122 h3 {
          margin-bottom: 14px;
        }
        .printer-preview-content .t118122 a,
        .printer-preview-content .t118122 a * {
          text-decoration: none !important;
        }
        .printer-preview-content .t118122 b,
        .printer-preview-content .t118122 b * {
          font-weight: bold;
        }
        .printer-preview-content .t118122 .text-right {
          text-align: right;
        }
        .printer-preview-content .t118122 .text-center {
          text-align: center;
        }
        .printer-preview-content .t118122 .no-wrap {
          white-space: nowrap;
        }
    
        /* ### BASE - GRID AND RE-USABLE LAYOUT COMPONENTS ### */
        .printer-preview-content .t118122 .row {
          width: 100%;
          display: block;
          clear: both;
        }
        .printer-preview-content .t118122 .row:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .t118122 .col-xs-1,
        .printer-preview-content .t118122 .col-xs-2,
        .printer-preview-content .t118122 .col-xs-3,
        .printer-preview-content .t118122 .col-xs-4,
        .printer-preview-content .t118122 .col-xs-5,
        .printer-preview-content .t118122 .col-xs-6,
        .printer-preview-content .t118122 .col-xs-7,
        .printer-preview-content .t118122 .col-xs-8,
        .printer-preview-content .t118122 .col-xs-9,
        .printer-preview-content .t118122 .col-xs-10,
        .printer-preview-content .t118122 .col-xs-11,
        .printer-preview-content .t118122 .col-xs-12 {
          float: left;
          min-height: 1px;
          margin-bottom: 28px;
        }
        .printer-preview-content .t118122 .col-xs-12 {
          width: 100%;
        }
        .printer-preview-content .t118122 .col-xs-11 {
          width: 91.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-10 {
          width: 83.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-9 {
          width: 75%;
        }
        .printer-preview-content .t118122 .col-xs-8 {
          width: 66.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-7 {
          width: 58.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-6 {
          width: 50%;
        }
        .printer-preview-content .t118122 .col-xs-5 {
          width: 41.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-4 {
          width: 33.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-3 {
          width: 25%;
        }
        .printer-preview-content .t118122 .col-xs-2 {
          width: 16.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-1 {
          width: 8.33333333%;
        }
        .printer-preview-content .t118122 .col-no-margin {
          margin-bottom: 0 !important;
        }
        .printer-preview-content .t118122 .clear-fix::after {
          content: "";
          clear: both;
          display: table;
        }
        .printer-preview-content .t118122 .half-margin-top {
          margin-top: 7px !important;
        }
        .printer-preview-content .t118122 .half-margin-bottom {
          margin-bottom: 7px !important;
        }
        .printer-preview-content .t118122 .margin-bottom {
          margin-bottom: 14px !important;
          margin-top: 1px;
        }
        .printer-preview-content .t118122 .margin-top {
          margin-top: 14px !important;
        }
        .printer-preview-content .t118122 .double-margin-top {
          margin-top: 28px !important;
        }
        .printer-preview-content .t118122 .double-margin-bottom {
          margin-bottom: 28px !important;
        }
    
        .printer-preview-content .t118122 .strikethrough {
          text-decoration: line-through !important;
        }
    
        .printer-preview-content .t118122 .break {
          word-break: break-all !important;
        }
    
        /* ### BASE - TABLE STYLING ### */
        .printer-preview-content .t118122 table,
        .printer-preview-content .t118122 .table {
          width: 100%;
          max-width: 100%;
          background-color: transparent;
          border-collapse: collapse;
        }
        .printer-preview-content .t118122 table thead {
          display: table-row-group;
        }
        .printer-preview-content .t118122 table tbody tr {
          page-break-inside:avoid !important;
          page-break-after:auto !important;
        }
        .printer-preview-content .t118122 table tbody tr td {
          page-break-inside:avoid !important;
        }
        .printer-preview-content .t118122 th {
          white-space: nowrap;
          text-align: left;
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 td {
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 .order-table tbody > tr:nth-child(odd) td {
          background-color: #f5f5f5;
        }
        .printer-preview-content .t118122 .pricing-table tbody > tr:nth-child(even) > td {
          background-color: #f5f5f5;
        }
    /*    .printer-preview-content .t118122 .pricing-table tbody > tr > td.pricing-table-title {
          word-break: break-all;
        }*/
        .printer-preview-content .t118122 th.order-table-qty {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-price {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-item-total,
        .printer-preview-content .t118122 th.order-table-reason {
          width: 17%;
        }
        .printer-preview-content .t118122 th.order-table-return-comments {
          width: 30%;
        }
        .printer-preview-content .t118122 .pricing-table-text {
          text-align: right;
          white-space: nowrap;
        }
    
        /* ### BASE - PRODUCT IMAGE SIZING TO RETAIN LINE HEIGHT RYTHM) ### */
        .printer-preview-content .t118122 .product-image-wrapper {
          width: 56px;
          max-height: 56px;
          vertical-align: middle;
          text-align: center;
        }
        .printer-preview-content .t118122 .product-image {
          padding: 0 4px;
          page-break-inside:avoid !important;
          max-width: 56px;
          height: auto;
          max-height: 56px;
    }
    
        /* ### BASE - LISTS RESET ### */
        .printer-preview-content .t118122 ul {
          list-style: none;
        }
        .printer-preview-content .t118122 li {
          color: {{ secondary_font_color }};
          list-style: none;
        }
    
        /* ### BASE - LOGO ### */
        .printer-preview-content .t118122 .logo-wrapper {
          display: inline-block;
          width: 100%;
          padding-bottom: 7px;
        }
        .printer-preview-content .t118122 .logo {
          float: left;
          padding-right: 15px;
          max-width: 30%;
          max-height: 28.2px;
        }
    
        /* ### BASE - BARCODE ### */
        .printer-preview-content .t118122 .order-number-barcode,
        .printer-preview-content .t118122 .product-barcode {
          display: block;
        }
    
        /* ### BASE - ADDITONAL COMMON SHARED TYPOGRAPHY AND ALIGNMENT ### */
        .printer-preview-content .t118122 .address {
          margin-right: 5%;
        }
        .printer-preview-content .t118122 .col-xs-8 order.notes,
        .printer-preview-content .t118122 .col-xs-6 order.notes {
          margin-right: 20%;
        }
        .printer-preview-content .t118122 order.notes-title,
        .printer-preview-content .t118122 order.return-codes {
          margin: 7px 0;
        }
        /* ### BASE - HORIZONTAL RULE MARKS ### */
        .printer-preview-content .t118122 hr {
          background: {{ theme_color }};
          border-top: 0;
          border: 0;
          height: 2px;
          width: 100%;
          margin-bottom: -2px;
        }
    
      }
</style>
<!-- Template Specific Styling -->
<style type="text/css">
    @media screen,print {
      /* ### DESIGN SPECIFIC - TYPOGRAPHY ### */
      .printer-preview-content .t118122 h1 {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 h2 {
        font-family: '{{ secondary_font }}';
      }
      .printer-preview-content .t118122 h3 {
        font-family: '{{ secondary_font }}';
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - STORE DETAILS ### */
      .printer-preview-content .t118122 .logo-wrapper {
        max-width: 90%;
      }
      .printer-preview-content .t118122 .shop-address-name {
        color: {{ theme_color }};
        font-family: '{{ secondary_font }}';
        font-size: 15px;
        font-weight: 700;
        padding-top:3px;
        padding-bottom:3px;
      }
      .printer-preview-content .t118122 .shop-social-block {
        text-align: center;
      }
      .printer-preview-content .t118122 .shop-contact-block b,
      .printer-preview-content .t118122 .shop-contact-block b * {
        font-weight: 700;
        color: {{ theme_color }};
      }
      .printer-preview-content .t118122 #header-row .shop-address-name,
      .printer-preview-content .t118122 #header-row .order-details,
      .printer-preview-content .t118122 #header-row .logo-wrapper {
        padding-left: 0px;
      }
    
      /* ### DESIGN SPECIFIC - ORDER DETAILS ### */
      .printer-preview-content .t118122 .order-details-title {
        display: inline-block;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:first-of-type * {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:not(:first-of-type) * {
        font-weight: normal;
      }
    
      /* ### DESIGN SPECIFIC - BILL TO AND SHIP TO ADDRESS ### */
      .printer-preview-content .t118122 .address-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - TABLE HEADER ### */
      .printer-preview-content .t118122 .order-table thead tr th {
        padding-left: 4px;
        padding-right: 4px;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
        background-color: {{ theme_color }};
        color: #fff;
      }
    
      /* ### DESIGN SPECIFIC - TABLE BODY (SHARED) ### */
      .printer-preview-content .t118122 .order-table tbody tr td,
      .printer-preview-content .t118122 .pricing-table tbody tr td {
        padding-left: 4px;
        padding-right: 4px;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
      }
      /* ### DESIGN SPECIFIC - ORDER TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description,
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-qty {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description p.line-item-sku {
        font-weight: normal;
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description span.line-item-refund {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 3px;
        background-color: #FFEA8A;
        border-radius: 14px;
      }
    
      /* ### DESIGN SPECIFIC - PRICING TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title span,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        background-color: {{ theme_color }};
        color: #fff;
      }
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title *,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text * {
        color: #fff;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
      }
    
      /* ### DESIGN SPECIFIC - ORDER NOTES ### */
      .printer-preview-content .t118122 order.notes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - RETURN FORM REASON CODES ### */
      .printer-preview-content .t118122 .return-codes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .return-codes b,
      .printer-preview-content .t118122 .return-code b * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - THANK YOU MESSAGE ### */
      .printer-preview-content .t118122 .thanks-text {
        text-align: center;
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .thanks-text * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - GIFT MESSAGE ### */
      .printer-preview-content .t118122 .gift-text {
        text-align: center;
        font-weight: 700;
        width: 80%;
        margin: 0 10%;
        padding-top:28px;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text * {
        font-weight: 700;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text svg {
        padding-bottom:7px;
      }
    
      /* ### DESIGN SPECIFIC - TERMS AND CONDITIONS ### */
      .printer-preview-content .t118122 .terms-text {
        font-size: 9px;
        text-align: center;
      }
      .printer-preview-content .t118122 .terms-text * {
        font-size: 9px;
      }
    
      /* ### DESIGN SPECIFIC - SOCIAL ICONS ### */
      .printer-preview-content .t118122 .social-icons {
        display: inline;
        width: 20px;
        margin: 7px 4px;
      }
    
    }
</style>
<div class="printer-preview-content" contenteditable="true" spellcheck="false" title="Click to edit text (changes will be printed but not saved)">
    <div class="t118122">
        <div class="row">
            <div class="col-xs-4">
            </div>
            <div class="col-xs-8">
                <div class="shop-address-name editable" data-key="shop_name">
                               Campus&Co Dunstable
                </div>
                <div class="shop-address-block full-editable" data-key="shop_block">
                    <p>                  campusandcodunstable.com<br>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <div class="address-title bill-to-title editable" data-key="bill_to">Bill to</div>
                <ul class="address">
                    {% assign billing_address = billing_address | default: customer.default_address %}
                    {% if billing_address and billing_address != blank %}
                        <li>{{ billing_address.name }}</li>
                        {% if billing_address.company != blank %}
                            <li>{{ billing_address.company }}</li>
                        {% endif %}
                        <li>{{ billing_address.address1 }}</li>
                        {% if billing_address.address2 != blank %}
                            <li>{{ billing_address.address2 }}</li>
                        {% endif %}
                    <li>
  {{ billing_address.city }} 
  {% if billing_address.province_code != '' %}
    {{ billing_address.province_code | replace: "ENG", "" }}
  {% else %}
    {{ billing_address.province | default: "England" }}
  {% endif %}
</li>
                        <li>{{ billing_address.zip | upcase }}</li>
                        {% if shop.country != billing_address.country %}
                            <li>{{ billing_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ billing_address.phone | default: customer.phone }}</li>
                    {% elsif customer != blank %}
                        {% if customer.name != blank %}
                            <li>{{ customer.name }}</li>
                        {% endif %}
                        {% if order.customer.email != blank %}
                        <li>{{ order.customer.email }}</li>
                        {% endif %}
                        {% if customer.phone != blank %}
                            <li><span class="editable" data-key="tel">Tel.</span> {{ customer.phone }}</li>
                        {% endif %}
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                {% if shipping_address and shipping_address != "" and shipping_address != nil %}
                    <div class="address-title ship-to-title editable" data-key="ship_to">Deliver to</div>
                {% endif %}
                <ul class="address">
                    {% if shipping_address and shipping_address != blank %}
                        <li>{{ shipping_address.name }}</li>
                        {% if shipping_address.company != blank %}
                            <li>{{ shipping_address.company }}</li>
                        {% endif %}
                        <li>{{ shipping_address.address1 }}</li>
                        {% if shipping_address.address2 != blank %}
                            <li>{{ shipping_address.address2 }}</li>
                        {% endif %}
                        <li>{{ shipping_address.city }} {% if shipping_address.province_code != blank %}{{ shipping_address.province_code | replace: "ENG", "" }}{% else %}{{ shipping_address.province | replace: "England", "" }}{% endif %}</li>
                        <li>{{ shipping_address.zip | upcase }}</li>
                        {% if shop.country != shipping_address.country %}
                            <li>{{ shipping_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ shipping_address.phone }}</li>
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                <ul class="order-details">
                    <li class="order-details-invoice">
                        <span class="order-details-title editable" data-key="invoice_number">Order No:</span>
                        <span class="order-details-text">{{ order.name }}</span>
                    </li>
                    <li class="order-details-date">
                        <span class="order-details-title editable" data-key="date">Order Date:</span>
                        <span class="order-details-text">{{ order.created_at | date: "%d %B, %Y" }}</span>
                    </li>
                    {% assign transaction_text = "" %}
                    {% for transaction in transactions %}
                        {% if transaction.status != "failure" and transaction.status != "error" %}
                            {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                                {% if transaction.payment_details.credit_card_company != blank and transaction.payment_details.credit_card_company != "unknown" %}
                                    {% capture t_text %}{{ transaction.payment_details.credit_card_company }}{% endcapture %}
                                {% else %}
                                    {% capture t_text %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
                                {% endif %}
                                {% unless transaction_text contains t_text %}
                                    {% if transaction_text != blank %}
                                        {% assign transaction_text = transaction_text | append: ", " %}
                                    {% endif %}
                                    {% assign transaction_text = transaction_text | append: t_text %}
                                {% endunless %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    {% if transaction_text != blank and transaction_text != "manual" %}
                        <li class="order-details-payment">
                            <span class="order-details-title editable" data-key="payment_method">Payment:</span>
                            <span class="order-details-text">{{ transaction_text }}</span>
                        </li>
                    {% endif %}
                    {% if shipping_method.title != blank %}
                        <li class="order-details-shipping">
                            <span class="order-details-title editable" data-key="shipping_method">Fulfilment:</span>
                            <span class="order-details-text">{{ shipping_method.title }}</span>
                        </li>
                    {% endif %}
                    {% assign total_items_count = 0 %}
                    {% for line_item in line_items %}
                        {% assign total_items_count = total_items_count | plus: line_item.quantity %}
                    {% endfor %}
                    <li class="order-details-item-count">
                        <span class="order-details-title editable" data-key="total_items_count">Total Items:</span>
                        <span class="order-details-text">{{ total_items_count }}</span>
                    </li>
                    <li class="order-details-email">
                        <span class="order-details-title editable" data-key="customer_email">Email:</span>
                        <span class="order-details-text">{{ email }}</span>
                    </li>
                </ul>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-no-margin">
                <table class="order-table table">
                    <thead>
                        <tr>
                            <th colspan=2 class="order-table-title editable" data-key="item">Item Description</th>
                            <th class="order-table-qty text-center editable" data-key="qty">Qty</th>
                            <th class="order-table-price text-right editable" data-key="price">Price</th>
                            <th class="order-table-item-total text-right editable" data-key="item_total">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% assign line_items = line_items | sort: "vendor" %}
                        <!-- Bold Product Options Snippet 1 -->
                        {% assign hidden_variant_ids = "" %}
                        {% for line_item in line_items %}
                            {% if line_item.properties._boldVariantIds %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: ',' %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: line_item.properties._boldVariantIds %}
                            {% endif %}
                        {% endfor %}
                        {% assign hidden_variant_ids = hidden_variant_ids | split: ',' %}
                        <!-- END Bold Product Options Snippet 1 -->
                        {% for line_item in line_items %}
                            {% if line_item.quantity < 1 %}{% continue %}{% endif %}
                            <!-- Bold Product Options Snippet 2 -->
                            {% if hidden_variant_ids contains line_item.variant_id %}{% continue %}{% endif %}
                            {% assign adjusted_item_price = line_item.price %}
                            {% assign adjusted_line_price = line_item.price | times: line_item.quantity %}
                            {% for line_item2 in line_items %}
                                {% if line_item.properties._boldVariantIds contains line_item2.variant_id %}
                                    {% assign adjusted_item_price = adjusted_item_price | plus: line_item2.price %}
                                    {% assign adjusted_line_option_price = line_item2.price | times: line_item.quantity %}
                                    {% assign adjusted_line_price = adjusted_line_price | plus: adjusted_line_option_price %}
                                {% endif %}
                            {% endfor %}
                            <!-- END Bold Product Options Snippet 2 -->
                            <tr>
                                <td class="product-image-wrapper">{% if line_item.image != blank %}<img class="product-image" src="{{ line_item.image | img_url: 'medium' }}"/>{% endif %}</td>
                                <td class="line-item-description">
                                    <p style="font-weight: 700;"><a href="https://{{ shop.domain }}/products/{{ line_item.product.handle }}" style="font-weight: 700;color: inherit;" target="_blank">{% if line_item.vendor != blank %}{{ line_item.vendor | append:' - ' }}{% endif %}
                                            {{ line_item.title | replace: " - Default Title", "" }}</a></p>
                                    {% if line_item.sku != blank %}
                                        <p class="line-item-sku">{{ line_item.sku }}</p>
                                    {% endif %}
                                    {% for p in line_item.properties %}
                                        {% assign p_internal = p.first | slice: 0 %}
                                        {% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %}
                                            {% if p.last contains "cdn.shopify.com" or p.last contains "/uploads/" or p.last contains ".png?" or p.last contains ".jpg?" or p.last contains "//uploadery.s3" %}
                                                <p class="line-item-property">{{ p.first }}:<br>
                                                </p>
                                                <a href="{{ p.last }}" target="_blank"><img src="{{ p.last }}" alt="{{ p.first }}" width="60" border="0" style="width: 60px; height: auto !important;"></a>
                                            {% else %}
                                                <p class="line-item-property">{{ p.first }}: <b>{{ p.last | newline_to_br }}</b></p>
                                            {% endif %}
                                        {% endunless %}
                                    {% endfor %}
                                    {% assign refunded_quantity = 0 %}
                                    {% for refund in refunds %}
                                        {% for refund_line_item in refund.refund_line_items %}
                                            {% if line_item.id == refund_line_item.line_item_id %}
                                                {% assign refunded_quantity = refunded_quantity | plus: refund_line_item.quantity %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                    {% if refunded_quantity > 0 %}
                                        <span class="line-item-refund">Refunded × {{ refunded_quantity }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-center line-item-qty" {% if line_item.quantity > 1 %}style="outline: 1px solid red !important"{% endif %}>&times; {{ line_item.quantity }}</td>
                                <td class="text-right no-wrap line-item-price">
                                    {% if line_item.original_price and line_item.original_price > adjusted_item_price %}
                                        {% assign original_price = line_item.original_price %}
                                    {% elsif line_item.variant.compare_at_price and line_item.variant.compare_at_price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.compare_at_price %}
                                    {% elsif line_item.variant.price and line_item.variant.price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.price %}
                                    {% else %}
                                        {% assign original_price = 0 %}
                                    {% endif %}
                                    {% if original_price > 0 and original_price > adjusted_item_price %}
                                        <p class="strikethrough"><s>{{ original_price | money }}</s></p>
                                    {% endif %}
                                    <p>{{ adjusted_item_price | money }}</p>
                                </td>
                                <td class="text-right no-wrap line-item-line-price">{{ adjusted_line_price | money }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-8">
                <div class="order.notes">
                    {% if note != blank or attributes != blank %}
                        <div class="order.notes-title editable" data-key="order.notes">Customer Notes</div>
                    {% endif %}
                    <div class="order.notes-text">
                        {{ note | newline_to_br }}
                        {% for attribute in attributes %}
                            {% assign a_internal = attribute.first | slice: 0 %}
                            {% unless a_internal == "_" %}
                                <br>
                                <b>{{ attribute.first | replace: "-", " " | replace: "_", " " | capitalize }}:</b> {{ attribute.last | newline_to_br }}
                            {% endunless %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <table class="pricing-table table">
                    <tbody>
                        {% for discount in discounts %}
                            {% if discount.amount != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span>{% if discount.code != blank %} <span class="break">{{ order.discount.code }}</span>{% endif %}</td>
                                    <td class="pricing-table-text">-{{ order.discount.amount | money }}</td>
                                </tr>
                            {% endif %}
                        {% else %}
                            {% if total_discounts != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span></td>
                                    <td class="pricing-table-text">-{{ order.total_discounts | money }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td class="pricing-table-title editable" data-key="subtotal">Subtotal</td>
                            <td class="pricing-table-text">{{ order.subtotal_price | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="shipping_handling">Shipping</td>
                            <td class="pricing-table-text">{{ order.shipping_price | default: 0 | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="total_tax">VAT</td>
                            <td class="pricing-table-text">{{ order.total_tax | default: 0 | money }}</td>
                        </tr>
                        <tr class="pricing-table-total-row">
                            <td class="pricing-table-title"><span class="editable" data-key="total">Total incl. VAT</span></td>
                            <td class="pricing-table-text">{{ order.total_price | money }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 shop-social-block half-margin-bottom">
                <div class="shop-social">
                </div>
                <a href="https://{{ shop.domain }}" target="_blank">
                    <div class="shop-domain editable" data-key="shop_domain">
                        campusandcodunstable.com
                    </div>
                </a>
            </div>
            <div class="col-xs-12 col-no-margin">
                <div class="terms-text full-editable" data-key="terms_and_conditions">
                    <p>
                        <p>If you have any questions, please get in touch: <b>lutononline@pinnaclegroupeu.com</b></p>
                    </p>
                </div>
                <div class="thanks-text full-editable" data-key="thanks">
                    <p>
                        <p>Thank you for your support!</p>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
    </div>
</div>



MakP
Shopify Partner
33 9 13

This is an accepted solution.

Changing {{ note }} to {{ order.note }} should solve this:

<!-- Me -->
<!-- Common Base Styling -->
{% assign primary_font = "Roboto"%}
{% assign primary_font_color = "#000000" %} <!-- Black text color -->
{% assign primary_font_size = "11px"%}
{% assign secondary_font = "Roboto"%}
{% assign secondary_font_color = "#333333" %} <!-- Grey text color -->
{% assign theme_color = "#000000"%}
<script type="text/javascript">
    var fHead = document.head || document.getElementsByTagName('head')[0];
      {% assign font_weights = "300,400,700" | split: ',' %}
      {% for font_weight in font_weights %}
        var font1Id = 'font-{{ primary_font | replace: " ", "-" }}-{{ font_weight }}';
        if (!document.getElementById(font1Id)) {
          var linkElement = document.createElement('link');
          linkElement.setAttribute('id', font1Id)
          linkElement.setAttribute('rel', 'stylesheet');
          linkElement.setAttribute('type', 'text/css');
          linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ primary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
          fHead.appendChild(linkElement);
        };
        {% if secondary_font != blank and secondary_font != primary_font %}
          var font2Id = 'font-{{ secondary_font | replace: " ", "-" }}-{{ font_weight }}';
          if (!document.getElementById(font2Id)) {
            var linkElement = document.createElement('link');
            linkElement.setAttribute('id', font2Id)
            linkElement.setAttribute('rel', 'stylesheet');
            linkElement.setAttribute('type', 'text/css');
            linkElement.setAttribute('href', 'https://fonts.googleapis.com/css?family={{ secondary_font | replace: " ", "+" }}:{{ font_weight }}&subset=latin-ext');
            fHead.appendChild(linkElement);
          };
        {% endif %}
      {% endfor %}
</script>
<script>
    $(function () {
         if (navigator.userAgent.indexOf('Safari') != -1 &&
         navigator.userAgent.indexOf('Chrome') == -1) {
             $("body").addClass("safari");
         }
       });
</script>
<style type="text/css">
    /* ### BASE - PAGE SIZING AND MARGIN SETUP NORMALIZATION ACROSS BROWSERS ### */
      @Page {
        margin: 12mm !important;
        margin-top: 12mm !important;
        margin-right: 12mm !important;
        margin-bottom: 12mm !important;
        margin-left: 12mm !important;
      }
      @media print {
        .safari {
          padding-top: 15px;
          box-sizing: border-box;
        }
        .printer-preview-content:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .printer-preview-content {
          padding-left: 15px;
          padding-right: 15px;
          box-sizing: border-box;
        }
      }
      @media screen {
        .printer-preview-content {
          padding: 14px 0;
          min-height: 800px;
          /* background-image: url(http://basehold.it/i/14) */
        }
        .printer-preview-content .printer-preview-content {
          margin-right: auto;
          margin-left: auto;
          max-width: 680px;
        }
      }
      @media screen,print {
    
        /* ### BASE - TYPOGRAPHY AND REMOVAL OF STANDARD SHOPIFY STYLING ### */
        .printer-preview-content .t118122 * {
          color: {{ secondary_font_color }};
          font-family: '{{ primary_font }}';
          font-size: {{ primary_font_size }};
          font-weight: 400;
          line-height: 14px;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-rendering: optimizeLegibility;
          margin: 0 0 0 0;
          padding: 0 0 0 0;
          -webkit-print-color-adjust: exact;
          overflow: visible !important;
        }
        .printer-preview-content .t118122 h1 {
          font-size: 28px;
          line-height: 42px;
        }
        .printer-preview-content .t118122 h2 {
          font-size: 18px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h3 {
          font-size: 14px;
          line-height: 28px;
        }
        .printer-preview-content .t118122 h1,
        .printer-preview-content .t118122 h2,
        .printer-preview-content .t118122 h3 {
          margin-bottom: 14px;
        }
        .printer-preview-content .t118122 a,
        .printer-preview-content .t118122 a * {
          text-decoration: none !important;
        }
        .printer-preview-content .t118122 b,
        .printer-preview-content .t118122 b * {
          font-weight: bold;
        }
        .printer-preview-content .t118122 .text-right {
          text-align: right;
        }
        .printer-preview-content .t118122 .text-center {
          text-align: center;
        }
        .printer-preview-content .t118122 .no-wrap {
          white-space: nowrap;
        }
    
        /* ### BASE - GRID AND RE-USABLE LAYOUT COMPONENTS ### */
        .printer-preview-content .t118122 .row {
          width: 100%;
          display: block;
          clear: both;
        }
        .printer-preview-content .t118122 .row:after {
          content: "";
          display: table;
          clear: both;
        }
        .printer-preview-content .t118122 .col-xs-1,
        .printer-preview-content .t118122 .col-xs-2,
        .printer-preview-content .t118122 .col-xs-3,
        .printer-preview-content .t118122 .col-xs-4,
        .printer-preview-content .t118122 .col-xs-5,
        .printer-preview-content .t118122 .col-xs-6,
        .printer-preview-content .t118122 .col-xs-7,
        .printer-preview-content .t118122 .col-xs-8,
        .printer-preview-content .t118122 .col-xs-9,
        .printer-preview-content .t118122 .col-xs-10,
        .printer-preview-content .t118122 .col-xs-11,
        .printer-preview-content .t118122 .col-xs-12 {
          float: left;
          min-height: 1px;
          margin-bottom: 28px;
        }
        .printer-preview-content .t118122 .col-xs-12 {
          width: 100%;
        }
        .printer-preview-content .t118122 .col-xs-11 {
          width: 91.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-10 {
          width: 83.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-9 {
          width: 75%;
        }
        .printer-preview-content .t118122 .col-xs-8 {
          width: 66.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-7 {
          width: 58.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-6 {
          width: 50%;
        }
        .printer-preview-content .t118122 .col-xs-5 {
          width: 41.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-4 {
          width: 33.33333333%;
        }
        .printer-preview-content .t118122 .col-xs-3 {
          width: 25%;
        }
        .printer-preview-content .t118122 .col-xs-2 {
          width: 16.66666667%;
        }
        .printer-preview-content .t118122 .col-xs-1 {
          width: 8.33333333%;
        }
        .printer-preview-content .t118122 .col-no-margin {
          margin-bottom: 0 !important;
        }
        .printer-preview-content .t118122 .clear-fix::after {
          content: "";
          clear: both;
          display: table;
        }
        .printer-preview-content .t118122 .half-margin-top {
          margin-top: 7px !important;
        }
        .printer-preview-content .t118122 .half-margin-bottom {
          margin-bottom: 7px !important;
        }
        .printer-preview-content .t118122 .margin-bottom {
          margin-bottom: 14px !important;
          margin-top: 1px;
        }
        .printer-preview-content .t118122 .margin-top {
          margin-top: 14px !important;
        }
        .printer-preview-content .t118122 .double-margin-top {
          margin-top: 28px !important;
        }
        .printer-preview-content .t118122 .double-margin-bottom {
          margin-bottom: 28px !important;
        }
    
        .printer-preview-content .t118122 .strikethrough {
          text-decoration: line-through !important;
        }
    
        .printer-preview-content .t118122 .break {
          word-break: break-all !important;
        }
    
        /* ### BASE - TABLE STYLING ### */
        .printer-preview-content .t118122 table,
        .printer-preview-content .t118122 .table {
          width: 100%;
          max-width: 100%;
          background-color: transparent;
          border-collapse: collapse;
        }
        .printer-preview-content .t118122 table thead {
          display: table-row-group;
        }
        .printer-preview-content .t118122 table tbody tr {
          page-break-inside:avoid !important;
          page-break-after:auto !important;
        }
        .printer-preview-content .t118122 table tbody tr td {
          page-break-inside:avoid !important;
        }
        .printer-preview-content .t118122 th {
          white-space: nowrap;
          text-align: left;
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 td {
          vertical-align: middle;
          border-top: 0;
          border-bottom: 0;
        }
        .printer-preview-content .t118122 .order-table tbody > tr:nth-child(odd) td {
          background-color: #f5f5f5;
        }
        .printer-preview-content .t118122 .pricing-table tbody > tr:nth-child(even) > td {
          background-color: #f5f5f5;
        }
    /*    .printer-preview-content .t118122 .pricing-table tbody > tr > td.pricing-table-title {
          word-break: break-all;
        }*/
        .printer-preview-content .t118122 th.order-table-qty {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-price {
          width: 10%;
        }
        .printer-preview-content .t118122 th.order-table-item-total,
        .printer-preview-content .t118122 th.order-table-reason {
          width: 17%;
        }
        .printer-preview-content .t118122 th.order-table-return-comments {
          width: 30%;
        }
        .printer-preview-content .t118122 .pricing-table-text {
          text-align: right;
          white-space: nowrap;
        }
    
        /* ### BASE - PRODUCT IMAGE SIZING TO RETAIN LINE HEIGHT RYTHM) ### */
        .printer-preview-content .t118122 .product-image-wrapper {
          width: 56px;
          max-height: 56px;
          vertical-align: middle;
          text-align: center;
        }
        .printer-preview-content .t118122 .product-image {
          padding: 0 4px;
          page-break-inside:avoid !important;
          max-width: 56px;
          height: auto;
          max-height: 56px;
    }
    
        /* ### BASE - LISTS RESET ### */
        .printer-preview-content .t118122 ul {
          list-style: none;
        }
        .printer-preview-content .t118122 li {
          color: {{ secondary_font_color }};
          list-style: none;
        }
    
        /* ### BASE - LOGO ### */
        .printer-preview-content .t118122 .logo-wrapper {
          display: inline-block;
          width: 100%;
          padding-bottom: 7px;
        }
        .printer-preview-content .t118122 .logo {
          float: left;
          padding-right: 15px;
          max-width: 30%;
          max-height: 28.2px;
        }
    
        /* ### BASE - BARCODE ### */
        .printer-preview-content .t118122 .order-number-barcode,
        .printer-preview-content .t118122 .product-barcode {
          display: block;
        }
    
        /* ### BASE - ADDITONAL COMMON SHARED TYPOGRAPHY AND ALIGNMENT ### */
        .printer-preview-content .t118122 .address {
          margin-right: 5%;
        }
        .printer-preview-content .t118122 .col-xs-8 order.notes,
        .printer-preview-content .t118122 .col-xs-6 order.notes {
          margin-right: 20%;
        }
        .printer-preview-content .t118122 order.notes-title,
        .printer-preview-content .t118122 order.return-codes {
          margin: 7px 0;
        }
        /* ### BASE - HORIZONTAL RULE MARKS ### */
        .printer-preview-content .t118122 hr {
          background: {{ theme_color }};
          border-top: 0;
          border: 0;
          height: 2px;
          width: 100%;
          margin-bottom: -2px;
        }
    
      }
</style>
<!-- Template Specific Styling -->
<style type="text/css">
    @media screen,print {
      /* ### DESIGN SPECIFIC - TYPOGRAPHY ### */
      .printer-preview-content .t118122 h1 {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 h2 {
        font-family: '{{ secondary_font }}';
      }
      .printer-preview-content .t118122 h3 {
        font-family: '{{ secondary_font }}';
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - STORE DETAILS ### */
      .printer-preview-content .t118122 .logo-wrapper {
        max-width: 90%;
      }
      .printer-preview-content .t118122 .shop-address-name {
        color: {{ theme_color }};
        font-family: '{{ secondary_font }}';
        font-size: 15px;
        font-weight: 700;
        padding-top:3px;
        padding-bottom:3px;
      }
      .printer-preview-content .t118122 .shop-social-block {
        text-align: center;
      }
      .printer-preview-content .t118122 .shop-contact-block b,
      .printer-preview-content .t118122 .shop-contact-block b * {
        font-weight: 700;
        color: {{ theme_color }};
      }
      .printer-preview-content .t118122 #header-row .shop-address-name,
      .printer-preview-content .t118122 #header-row .order-details,
      .printer-preview-content .t118122 #header-row .logo-wrapper {
        padding-left: 0px;
      }
    
      /* ### DESIGN SPECIFIC - ORDER DETAILS ### */
      .printer-preview-content .t118122 .order-details-title {
        display: inline-block;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:first-of-type * {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color}};
      }
      .printer-preview-content .t118122 .order-details li:not(:first-of-type) * {
        font-weight: normal;
      }
    
      /* ### DESIGN SPECIFIC - BILL TO AND SHIP TO ADDRESS ### */
      .printer-preview-content .t118122 .address-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - TABLE HEADER ### */
      .printer-preview-content .t118122 .order-table thead tr th {
        padding-left: 4px;
        padding-right: 4px;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
        background-color: {{ theme_color }};
        color: #fff;
      }
    
      /* ### DESIGN SPECIFIC - TABLE BODY (SHARED) ### */
      .printer-preview-content .t118122 .order-table tbody tr td,
      .printer-preview-content .t118122 .pricing-table tbody tr td {
        padding-left: 4px;
        padding-right: 4px;
        border-top: 0;
        padding-top: 7px;
        border-bottom: 2px solid #fff;
        padding-bottom:5px;
      }
      /* ### DESIGN SPECIFIC - ORDER TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description,
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-qty {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description p.line-item-sku {
        font-weight: normal;
      }
      .printer-preview-content .t118122 .order-table tbody > tr > td.line-item-description span.line-item-refund {
        display: inline-block;
        padding: 2px 8px;
        margin-top: 3px;
        background-color: #FFEA8A;
        border-radius: 14px;
      }
    
      /* ### DESIGN SPECIFIC - PRICING TABLE SPECIFIC ### */
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title span,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        background-color: {{ theme_color }};
        color: #fff;
      }
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-title *,
      .printer-preview-content .t118122 .pricing-table tbody > tr.pricing-table-total-row .pricing-table-text * {
        color: #fff;
        font-family: '{{ secondary_font }}';
        font-weight: 700;
      }
    
      /* ### DESIGN SPECIFIC - ORDER NOTES ### */
      .printer-preview-content .t118122 order.notes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - RETURN FORM REASON CODES ### */
      .printer-preview-content .t118122 .return-codes-title {
        font-family: '{{ secondary_font }}';
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .return-codes b,
      .printer-preview-content .t118122 .return-code b * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - THANK YOU MESSAGE ### */
      .printer-preview-content .t118122 .thanks-text {
        text-align: center;
        font-weight: 700;
        color: {{ primary_font_color }};
      }
      .printer-preview-content .t118122 .thanks-text * {
        font-weight: 700;
        color: {{ primary_font_color }};
      }
    
      /* ### DESIGN SPECIFIC - GIFT MESSAGE ### */
      .printer-preview-content .t118122 .gift-text {
        text-align: center;
        font-weight: 700;
        width: 80%;
        margin: 0 10%;
        padding-top:28px;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text * {
        font-weight: 700;
        font-size: 16px;
      }
      .printer-preview-content .t118122 .gift-text svg {
        padding-bottom:7px;
      }
    
      /* ### DESIGN SPECIFIC - TERMS AND CONDITIONS ### */
      .printer-preview-content .t118122 .terms-text {
        font-size: 9px;
        text-align: center;
      }
      .printer-preview-content .t118122 .terms-text * {
        font-size: 9px;
      }
    
      /* ### DESIGN SPECIFIC - SOCIAL ICONS ### */
      .printer-preview-content .t118122 .social-icons {
        display: inline;
        width: 20px;
        margin: 7px 4px;
      }
    
    }
</style>
<div class="printer-preview-content" contenteditable="true" spellcheck="false" title="Click to edit text (changes will be printed but not saved)">
    <div class="t118122">
        <div class="row">
            <div class="col-xs-4">
            </div>
            <div class="col-xs-8">
                <div class="shop-address-name editable" data-key="shop_name">
                               Campus&Co Dunstable
                </div>
                <div class="shop-address-block full-editable" data-key="shop_block">
                    <p>                  campusandcodunstable.com<br>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-4">
                <div class="address-title bill-to-title editable" data-key="bill_to">Bill to</div>
                <ul class="address">
                    {% assign billing_address = billing_address | default: customer.default_address %}
                    {% if billing_address and billing_address != blank %}
                        <li>{{ billing_address.name }}</li>
                        {% if billing_address.company != blank %}
                            <li>{{ billing_address.company }}</li>
                        {% endif %}
                        <li>{{ billing_address.address1 }}</li>
                        {% if billing_address.address2 != blank %}
                            <li>{{ billing_address.address2 }}</li>
                        {% endif %}
                    <li>
  {{ billing_address.city }} 
  {% if billing_address.province_code != '' %}
    {{ billing_address.province_code | replace: "ENG", "" }}
  {% else %}
    {{ billing_address.province | default: "England" }}
  {% endif %}
</li>
                        <li>{{ billing_address.zip | upcase }}</li>
                        {% if shop.country != billing_address.country %}
                            <li>{{ billing_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ billing_address.phone | default: customer.phone }}</li>
                    {% elsif customer != blank %}
                        {% if customer.name != blank %}
                            <li>{{ customer.name }}</li>
                        {% endif %}
                        {% if order.customer.email != blank %}
                        <li>{{ order.customer.email }}</li>
                        {% endif %}
                        {% if customer.phone != blank %}
                            <li><span class="editable" data-key="tel">Tel.</span> {{ customer.phone }}</li>
                        {% endif %}
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                {% if shipping_address and shipping_address != "" and shipping_address != nil %}
                    <div class="address-title ship-to-title editable" data-key="ship_to">Deliver to</div>
                {% endif %}
                <ul class="address">
                    {% if shipping_address and shipping_address != blank %}
                        <li>{{ shipping_address.name }}</li>
                        {% if shipping_address.company != blank %}
                            <li>{{ shipping_address.company }}</li>
                        {% endif %}
                        <li>{{ shipping_address.address1 }}</li>
                        {% if shipping_address.address2 != blank %}
                            <li>{{ shipping_address.address2 }}</li>
                        {% endif %}
                        <li>{{ shipping_address.city }} {% if shipping_address.province_code != blank %}{{ shipping_address.province_code | replace: "ENG", "" }}{% else %}{{ shipping_address.province | replace: "England", "" }}{% endif %}</li>
                        <li>{{ shipping_address.zip | upcase }}</li>
                        {% if shop.country != shipping_address.country %}
                            <li>{{ shipping_address.country }}</li>
                        {% endif %}
                        <li><span class="editable" data-key="tel">Tel.</span> {{ shipping_address.phone }}</li>
                    {% endif %}
                </ul>
            </div>
            <div class="col-xs-4">
                <ul class="order-details">
                    <li class="order-details-invoice">
                        <span class="order-details-title editable" data-key="invoice_number">Order No:</span>
                        <span class="order-details-text">{{ order.name }}</span>
                    </li>
                    <li class="order-details-date">
                        <span class="order-details-title editable" data-key="date">Order Date:</span>
                        <span class="order-details-text">{{ order.created_at | date: "%d %B, %Y" }}</span>
                    </li>
                    {% assign transaction_text = "" %}
                    {% for transaction in transactions %}
                        {% if transaction.status != "failure" and transaction.status != "error" %}
                            {% if transaction.kind == "authorization" or transaction.kind == "sale" %}
                                {% if transaction.payment_details.credit_card_company != blank and transaction.payment_details.credit_card_company != "unknown" %}
                                    {% capture t_text %}{{ transaction.payment_details.credit_card_company }}{% endcapture %}
                                {% else %}
                                    {% capture t_text %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
                                {% endif %}
                                {% unless transaction_text contains t_text %}
                                    {% if transaction_text != blank %}
                                        {% assign transaction_text = transaction_text | append: ", " %}
                                    {% endif %}
                                    {% assign transaction_text = transaction_text | append: t_text %}
                                {% endunless %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                    {% if transaction_text != blank and transaction_text != "manual" %}
                        <li class="order-details-payment">
                            <span class="order-details-title editable" data-key="payment_method">Payment:</span>
                            <span class="order-details-text">{{ transaction_text }}</span>
                        </li>
                    {% endif %}
                    {% if shipping_method.title != blank %}
                        <li class="order-details-shipping">
                            <span class="order-details-title editable" data-key="shipping_method">Fulfilment:</span>
                            <span class="order-details-text">{{ shipping_method.title }}</span>
                        </li>
                    {% endif %}
                    {% assign total_items_count = 0 %}
                    {% for line_item in line_items %}
                        {% assign total_items_count = total_items_count | plus: line_item.quantity %}
                    {% endfor %}
                    <li class="order-details-item-count">
                        <span class="order-details-title editable" data-key="total_items_count">Total Items:</span>
                        <span class="order-details-text">{{ total_items_count }}</span>
                    </li>
                    <li class="order-details-email">
                        <span class="order-details-title editable" data-key="customer_email">Email:</span>
                        <span class="order-details-text">{{ email }}</span>
                    </li>
                </ul>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-no-margin">
                <table class="order-table table">
                    <thead>
                        <tr>
                            <th colspan=2 class="order-table-title editable" data-key="item">Item Description</th>
                            <th class="order-table-qty text-center editable" data-key="qty">Qty</th>
                            <th class="order-table-price text-right editable" data-key="price">Price</th>
                            <th class="order-table-item-total text-right editable" data-key="item_total">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% assign line_items = line_items | sort: "vendor" %}
                        <!-- Bold Product Options Snippet 1 -->
                        {% assign hidden_variant_ids = "" %}
                        {% for line_item in line_items %}
                            {% if line_item.properties._boldVariantIds %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: ',' %}
                                {% assign hidden_variant_ids = hidden_variant_ids | append: line_item.properties._boldVariantIds %}
                            {% endif %}
                        {% endfor %}
                        {% assign hidden_variant_ids = hidden_variant_ids | split: ',' %}
                        <!-- END Bold Product Options Snippet 1 -->
                        {% for line_item in line_items %}
                            {% if line_item.quantity < 1 %}{% continue %}{% endif %}
                            <!-- Bold Product Options Snippet 2 -->
                            {% if hidden_variant_ids contains line_item.variant_id %}{% continue %}{% endif %}
                            {% assign adjusted_item_price = line_item.price %}
                            {% assign adjusted_line_price = line_item.price | times: line_item.quantity %}
                            {% for line_item2 in line_items %}
                                {% if line_item.properties._boldVariantIds contains line_item2.variant_id %}
                                    {% assign adjusted_item_price = adjusted_item_price | plus: line_item2.price %}
                                    {% assign adjusted_line_option_price = line_item2.price | times: line_item.quantity %}
                                    {% assign adjusted_line_price = adjusted_line_price | plus: adjusted_line_option_price %}
                                {% endif %}
                            {% endfor %}
                            <!-- END Bold Product Options Snippet 2 -->
                            <tr>
                                <td class="product-image-wrapper">{% if line_item.image != blank %}<img class="product-image" src="{{ line_item.image | img_url: 'medium' }}"/>{% endif %}</td>
                                <td class="line-item-description">
                                    <p style="font-weight: 700;"><a href="https://{{ shop.domain }}/products/{{ line_item.product.handle }}" style="font-weight: 700;color: inherit;" target="_blank">{% if line_item.vendor != blank %}{{ line_item.vendor | append:' - ' }}{% endif %}
                                            {{ line_item.title | replace: " - Default Title", "" }}</a></p>
                                    {% if line_item.sku != blank %}
                                        <p class="line-item-sku">{{ line_item.sku }}</p>
                                    {% endif %}
                                    {% for p in line_item.properties %}
                                        {% assign p_internal = p.first | slice: 0 %}
                                        {% unless p.first contains "builder_id" or p.first contains "builder_info" or p.first contains "master_builder" or p_internal == "_" or p.last == "" or p.last == blank %}
                                            {% if p.last contains "cdn.shopify.com" or p.last contains "/uploads/" or p.last contains ".png?" or p.last contains ".jpg?" or p.last contains "//uploadery.s3" %}
                                                <p class="line-item-property">{{ p.first }}:<br>
                                                </p>
                                                <a href="{{ p.last }}" target="_blank"><img src="{{ p.last }}" alt="{{ p.first }}" width="60" border="0" style="width: 60px; height: auto !important;"></a>
                                            {% else %}
                                                <p class="line-item-property">{{ p.first }}: <b>{{ p.last | newline_to_br }}</b></p>
                                            {% endif %}
                                        {% endunless %}
                                    {% endfor %}
                                    {% assign refunded_quantity = 0 %}
                                    {% for refund in refunds %}
                                        {% for refund_line_item in refund.refund_line_items %}
                                            {% if line_item.id == refund_line_item.line_item_id %}
                                                {% assign refunded_quantity = refunded_quantity | plus: refund_line_item.quantity %}
                                            {% endif %}
                                        {% endfor %}
                                    {% endfor %}
                                    {% if refunded_quantity > 0 %}
                                        <span class="line-item-refund">Refunded × {{ refunded_quantity }}</span>
                                    {% endif %}
                                </td>
                                <td class="text-center line-item-qty" {% if line_item.quantity > 1 %}style="outline: 1px solid red !important"{% endif %}>&times; {{ line_item.quantity }}</td>
                                <td class="text-right no-wrap line-item-price">
                                    {% if line_item.original_price and line_item.original_price > adjusted_item_price %}
                                        {% assign original_price = line_item.original_price %}
                                    {% elsif line_item.variant.compare_at_price and line_item.variant.compare_at_price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.compare_at_price %}
                                    {% elsif line_item.variant.price and line_item.variant.price > adjusted_item_price %}
                                        {% assign original_price = line_item.variant.price %}
                                    {% else %}
                                        {% assign original_price = 0 %}
                                    {% endif %}
                                    {% if original_price > 0 and original_price > adjusted_item_price %}
                                        <p class="strikethrough"><s>{{ original_price | money }}</s></p>
                                    {% endif %}
                                    <p>{{ adjusted_item_price | money }}</p>
                                </td>
                                <td class="text-right no-wrap line-item-line-price">{{ adjusted_line_price | money }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-8">
                <div class="order.notes">
                    {% if order.note != blank or attributes != blank %}
                        <div class="order.notes-title editable" data-key="order.notes">Customer Notes</div>
                    {% endif %}
                    <div class="order.notes-text">
                        {{ order.note | newline_to_br }}
                        {% for attribute in attributes %}
                            {% assign a_internal = attribute.first | slice: 0 %}
                            {% unless a_internal == "_" %}
                                <br>
                                <b>{{ attribute.first | replace: "-", " " | replace: "_", " " | capitalize }}:</b> {{ attribute.last | newline_to_br }}
                            {% endunless %}
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <table class="pricing-table table">
                    <tbody>
                        {% for discount in discounts %}
                            {% if discount.amount != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span>{% if discount.code != blank %} <span class="break">{{ order.discount.code }}</span>{% endif %}</td>
                                    <td class="pricing-table-text">-{{ order.discount.amount | money }}</td>
                                </tr>
                            {% endif %}
                        {% else %}
                            {% if total_discounts != 0.00 %}
                                <tr>
                                    <td class="pricing-table-title"><span class="editable" data-key="discount">Discount</span></td>
                                    <td class="pricing-table-text">-{{ order.total_discounts | money }}</td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                        <tr>
                            <td class="pricing-table-title editable" data-key="subtotal">Subtotal</td>
                            <td class="pricing-table-text">{{ order.subtotal_price | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="shipping_handling">Shipping</td>
                            <td class="pricing-table-text">{{ order.shipping_price | default: 0 | money }}</td>
                        </tr>
                        <tr>
                            <td class="pricing-table-title editable" data-key="total_tax">VAT</td>
                            <td class="pricing-table-text">{{ order.total_tax | default: 0 | money }}</td>
                        </tr>
                        <tr class="pricing-table-total-row">
                            <td class="pricing-table-title"><span class="editable" data-key="total">Total incl. VAT</span></td>
                            <td class="pricing-table-text">{{ order.total_price | money }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="clear-fix"></div>
        </div>
        <div class="row">
            <div class="col-xs-12 shop-social-block half-margin-bottom">
                <div class="shop-social">
                </div>
                <a href="https://{{ shop.domain }}" target="_blank">
                    <div class="shop-domain editable" data-key="shop_domain">
                        campusandcodunstable.com
                    </div>
                </a>
            </div>
            <div class="col-xs-12 col-no-margin">
                <div class="terms-text full-editable" data-key="terms_and_conditions">
                    <p>
                        <p>If you have any questions, please get in touch: <b>lutononline@pinnaclegroupeu.com</b></p>
                    </p>
                </div>
                <div class="thanks-text full-editable" data-key="thanks">
                    <p>
                        <p>Thank you for your support!</p>
                    </p>
                </div>
            </div>
            <div class="clear-fix"></div>
        </div>
    </div>
</div>