Slide-out cart drawer
A panel that slides in from the right with products, quantities that update the total and a free shipping bar.
Settings
Code
<div class="uv-ocd"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 4.5h2l2.2 10.5h10.6l2.2-8H7"/><circle cx="9.5" cy="19" r="1.3"/><circle cx="17" cy="19" r="1.3"/></svg><b class="ct">3</b></button><div class="scr"></div><aside class="dr" role="dialog" aria-modal="true" aria-labelledby="uv-ocd-t"><header><b id="uv-ocd-t">Your cart</b><button type="button" class="x" aria-label="Close"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><div class="fs"><span class="ms"></span><i><b></b></i></div><ul><li data-p="89"><span class="im" style="--c:#f97316"></span><span class="tx"><b>Trail shoes</b><small>89 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Less">−</button><output>1</output><button type="button" class="pl" aria-label="Más">+</button></span></li><li data-p="12"><span class="im" style="--c:#3b82f6"></span><span class="tx"><b>Running socks</b><small>12 €</small></span><span class="qt"><button type="button" class="mn" aria-label="Less">−</button><output>2</output><button type="button" class="pl" aria-label="Más">+</button></span></li></ul><footer><p><span>Subtotal</span><b class="sb">113,00 €</b></p><button type="button" class="go">Checkout</button></footer></aside></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
A side cart keeps people on the product page while they review their order. This drawer slides in from the right with a progress bar toward free shipping, each item with a thumbnail, price and quantity stepper, and a subtotal that recalculates instantly. Once the threshold is passed, the bar turns into a small celebration message.
Quantities bump when they change, prices follow the page language for decimals, and the badge on the cart button updates too. The drawer is a modal dialog that closes with the X, Escape or the backdrop, and the checkout button uses the main color.