Cart Line Item

About this module

A Shopify cart line-item row with product thumb, name, unit price, a quantity stepper and remove action.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-cart-line-item, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-cart-line-item` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <div class="mh-li">
     <div class="mh-li-media">
       <a href="{{ item.url }}">
         <img src="{{ item.image | image_url: width: 160 }}" alt="{{ item.title | escape }}" width="80" height="80" loading="lazy" />
       </a>
     </div>
     <div class="mh-li-body">
       <div class="mh-li-row">
         <a href="{{ item.url }}" class="mh-li-title">{{ item.product.title }}</a>
         <span class="mh-li-line">{{ item.title }}</span>
       </div>
       <div class="mh-li-row">
         <form action="/cart/change" method="post" class="mh-li-qty">
           <input type="hidden" name="id" value="{{ item.key }}" />
           <input type="number" name="quantity" value="{{ item.quantity }}" min="0" class="mh-li-num" />
         </form>
         <div class="mh-li-prices">
           <span class="mh-li-price">{{ item.final_price | money }}</span>
           {% if section.settings.show_unit_price and item.original_price > item.final_price %}
             <s class="mh-li-compare">{{ item.original_price | money }}</s>
           {% endif %}
         </div>
       </div>
       {% if section.settings.show_remove %}
         <a href="{{ item.url_to_remove }}" class="mh-li-remove">{{ section.settings.remove_label }}</a>
       {% endif %}
     </div>
   </div>
   
   {% schema %}
   {
     "name": "MH Cart Line Item",
     "tag": "div",
     "settings": [
       { "type": "checkbox", "id": "show_unit_price", "label": "Show unit price", "default": true },
       { "type": "checkbox", "id": "show_remove", "label": "Show remove", "default": true },
       { "type": "text", "id": "remove_label", "label": "Remove label", "default": "Remove" }
     ],
     "presets": [{ "name": "MH Cart Line Item", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.