- March 24, 2018
- Posted by: ankit
- Category: Line-Item, Liquid
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 use wordpress for your website you can check the best wordpress hosting here
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
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.