Enabling Line Items Add-On in Product Kits

In this post I will explain in detail how to activate and use the Line Items Feature.

Line Items Add-On

As the name suggests, the Line Items Add-On, lets store owners add Child Product Information as “line-items-properties” to the order.  There are several use cases for this add-on

  1. If some one orders a bundle , you can display the Child SKU  (which make that bundle) on the invoice and in the notification email.
  2. Display the Child SKU list on the cart page. Pls take note the line items will be displayed provided the theme supports it.
  3. Create Packing Slips which contain child component information so that warehouse guys know which products to ship
  4. Pull the Child SKU information using external apps. Take note the external MUST support reading data from Line Item Properties

These are some of the possible use cases for Line Items.  It is also possible to customize how the Line Item Properties appear on cart page. You may do so via liquid Programming.

Refer to this Screenshot to check how the line item properties appear in the admin panel

Pls take note of following points to make optimal use of this add-on

  • This add-on will push the child product information as the line item properties. The child products will not appear as separate line item in the order.  Pls refer to this link on how the child products will appear as line item properties. As you can see , the child products appear as Line Item Properties and NOT as separate Line Items.
  • The Line Item Properties will only be added when the order is created via the front store. If the order is created from the admin, the line item properties will no be pushed.

These are some of the possible use cases for Line Items.  It is also possible to customize how the Line Item properties appear on cart page. You may do so via liquid Programming.

Pls find the instructions to activate the Line Items Add-on below.

1. Activate the Line Item Add-on

Go to the Line Items Menu and activate the Add-on.  Once you activate it, the App will ask you to re-approve the updated charge.

Pls take note that Line Items is a Paid Add-On

2. Select the Line Items Properties.

Now select the Line Items Properties which you would like to include. The App support the following properties

  • Product Variant Name
  • Product Variant Quantity
  • Product Variant SKU
  • Product Variant Price
  • Product Variant Weight
  • Product Variant Weight Unit
  • Product Barcode
  • Product Type
  • Product Vendor

Screenshot_2

3. Publish The Line Item Properties

Now Publish the Line Item properties. Take note that Line Items must be published every time you make change to the Line Item Properties.

Screenshot_3

4. Update the Product Detail Template 

Paste the following snippet in your product detail template so that liquid sends the associated line items to the order.  In other words this snippet needs to be placed in template which contains the “Add to Cart” form.
Here is the snippet.
<!--Spice Product Kits Child Product Lists Starts-->
<div id="spicegems_metafields_data_div" data-default_variant="{{product.selected_or_first_available_variant.id}}" style="display:none;visibility:hidden;">
{{ product.metafields['spice_product_kits'] | json }}
</div>
<!--Spice Product Kits Child Product Lists End-->
This needs to be pasted in your Single Product template
Find the form tag containing the code action=”/cart/add” and paste this code below. Make sure that code is pasted before the form close tag.

Line Item Appearance

1. Displaying Line Item Properties on Cart Page

A lot of themes support display of  Line Items Properties in cart page.  Line Items display can be modified via Liquid Programming and tweaking the CSS. Here is how line items may appear on cart page. Pls note it will vary based on your theme.

2. Line Items in Order Detail Page

Shopify displays the line items properties in the order detail page. Refer to the following screenshot.

Shopify Line Items Every Line