Adding Line Item Properties to Order Confirmation

califluffco · ‎07-05-2024

Hi! I've been searching and I can't find anything that works. I use line item properties for certain products–since Shopify has their limit on variant options.

I was able to add these additional items to the packing slip template, but for the life of me I can't find a way to add it to the order confirmation code. Anything I do says error. Any help would be appreciated, I attached an example of how the packing slip looks–for reference thread color and saying are line item properties for examples. The properties show on the order status page, but not the order confirmation email.

Below is the current order confirmation code

{% if fulfillment.item_count == item_count %} 
  {% capture email_title %}Your dog fluff is coming your way!{% endcapture %}
  {% capture email_body %}Your order is on its way to you. View your tracking information below. Please be aware that if your order was shipped via USPS, due to staffing shortages, the Postal Service has not been consistently scanning packages or updating tracking information. Your order has shipped, but there may be a temporary lapse in tracking information and your status may show "USPS Awaiting Item." Unless we notify you otherwise, your order has indeed been picked up by USPS. Have questions about shipping, returns and exchanges? Check out our FAQs <a href="https://califluffco.com/pages/faqs">here</a>.{% endcapture %} 
{% elsif fulfillment.item_count > 1 %} 
  {% if fulfillment_status == 'fulfilled' %}
    {% capture email_title %}The last items in your order are on the way{% endcapture %}
    {% capture email_body %}The last items in your order are on the way. Track your shipment to see the delivery status.{% endcapture %}
  {% else %}
    {% capture email_title %}Some items in your order are on the way{% endcapture %}
    {% capture email_body %}Some items in your order are on the way. Track your shipment to see the delivery status.{% endcapture %}
  {% endif %}
{% else %} 
  {% if fulfillment_status == 'fulfilled' %}
    {% capture email_title %}The last item in your order is on the way{% endcapture %}
    {% capture email_body %}The last item in your order is on the way. Track your shipment to see the delivery status.{% endcapture %}
  {% else %}
    {% capture email_title %}One item in your order is on the way{% endcapture %}
    {% capture email_body %}One item in your order is on the way. Track your shipment to see the delivery status.{% endcapture %}
  {% endif %}
{% endif %}

{% capture email_emphasis %}Estimated delivery date: <strong>{{fulfillment.estimated_delivery_at | date: "%B %-d, %Y"}}</strong>{% endcapture %}

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>{{ email_title }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
  <style>
    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
  </style>
</head>

  <body>

    <table class="body">
      <tr>
        <td>
          <table class="header row">
  <tr>
    <td class="header__cell">
      <center>

        <table class="container">
          <tr>
            <td>

              <table class="row">
                <tr>
                  <td class="shop-name__cell">
                    {%- if shop.email_logo_url %}
                      <img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
                    {%- else %}
                      <h1 class="shop-name__text">
                        <a href="{{shop.url}}">{{ shop.name }}</a>
                      </h1>
                    {%- endif %}
                  </td>

                    <td class="order-number__cell">
                      <span class="order-number__text">
                        Order {{ order_name }}
                      </span>
                    </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>

      </center>
    </td>
  </tr>
</table>

          <table class="row content">
  <tr>
    <td class="content__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
            <h2>{{ email_title }}</h2>
            <p>{{ email_body }}</p>
            {% if fulfillment.estimated_delivery_at %}
              <p>{{ email_emphasis }}</p>
            {% endif %}
            {% if order_status_url %}
              <table class="row actions">
  <tr>
    <td class="empty-line"> </td>
  </tr>
  <tr>
    <td class="actions__cell">
      <table class="button main-action-cell">
        <tr>
          <td class="button__cell"><a href="{{ order_status_url }}" class="button__text">View your order</a></td>
        </tr>
      </table>
      {% if shop.url %}
    <table class="link secondary-action-cell">
      <tr>
        <td class="link__cell">or <a href="{{ shop.url }}">Visit our store</a></td>
      </tr>
    </table>
{% endif %}

    </td>
  </tr>
</table>

            {% else %}
              {% if shop.url %}
    <table class="row actions">
      <tr>
        <td class="actions__cell">
          <table class="button main-action-cell">
            <tr>
              <td class="button__cell"><a href="{{ shop.url }}" class="button__text">Visit our store</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
{% endif %}

            {% endif %}
            {% if fulfillment.tracking_numbers.size > 0 %}
  <p class="disclaimer__subtext">
    <br/>
    {% if fulfillment.tracking_numbers.size == 1 and fulfillment.tracking_company and fulfillment.tracking_url %}
      {{ fulfillment.tracking_company }} tracking number: <a href="{{ fulfillment.tracking_url }}">{{ fulfillment.tracking_numbers.first }}</a>
    {% elsif fulfillment.tracking_numbers.size == 1 %}
      Tracking number: {{ fulfillment.tracking_numbers.first }}
    {% else %}
      Tracking numbers:<br />
      {% for tracking_number in fulfillment.tracking_numbers %}
        {{ tracking_number }}<br />
      {% endfor %}
    {% endif %}
  </p>
{% endif %}


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row section">
  <tr>
    <td class="section__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              <h3>Items in this shipment</h3>
            </td>
          </tr>
        </table>
        <table class="container">
          <tr>
            <td>
              
            
<table class="row">
  {% for line in fulfillment.fulfillment_line_items %}
  <tr class="order-list__item">
    <td class="order-list__item__cell">
      <table>
        <td>
          {% if line.line_item.image %}
            <img src="{{ line.line_item | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
        </td>
        <td class="order-list__product-description-cell">
          {% if line.line_item.product.title %}	
            {% assign line_title = line.line_item.product.title %}	
          {% else %}	
            {% assign line_title = line.line_item.title %}	
          {% endif %}

          {% if line.quantity < line.line_item.quantity %}
            {% capture line_display %} {{ line.quantity }} of {{ line.line_item.quantity }} {% endcapture %}
          {% else %}
            {% assign line_display = line.line_item.quantity  %}
          {% endif %}

          <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

          {% if line.line_item.variant.title != 'Default Title' %}
            <span class="order-list__item-variant">{{ line.line_item.variant.title }}</span><br/>
          {% endif %}

          {% if line.line_item.selling_plan_allocation %}
            <span class="order-list__item-variant">{{ line.line_item.selling_plan_allocation.selling_plan.name }}</span><br/>
          {% endif %}

          {% if line.line_item.refunded_quantity > 0 %}
            <span class="order-list__item-refunded">Refunded</span>
          {% endif %}

          {% if line.line_item.discount_allocations %}
            {% for discount_allocation in line.line_item.discount_allocations %}
              {% if discount_allocation.discount_application.target_selection != 'all' %}
                <span class="order-list__item-discount-allocation">
                  <img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
                  <span>
                    {{ discount_allocation.discount_application.title | upcase }}
                    (-{{ discount_allocation.amount | money }})
                  </span>
                </span>
              {% endif %}
            {% endfor %}
          {% endif %}
        </td>
      </table>
    </td>
  </tr>{% endfor %}
</table>


            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

          <table class="row footer">
  <tr>
    <td class="footer__cell">
      <center>
        <table class="container">
          <tr>
            <td>
              
              <p class="disclaimer__subtext">If you have any questions, reply to this email or contact us at <a href="mailto:{{ shop.email }}">{{ shop.email }}</a></p>
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
</table>

<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />

        </td>
      </tr>
    </table>
  </body>
</html>

chintannyalwani · ‎07-05-2024

@califluffco yes, if you want to show all the line items you can add below code:

{% for p in line.properties %}
{% assign tc = p.first | rstrip %}
<label>{{ p.first }} : {{ p.last }} </label> <br/>
{% endfor %}

If my assistance was helpful to you, please consider liking and marking it as a solution to facilitate easy access for others.

Thank you

Need help in Theme customization? Chat on WhatsApp.

Store Customization | Feature Enhancement | Shopify Development Service

View solution in original post

chintannyalwani · ‎07-05-2024

Hi @califluffco

To show the line item in order confirmation email add the code below this line

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

Need help in Theme customization? Chat on WhatsApp.

Store Customization | Feature Enhancement | Shopify Development Service

chintannyalwani · ‎07-05-2024

Hi @califluffco

To show the line item in order confirmation email add the code below this line

 <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

Code to be added :

{% for p in line.properties %}
{% assign tc = p.first | rstrip %}
{%- if tc == "Thread Color" -%} <label>{{ p.first }} : {{ p.last }} </label> {% endif %}
{% endfor %}

If i managed to help you, dont forget to Like and mark it as a Solution

Thank you

Need help in Theme customization? Chat on WhatsApp.

Store Customization | Feature Enhancement | Shopify Development Service

califluffco · ‎07-05-2024

Thanks! I'm hoping for something more generic that will pull any potential line item property if the product has one. Is there something for that or do I need to do this for every possible line item option?

chintannyalwani · ‎07-05-2024

@califluffco yes, if you want to show all the line items you can add below code:

{% for p in line.properties %}
{% assign tc = p.first | rstrip %}
<label>{{ p.first }} : {{ p.last }} </label> <br/>
{% endfor %}

If my assistance was helpful to you, please consider liking and marking it as a solution to facilitate easy access for others.

Thank you

Need help in Theme customization? Chat on WhatsApp.

Store Customization | Feature Enhancement | Shopify Development Service

califluffco · ‎07-06-2024

That worked, thank you so much!!

Adding Line Item Properties to Order Confirmation