How to hide Line Item Properties at the checkout in Shopify

In this tutorial I will be exploring how one can hide the Line Item properties at the Cart and the Checkout page. I am assuming that you are already familiar with Line Items and understand how to install them in your theme. If you are new to it, I recommend that you first check out this tutorial.

IN case you want to create a website, here is a list of affordable website builders.

For this tutorial I will be using the Brooklyn Theme,  Version 6.0.  Brooklyn is a free Shopify theme and is officially supported by Shopify.  You can get it from here.

I have disabled the drawer cart and using the full page cart for this tutorial.

Lets get started.

Creating the Line Item Properties

First step is to generate the line item properties HTML . I will be using 2 text fields as line item properties.  If you are comfortable with HTML you may write the markup yourself.

Alternatively you may also use the Shopify Line Item UI Element Generator. It is a visual tool which allows you to generate Line Item Properties HTML using a simple interface.  If you are using the generator, just make sure to Make sure to un-check “Show at Checkout” Box.

Here is the HTML

As you can see, I have prefixed the property with an underscore.  Line item properties that have a name starting with an underscore won’t be displayed on the checkout page.

Lets see this in action.

Installing Line Item Properties

Got to the sections folder and find product-template.liquid file. Edit this file and paste the above line item markup just above the closing form tag.  This is how the Line Item Properties appear on the product page.

Checking the Results

Since the property name is prefixed with an underscore, they will not appear on the cart and the checkout page. Check out the screenshots of the Cart Page and the Checkout Page

The underscore only affects the display of the line item property. They are still being pushed to Shopify and will appear in the order detail page. Here is a screenshot of the order detail page

Alternatively, removing the underscore prefix will ensure that the Line Item Properties display on the Cart as well as checkout page.

Get more tutorials here.

Check our the best web hosting which offer monthly payment. Here is the link

Author: ankit
Co-Founder at SpieGems

1 Comment

Leave a Reply