OrderCup Liquid Template Example

template.liquid.html

<link href='https://fonts.googleapis.com/css?family=Unna' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'>

<style type="text/css" media="print,screen">
  ul{ list-style: none; }
  ul.address{ float: left; width: 40%; }
  h1{ font-family: 'Squada One', cursive; }
  body{ font-family: 'Unna'; font-style: normal; }
  #page{
    padding: 0.5em 1em;
    margin: 0 auto;
    width: 8in;
    height: 11in;
    background: #FBFBFB;
    color: #333;
    border: 1px solid #333;
    text-align: center;
  }
  table{ width: 100%; border-collapse: collapse; }
  table tr th{
    background: #EAEAEA;
    color: #333;
    font-weight: bold;
    text-transform: upcase;
    text-align: left;
  }
  table tr td{ font-size: 12px; text-align: left; }
  .total{
    text-align: right;
    font-weight: bold;
    color: #7FA766;
  }
</style>

<div id='page'>
  <img src='{{ store.logo }}' />
  
  <h1>{{ store.business_name }}</h1>
  
  <p>Thank you for your business.</p>
  
  <ul class='address'>
    <li><h1>Billing Address</h1></li>
    <li>{{ order.ship_to_company }}</li>
    <li>ATTN: {{ order.bill_to_full_name }}</li>
    <li>{{ order.bill_to_address_line1 }}</li>
    <li>{{ order.bill_to_address_line2 }}</li>
    <li>{{ order.bill_to_address_city }}, {{ order.bill_to_address_state }}</li>
    <li>{{ order.bill_to_zip }} {{ order.bill_to_country }}</li>
    <li>{{ order.bill_to_phone_number1 }}</li>
  </ul>
  
  <ul class='address'>
    <li><h1>Shipping Address</h1></li>
    <li>{{ order.ship_to_company }}</li>
    <li>ATTN: {{ order.ship_to_full_name }}</li>
    <li>{{ order.ship_to_address_line1 }}</li>
    <li>{{ order.ship_to_address_line2 }}</li>
    <li>{{ order.ship_to_address_city }}, {{ order.ship_to_address_state }}</li>
    <li>{{ order.ship_to_zip }} {{ order.ship_to_country }}</li>
    <li>{{ order.ship_to_phone_number1 }}</li>
  </ul>
  
  <table>
    <tr>
      <th>Description</th>
      <th>sku</th>
      <th>quantity</th>
      <th>price</th>
    </tr>
    {% for item in package.items_by_ps_preferred_order do |item| %}
      <tr>
        <td>{{ item.variant_description }}</td>
        <td>{{ item.store_product_code }}</td>
        <td>{{ item.quantity }}</td>
        <td>{{store.currency_symbol }}{{ item.total_price | currency }}</td>
      </tr>
    {% endfor %}
    <tr>
      <td colspan='3' class='total'>Total</td>
      <td>{{store.currency_symbol }}{{ order.total | currency }}</td>
    </tr>
  </table>
  
</div>