Default packing slip template

style.liquid

* {
  padding: 0;
  margin: 0;
}

.logo img {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6, p {
  padding: 0;
  margin: 0;
}

#wrapper {
  margin: 20px;
}

.clr {
  clear: both;
}

.header-left, .header-right, .footer-left {
  width: 50%;
  float: left;
}

img {
  margin-top: 30px;
}

.business-information {
  margin-top: 5px;
}

.info {
  margin-left: 30px;
  padding-top: 28px;
}

.billing-address, .shipping-address, .payment-method, .shipping-method {
  float: left;
  width: 50%;
  color: black;
}

.billing-address p, .shipping-address p, .payment-method p, .shipping-method p {
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.content {
  padding-top: 30px;
}

.mp-block-heading {
  width: 98% !important;
  padding: 5px 0 5px 5px;
  color: #FFF;
}

.mp-block-heading, .mp-note, .mp-heading, .mp-main-bg-color {
  background-color: {{ template.primary_color | default: "#000000" }};
}

.table {
  width: 100%;
}

.header-table {
  width: 100%;
  height: 100%;
}

.mp-item {
  width: 59%;
  float: left;
  padding: 6px 0;
}

.mp-qty, .mp-price, .mp-subtotal {
  width: 13%;
  float: left;
  text-align: center;
  padding: 6px 0;

}

.mp-heading {
  width: 100%;
  height: 32px;
  color: #FFF;
}

.mp-heading span {
  font-weight: bold;
}

.mp-item {
  padding-left: 5px
}

.order-totals {
  text-align: right;
  margin-top: 20px;
}

.mp {
  width: 100%;
  height: 35px;
}

.mp-str {
  font-weight: bold;
  width: 80%;
  float: left;
}

.mp-right {
  width: 18%;
  float: left;
}

footer {
  margin-top: 30px;
}

.footer-left {
  width: 50%;
}

.mp-note {
  color: #FFF;
  padding-left: 3px;
}

.mp-item-bc {
  width: 44%;
  float: left;
  padding: 6px 0 6px 5px;
}

.mp-barcode-bc {
  width: 30%;
  float: left;
  padding: 6px 0;
}

.mp-barcode-bc p {
  text-align: right;
}

.mp-qty-bc, .mp-price-bc, .mp-subtotal-bc {
  width: 10%;
  float: left;
  text-align: center;
  padding: 6px 0;
}

.mp-qty-bc-title {
  margin-top: 0 !important;
}

.mp-qty-bc {
  width: 5%;
  float: left;
  text-align: center;
  padding: 6px 0;
}

.payment-method .content {
  display: none
}

.paymentTable {
  margin-top: 10px;
}

.text-note {
  font-style: italic;
  color: rgb(93, 93, 93);
}

.barcode, .qrcode {
  margin-top: 4px;
}

.center {
  text-align: center;
}

template.liquid

{% assign logoWidth = configuration.logoWidth | default: 150 %}
{% assign logoSize = template.logo_size | default: 100 %}
{% assign logoHeight = configuration.logoHeight | default: 75 %}
{% unless template.font_family == blank %}
<span>
  <link type="text/css" href="https://fonts.googleapis.com/css?family={{ template.font_family }}:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
  <style type="text/css">
    #wrapper * {
      font-family: '{{ template.font_family | replace: "+", " " }}', serif;
    }
  </style>
</span>
{% endunless %}
{% for fulfillment in order.fulfillments %}
  <div id="wrapper">
    <div class="header">
      <div class="header-left">
        <div class="logo-left">
          {% unless configuration.logo == blank %}
            <a class="logo" href="{{ shop.url }}">
              <img
                style="max-width: {{ logoWidth }}px; width: {{ logoSize }}%;"
                src="{{ configuration.logo | asset_url }}"
                alt="Main Website Store" border="0"
              />
            </a>
          {% endunless %}
        </div>
        <div class="business-information">
          <p class="business-name"></p>
          <p>{{ text.address }}: {{ configuration.address }}</p>
          <p>{{ text.phone }}: {{ configuration.phone }}</p>
          <p>{{ text.tax_id }}: {{ configuration.vat_number }} </p>
          <p>{{ text.contact }}: {{ configuration.email }}</p>
          <p>{{ text.registered }}: {{ configuration.registered_number }}</p>
        </div>
      </div>
      <div class="header-right">
        <div class="info">
          <h1 class="info-title">{{ text.packing_slip | upcase }}</h1>
          <p>{{ text.packing_slip }} <b>{{ order.name }}</b></p>
          <p>{{ text.packing_slip_date }} : <b>{{ fulfillment.created_at | date }}</b></p>
          {% if configuration.barcode_enable %}
            <p class="mp-invoice-barcode">
              {{ fulfillment.name | barcode }}
            </p>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="clr"></div>
    <div class="content">
      <div class="address">
        <div class="shipping-address">
          <h3 class="mp-block-heading">{{ text.shipping_address }}</h3>
          <p>{{ order.shipping_address.name | default: text.no_shipping }}<br/>
            {{ order.shipping_address.address1 }}<br/>
            {% unless order.shipping_address.address2 == blank %}
              {{ order.shipping_address.address2 }}<br/>
            {% endunless %}
            {{ order.shipping_address.city }}<br/>
            {{ order.shipping_address.country }}<br/>
            {% if order.shipping_address.phone %}
            T: <a href="tel:{{ order.shipping_address.phone }}">{{ order.shipping_address.phone }}</a>
            {% endif %}
          </p>
        </div>
        <div class="shipping-method">
          <h3 class="mp-block-heading">{{ text.shipping_method }}</h3>
          {% if order.shipping_lines.size > 0 %}
          {% for line in  order.shipping_lines %}
            <p>{{ line.title }}</p>
          {% endfor %}
          {% else %}
          <p>{{ text.no_shipping }}</p>
          {% endif %}
        </div>
      </div>
      <div class="clr"></div>
    </div>

    <div class="table">
      <div class="mp-row mp-heading">
        <div class="mp-item-bc">
          <span>{{ text.items }}<span>
          </span></span></div>
        <div class="mp-barcode-bc">
          <span></span>
        </div>
        <div class="mp-qty-bc mp-qty-bc-title">
          <span>{{ text.qty }}</span>
        </div>
        <div class="mp-price-bc">
          <span>{{ text.price }}</span>
        </div>
        <div class="mp-subtotal-bc">
          <span>{{ text.subtotal }}</span>
        </div>
      </div>
      {% for item in fulfillment.line_items %}
      <div class="mp-row odd" style="border-bottom: 1px solid #ddd;">
        <div class="mp-item-bc">
          <p class="product-name">{{ item.name }}</p>
          {% if item.sku %}
          <p class="sku">{{ text.sku }}: {{ item.sku }}</p>
          {% endif %}
          {% if item.variant_title %}
          <p class="sku">{{ text.variant }}: {{ item.variant_title }}</p>
          {% endif %}
          {% if item.sku and item.sku.size > 18 and configuration.barcode_enable %}
            <p class="sku">
              {{ item.sku | barcode }}
            </p>
          {% endif %}
        </div>
        <div class="mp-barcode-bc">
          {% if item.sku and item.sku.size <= 18 and configuration.barcode_enable %}
            <p>
              {{ item.sku | barcode }}
            </p>
          {% endif %}
        </div>
        <div class="mp-qty-bc">
          <span>{{ item.quantity }}</span>
        </div>
        <div class="mp-price-bc">
          <span class="price">{{ item.price | money: order.currency }}</span>
        </div>
        <div class="mp-subtotal-bc">
          <span class="price">{{ item.price | times: item.quantity | money: order.currency }}</span>
        </div>
      </div>
      <div class="clr"></div>
      {% endfor %}
      <div style="border-bottom: 1px solid #ddd;"></div>
    </div>
    {% unless order.note == blank %}
      <footer>
        <div class="address">
          <div class="shipping-address">
            <h3 class="mp-block-heading">{{ text.notes }}</h3>
            <p class="text-note">{{ order.note }}</p>
          </div>
        </div>
      </footer>
    {% endunless %}
    <div class="clr"></div>
      <br/>
      <div>
        <h3 class="center">{{ text.thank_notes }}</h3>
      </div>
  </div>
  <br><div style="page-break-after:always;"></div>
{% endfor %}