Skip to content
STYLESCAPE

Cart

Examples for the ss-c-cart module: line items with a thumbnail, title and variant, a quantity field, the line total and a remove action. The row wraps on narrow screens. Pair it with ss-c-order-summary.

Line items

HTML 
<ul class="ss-c-cart" aria-label="Shopping cart">
            <li class="ss-c-cart__item">
                <img class="ss-c-cart__media" src="/img/placeholder/100x100.svg" alt="" width="72" height="72" />
                <div class="ss-c-cart__details">
                    <h3 class="ss-c-cart__title"><a href="#product-1">Canvas tote bag</a></h3>
                    <p class="ss-c-cart__meta">Natural · Large</p>
                </div>
                <input class="ss-c-input ss-c-cart__quantity" type="number" min="0" value="2" aria-label="Quantity, Canvas tote bag" />
                <p class="ss-c-cart__price">€ 25,00 <span class="ss-c-cart__unit">2 × € 12,50</span></p>
                <button class="ss-c-button ss-c-button--ghost ss-c-button--sm ss-c-cart__remove" type="button" aria-label="Remove Canvas tote bag">Remove</button>
            </li>
            <li class="ss-c-cart__item">
                <img class="ss-c-cart__media" src="/img/placeholder/100x100.svg" alt="" width="72" height="72" />
                <div class="ss-c-cart__details">
                    <h3 class="ss-c-cart__title"><a href="#product-2">Harbour map print</a></h3>
                    <p class="ss-c-cart__meta">A2 · Matte</p>
                </div>
                <input class="ss-c-input ss-c-cart__quantity" type="number" min="0" value="1" aria-label="Quantity, Harbour map print" />
                <p class="ss-c-cart__price ss-c-cart__price--discount">€ 32,00 <span class="ss-c-cart__unit">was € 40,00</span></p>
                <button class="ss-c-button ss-c-button--ghost ss-c-button--sm ss-c-cart__remove" type="button" aria-label="Remove Harbour map print">Remove</button>
            </li>
        </ul>

Empty

Your cart is empty. Continue shopping

HTML 
<div class="ss-c-cart">
            <p class="ss-c-cart__empty">Your cart is empty. <a href="#shop">Continue shopping</a></p>
        </div>