show item prices on packing slip - line_item.properties?

Solved
Highlighted
Excursionist
16 2 8

That's all I want to do, put the price of the item on the packing slip.  Shopify says it can't be done, which means it can't be done easily.  

 

I can imagine a line_item.properties value set equal to the price, but I don't know how to set the value.  I don't want a HTML input, it is something that should be set by the code.  In product-template.liquid, I suppose.  But I can't find a way to create a property to carry the value of the price out to the packing slip.  

 

Is there a way to do that, with a modicum of coding?  

 

TIA

Ed K

0 Likes
Highlighted
Shopify Partner
242 59 103

This is an accepted solution.

Hey @edk,

 

There is a way to put the price of the item on the packing slip.

 

I was able to place the price right below the product description (placing the price anywhere else requires re-styling the template):

Screen Shot 2019-07-08 at 11.13.33 PM.png

To implement this in your store, you will need to edit your packing slip template.

 

Replace the entire contents of your packing slip template with this code:

 

<div class="wrapper">
  <div class="header">
    <div class="shop-title">
      <p class="to-uppercase">
        {{ shop.name }}
      </p>
    </div>
    <div class="order-title">
      <p class="text-align-right">
        Order {{ order.name }}
      </p>
      <p class="text-align-right">
        {{ order.created_at | date: "%B %e, %Y" }}
      </p>
    </div>
  </div>
  <div class="customer-addresses">
    <div class="shipping-address">
      <p class="subtitle-bold to-uppercase">
        Ship to
      </p>
      <p class="address-detail">
        {% if shipping_address != blank %}
          {{ shipping_address.name }}
          {% if shipping_address.company != blank %}
            <br>
            {{ shipping_address.company }}
          {% endif %}
          <br>
          {{ shipping_address.address1 }}
          {% if shipping_address.address2 != blank %}
            <br>
            {{ shipping_address.address2 }}
          {% endif %}
          {% if shipping_address.city_province_zip != blank %}
            <br>
            {{ shipping_address.city_province_zip }}
          {% endif %}
          <br>
          {{ shipping_address.country }}
        {% else %}
          No shipping address
        {% endif %}
      </p>
    </div>
    <div class="billing-address">
      <p class="subtitle-bold to-uppercase">
        Bill to
      </p>
      <p class="address-detail">
        {% if billing_address != blank %}
          {{ billing_address.name }}
          {% if billing_address.company != blank %}
            <br>
            {{ billing_address.company }}
          {% endif %}
          <br>
          {{ billing_address.address1 }}
          {%  if billing_address.address2 != blank %}
            <br>
            {{ billing_address.address2 }}
          {% endif %}
          {% if billing_address.city_province_zip != blank %}
            <br>
            {{ billing_address.city_province_zip }}
          {% endif %}
          <br>
          {{ billing_address.country }}
        {% else %}
          No billing address
        {% endif %}
      </p>
    </div>
  </div>
  <hr>
  <div class="order-container">
    <div class="order-container-header">
      <div class="order-container-header-left-content">
        <p class="subtitle-bold to-uppercase">
          Items
        </p>
      </div>
      <div class="order-container-header-right-content">
        <p class="subtitle-bold to-uppercase">
          Quantity
        </p>
      </div>
    </div>

    {% comment %}
    To adjust the size of line item images, change desired_image_size.
    The other variables make sure your images print at high quality.
    {% endcomment %}
    {% assign desired_image_size = 58 %}
    {% assign resolution_adjusted_size = desired_image_size | times: 300 | divided_by: 72 | ceil %}
    {% capture effective_image_dimensions %}
      {{ resolution_adjusted_size }}x{{ resolution_adjusted_size }}
    {% endcapture %}

    {% assign index = 0 %}

    {% for line_item in line_items_in_shipment %}
      <div class="flex-line-item">
        <div class="flex-line-item-img">
          {% if line_item.image != blank %}
            <div class="aspect-ratio aspect-ratio-square" style="width: {{ desired_image_size }}px; height: {{ desired_image_size }}px;">
              {{ line_item.image | img_url: effective_image_dimensions | img_tag: '', 'aspect-ratio__content' }}
            </div>
          {% endif %}
        </div>
        <div class="flex-line-item-description">
          <p>
            <span class="line-item-description-line">
              {{ line_item.title }}
            </span>
            {% if line_item.variant_title != blank %}
              <span class="line-item-description-line">
                {{ line_item.variant_title }}
              </span>
            {% endif %}
            {% if line_item.sku != blank %}
              <span class="line-item-description-line">
                {{ line_item.sku }}
              </span>
            {% endif %}
            <span class="line-item-description-line">
              {% assign final_price = nil %}
              {% for item in order.line_items %}
                {% if item.sku == line_item.sku %}
                  {% assign final_price = item.final_price %}
                {% endif %}
              {% endfor %}
              {% if final_price %}
                {{ final_price | money }}
              {% endif %}
            </span>
          </p>
        </div>
        <div class="flex-line-item-quantity">
          <p class="text-align-right">
            {{ line_item.shipping_quantity }} of {{ line_item.quantity }}
          </p>
        </div>
      </div>
      {% assign index = index | plus: 1 %}
    {% endfor %}
  </div>
  {% unless includes_all_line_items_in_order %}
    <hr class="subdued-separator">
    <p class="missing-line-items-text ">
      There are other items from your order not included in this shipment.
    </p>
  {% endunless %}
  <hr>
  {% if order.note != blank %}
    <div class="notes">
      <p class="subtitle-bold to-uppercase">
        Notes
      </p>
      <p class="notes-details">
        {{ order.line_items }}
      </p>
    </div>
  {% endif %}
  <div class="footer">
    <p>
      Thank you for shopping with us!
    </p>
    <p>
      <strong>
        {{ shop.name }}
      </strong>
      <br>
      {{ shop_address.address1 }}, {{ shop_address.city }}, {{ shop_address.province_code }}, {{ shop_address.zip }}, {{ shop_address.country }}
      <br>
      {{ shop.email }}
      <br>
      {{ shop.domain }}
    </p>
  </div>
</div>
<style type="text/css">
  body {
    font-size: 15px;
  }

  * {
    box-sizing: border-box;
  }

  .wrapper {
    width: 831px;
    margin: auto;
    padding: 4em;
    font-family: "Noto Sans", sans-serif;
    font-weight: 250;
  }

  .header {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: top;
  }

  .header p {
    margin: 0;
  }

  .shop-title {
    -webkit-box-flex: 6;
    -webkit-flex: 6;
    flex: 6;
    font-size: 1.9em;
  }

  .order-title {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
    flex: 4;
  }

  .customer-addresses {
    width: 100%;
    display: inline-block;
    margin: 2em 0;
  }

  .address-detail {
    margin: 0.7em 0 0;
    line-height: 1.5;
  }

  .subtitle-bold {
    font-weight: bold;
    margin: 0;
    font-size: 0.85em;
  }

  .to-uppercase {
    text-transform: uppercase;
  }

  .text-align-right {
    text-align: right;
  }

  .shipping-address {
    float: left;
    min-width: 18em;
    max-width: 50%;
  }

  .billing-address {
    padding-left: 20em;
    min-width: 18em;
  }

  .order-container {
    padding: 0 0.7em;
  }

  .order-container-header {
    display: inline-block;
    width: 100%;
    margin-top: 1.4em;
  }

  .order-container-header-left-content {
    float: left;
  }

  .order-container-header-right-content {
    float: right;
  }

  .flex-line-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1.4em 0;
    page-break-inside: avoid;
  }

  .flex-line-item-img {
    margin-right: 1.4em;
    min-width: {{ desired_image_size }}px;
  }

  .flex-line-item-description {
    -webkit-box-flex: 7;
    -webkit-flex: 7;
    flex: 7;
  }

  .line-item-description-line {
    display: block;
  }

  .flex-line-item-description p {
    margin: 0;
    line-height: 1.5;
  }

  .flex-line-item-quantity {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
  }

  .subdued-separator {
    height: 0.07em;
    border: none;
    color: lightgray;
    background-color: lightgray;
    margin: 0;
  }

  .missing-line-items-text {
    margin: 1.4em 0;
    padding: 0 0.7em;
  }

  .notes {
    margin-top: 2em;
  }

  .notes p {
    margin-bottom: 0;
  }

  .notes .notes-details {
    margin-top: 0.7em;
  }

  .footer {
    margin-top: 2em;
    text-align: center;
    line-height: 1.5;
  }

  .footer p {
    margin: 0;
    margin-bottom: 1.4em;
  }

  hr {
    height: 0.14em;
    border: none;
    color: black;
    background-color: black;
    margin: 0;
  }

  .aspect-ratio {
    position: relative;
    display: block;
    background: #fafbfc;
    padding: 0;
  }

  .aspect-ratio::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(195,207,216,0.3);
  }

  .aspect-ratio--square {
    width: 100%;
    padding-bottom: 100%;
  }

  .aspect-ratio__content {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>

 

Let me know how it goes or if you need further help!

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

2 Likes
Highlighted
Excursionist
16 2 8

Capture.PNG

 

 

 

Astonishingly easy, but formatting needs work.  I did not copy exactly but found the part of the loop where the price is extracted:

              {% assign final_price = nil %}
              {% for item in order.line_items %}
                {% if item.sku == line_item.sku %}
                  {% assign final_price = item.final_price %}
                {% endif %}
              {% endfor %}
              {% if final_price %}
                {{ final_price | money }}
              {% endif %}

and pasted it, after backing up the original.  A little formatting and this will be done.  

 

I am betting that this method of pasting the code will work?

 

I take it back, I said that Shopify meant it could not be done easily.  Wrong!  

 

Thanks Brian!!!

0 Likes
Highlighted
Shopify Partner
242 59 103

Yes, you may paste that code to get the price, so long as it is inside the main "for" loop of the template:

 

{% for line_item in line_items_in_shipment %}

...Keep price code snippet inside here...

{% endfor %}

 

I take it back, I said that Shopify meant it could not be done easily. Wrong!

I'm so glad the code worked for you! Send me a DM if you need help with formatting.

 

Will you please click Accept as Solution on my answer? Thank you.

 

 

 

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

0 Likes
Highlighted
Tourist
16 0 1

@edk Personal print has got a drag and drop editor that lets you build whatever invoice you want, or any other thing to be printed with your invoice. 

It also lets you add some "smart" text to personalize your invoices for each customer. Plus they can then be downloaded directly from the Shopify orders' list page. We're using it to send some automated personalized thank you notes to our customers for about a year, and zero complaint so far.

0 Likes
Highlighted
New Member
2 0 0

Hello EDk, 

 

How did you format the price to appear on the far right i have used  <p class="text-align-right"> but the price appears mid right. 

0 Likes
Highlighted
Excursionist
16 2 8

I don't remember how I did that.  I went with a simpler format with the price below the SKU.  

 

Now that I think about it, I remember trying to align it and couldn't get it to work, so I gave up.  The simpler format looked better, anyway.  

 

I tried a few things just now.  Trying to put the price on the same line as the SKU:

{{ line_item.sku }} <div align="right">  {{ final_price | money }}  </div> 

It right-justified, but adds a linefeed between the SKU and price. Why I don't know.   

 

Sorry I can't be more help.   

 

Ed

0 Likes
Highlighted
Tourist
10 0 0

Thank you for this - very helpful! Worked great.

0 Likes
Highlighted
New Member
1 0 0

This is great, worked perfectly! however my notes are now printing on packing slip as ######. Any ideas?

0 Likes
Highlighted
New Member
2 0 1

Brian -- how would I do the same thing but instead of price, put the product SKU in that position? I've tried to play around with it, but can't figure it out.

0 Likes