Tailwind CSS Cart & Order Line Items Blocks

All Blocks
Ecommerce
Cart & Order Line Items

Cart & Order Line Items

Cart and order line items for editable purchase rows, itemized bag tables, and static post-purchase summaries.

Editable Order Line Item Row Pro

Order line item row combines product media, inline color and size selectors, quantity controls, pricing, and remove or favorite actions.

<div id="hs-pro-shbi3" class="hs-removing:opacity-0 duration-300 relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                      <div class="relative shrink-0 w-24 sm:w-32">
                        <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                          <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer border border-transparent text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                            <span class="sr-only">Add to favorites</span>
                          </button>
                        </div>
                      </div>

<div class="grow">
                        
                        <div class="mb-3 sm:flex sm:gap-3">
                          <div class="grow">
                            <p class="text-foreground">
                              Mahabis Classic
                            </p>
        
                            <p class="mt-1 text-sm text-foreground">
                              $40
                            </p>
                          </div>
                        </div>

<div class="flex flex-wrap sm:grid grid-cols-3 gap-3">
                          <div>
                            <p class="mb-1.5 text-sm text-muted-foreground-1">
                              Color
                            </p>
                            <button type="button" class="py-1.5 px-2 min-w-10 inline-flex justify-center items-center gap-x-1.5 text-xs rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-shchpdm">
                              White
                            </button>
                          </div>

<div>
                            <p class="mb-1.5 text-sm text-muted-foreground-1">
                              Quantity
                            </p>
                            <select class="py-1.5 ps-2 pe-8 inline-block bg-layer border-layer-line rounded-lg text-xs text-layer-foreground cursor-pointer hover:bg-layer-hover focus:border-primary-focus focus:border-primary-focus focus:ring-primary-focus focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                              <option selected>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option>5</option>
                              <option>6</option>
                              <option>7</option>
                              <option>8</option>
                              <option>9</option>
                              <option>10</option>
                            </select>
                          </div>
                        </div>

<div class="mt-3">
                          <button type="button" class="inline-flex items-center gap-x-1.5 text-sm text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-remove-element="#hs-pro-shbi3">
                            Remove
                          </button>
                        </div>
                      </div>
                    </div>

Open related storefront cart template

Bag Table Row with Quantity Controls and Stock Status Pro

Bag row layout combines a product thumbnail, item metadata, inline edit and quantity controls, stock status, and per-item totals.

<div id="hs-pro-shbpi1" class="flex gap-5">
                      <div class="relative">
                        <img class="shrink-0 size-28 object-cover rounded-lg" src="https://images.unsplash.com/photo-1615486629862-10b0890e79b3?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="grow">
                        
                        <div class="grid grid-cols-12 gap-x-5 gap-y-3">
                          <div class="col-span-12 lg:col-span-5">
                            
                            <div class="flex flex-col">
                              <p class="font-medium text-foreground">
                                Guatemala Elephant Coffee
                              </p>

<ul class="mt-1.5 space-y-1">
                                <li class="text-sm text-muted-foreground-2">
                                  <span class="font-medium text-foreground">Code:</span> 350488
                                </li>
                                <li class="text-sm text-muted-foreground-2">
                                  <span class="font-medium text-foreground">Weight:</span> 125g / 4.4oz
                                </li>
                                <li class="text-sm text-muted-foreground-2">
                                  <span class="font-medium text-foreground">Grind:</span> Beans
                                </li>
                              </ul>

<div class="mt-3 flex flex-wrap gap-2">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm text-nowrap rounded-xl bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
                                  Edit details
                                </button>
                              </div>
                            </div>
                            
                          </div>
                          
      
                          <div class="col-span-12 sm:col-span-4 lg:col-span-3">
                            
                            <div class="flex items-center gap-3">
                              <p class="text-sm text-foreground">
                                Qty:
                              </p>

<button type="button" class="flex shrink-0 justify-center items-center size-6 text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" data-hs-remove-element="#hs-pro-shbpi1">
                                <span class="sr-only">Dismiss</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                              </button>
                            </div>

<p class="mt-1">
                              <span class="inline-flex items-center gap-x-1 text-sm text-green-600">
                                In stock
                              </span>
                            </p>
                          </div>
                          
      
                          <div class="col-span-12 sm:col-span-4 lg:col-span-2 sm:text-end">
                            <p class="text-foreground">
                              $5.50 each
                            </p>
                          </div>
                          
      
                          <div class="col-span-12 sm:col-span-4 lg:col-span-2 sm:text-end">
                            <p class="text-foreground">
                              $5.50
                            </p>
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

Open related coffee shop bag template

Static Order Summary Line Item Pro

Static order summary row presents fixed color, size, quantity, and price values without editable controls for post-purchase views.

<div  class=" relative flex flex-row gap-5 pb-6 mb-6 border-b border-line-2 last:pb-0 last:mb-0 last:border-b-0">
                      <div class="relative shrink-0 w-24 sm:w-32">
                        <img class="shrink-0 w-full h-40 object-cover rounded-xl" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                      </div>

<div class="grow">
                        
                        <div class="mb-3 sm:flex sm:gap-3">
                          <div class="grow">
                            <p class="text-foreground">
                              Embroidered Hoodie
                            </p>
        
                            <p class="mt-1 text-sm text-foreground">
                              $69
                            </p>
                          </div>
                        </div>

<div class="flex flex-wrap sm:grid grid-cols-3 gap-3">
                          <div>
                            <p class="mb-1.5 text-sm text-muted-foreground-1">
                              Color
                            </p>
                            <p class="text-sm text-foreground">
                              Brown/Red
                            </p>
                          </div>

<div>
                            <p class="mb-1.5 text-sm text-muted-foreground-1">
                              Quantity
                            </p>
                            <p class="text-sm text-foreground">
                              1
                            </p>
                          </div>
                        </div>

<div class="mt-5 flex flex-wrap items-center gap-2">
                          <button type="button" class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-xs sm:text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            Buy it again
                          </button>

<a class="py-1.5 px-2.5 relative inline-flex justify-center items-center gap-x-1.5 text-xs sm:text-[13px] rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="../../../templates/ecommerce/storefront/write-a-product-review.html">
                            Write a product review
                          </a>
                        </div>
                        
                      </div>
                    </div>