E-Commerce Overlays
Browse E-Commerce Overlays UI blocks including quick views, cart previews, and product modals—designed to enhance shopping and user interaction flows.
<!-- Cart Offcanvas -->
<div id="hs-pro-shco" class="hs-overlay hs-overlay-open:translate-x-0 hidden nnchn fixed zxmp1 aoum9 nf9l7 ixagr pve7h kquz2 wxttw c61v5 flex flex-col zxv30 dark:bg-neutral-800" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shco-label">
<!-- Header -->
<div class="mi46d yxcbn flex saet7 items-center xu4xz yxawv dark:border-neutral-700">
<h3 id="hs-pro-shco-label" class="hw6xt ejo46 dark:text-neutral-200">
Cart (3 items)
</h3>
<button type="button" class="f9d5d u4s9n inline-flex enhxb items-center r2jif mr9qs k9mkq yxawv on128 ejo46 lk55v focus:outline-hidden rjc3l disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:focus:bg-neutral-700" aria-label="Close" data-hs-overlay="#hs-pro-shco">
<span class="hidden lg:block">Esc</span>
<span class="block lg:hidden">Close</span>
<svg class="n2l26 szmrd" 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>
<!-- End Header -->
<!-- Body -->
<div class="ux1hp overflow-y-auto overflow-hidden hm2m0 uqiuh b3ail ykfhs dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<!-- Alert -->
<div class="iifk8 yxcbn relative overflow-hidden bkhb8 xi4m4 dvpzk f0ygg qain7 dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800" role="alert" tabindex="-1" aria-labelledby="hs-pro-shfshal-label">
<h4 id="hs-pro-shfshal-label" class="hw6xt ejo46 dark:text-neutral-200">
Free shipping on orders over $50
</h4>
<p class="kd00o on128 z0e83 dark:text-white/50">
<a class="hw6xt on128 ejo46 b5782 dvb9h nvtwc focus:outline-hidden bbv3q dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" href="../../pro/shop/login.html">Log In</a> or <a class="hw6xt on128 ejo46 b5782 dvb9h nvtwc focus:outline-hidden bbv3q dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" href="../../pro/shop/create-account.html">Register</a>
</p>
</div>
<!-- End Alert -->
<div class="lc3yq space-y-7">
<!-- Item -->
<div id="hs-pro-shcopci1" class="hs-removing:opacity-0 ixagr flex pc3xl">
<div class="relative">
<img class="n2l26 q9zci ccjjy nbsdr gxtht wavyl dark:bg-neutral-700" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute zxmp1 aoum9 te8l0 wg6pj svb23">
<button type="button" class="s1u6m flex enhxb items-center r2jif mr9qs on128 zxv30 k9mkq je4jy ejo46 wtpak disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fwe1v">
<svg class="n2l26 br82p" 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="r8a99">Add to favorites</span>
</button>
</div>
</div>
<div class="dgznh flex flex-col">
<h4 class="tuuss ejo46 dark:text-neutral-200">
Nike Air Force 1
</h4>
<ul class="p9cw0 space-y-1">
<li class="on128 z0e83 dark:text-neutral-500">
Color: White
</li>
<li class="on128 z0e83 dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="p9cw0 on128 z0e83 dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="p9cw0 tuuss ejo46 dark:text-neutral-200">
$149
</span>
<div class="">
<button type="button" class="inline-flex items-center lwq0m d5esf ejo46 b5782 dvb9h nvtwc focus:outline-hidden bbv3q dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci1">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div id="hs-pro-shcopci2" class="hs-removing:opacity-0 ixagr flex pc3xl">
<div class="relative">
<img class="n2l26 q9zci ccjjy nbsdr gxtht wavyl dark:bg-neutral-700" src="https://images.unsplash.com/photo-1708443683334-1e41c52f33ac?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute zxmp1 aoum9 te8l0 wg6pj svb23">
<button type="button" class="s1u6m flex enhxb items-center r2jif mr9qs on128 zxv30 k9mkq je4jy ejo46 wtpak disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fwe1v">
<svg class="n2l26 br82p" 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="r8a99">Add to favorites</span>
</button>
</div>
</div>
<div class="dgznh flex flex-col">
<h4 class="tuuss ejo46 dark:text-neutral-200">
Camo Blend Jacket
</h4>
<ul class="p9cw0 space-y-1">
<li class="on128 z0e83 dark:text-neutral-500">
Color: Camo
</li>
<li class="on128 z0e83 dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="p9cw0 on128 z0e83 dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="p9cw0">
<span class="tuuss z0e83 dark:text-neutral-500">
<s>$60</s>
</span>
<span class="tuuss uze9c">
$40
</span>
</span>
<div class="">
<button type="button" class="inline-flex items-center lwq0m d5esf ejo46 b5782 dvb9h nvtwc focus:outline-hidden bbv3q dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci2">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div id="hs-pro-shcopci3" class="hs-removing:opacity-0 ixagr flex pc3xl">
<div class="relative">
<img class="n2l26 q9zci ccjjy nbsdr gxtht wavyl dark:bg-neutral-700" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute zxmp1 aoum9 te8l0 wg6pj svb23">
<button type="button" class="s1u6m flex enhxb items-center r2jif mr9qs on128 zxv30 k9mkq je4jy ejo46 wtpak disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden fwe1v">
<svg class="n2l26 br82p" 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="r8a99">Add to favorites</span>
</button>
</div>
</div>
<div class="dgznh flex flex-col">
<h4 class="tuuss ejo46 dark:text-neutral-200">
Mahabis Classic
</h4>
<ul class="p9cw0 space-y-1">
<li class="on128 z0e83 dark:text-neutral-500">
Color: White
</li>
<li class="on128 z0e83 dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="p9cw0 on128 z0e83 dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="p9cw0 tuuss ejo46 dark:text-neutral-200">
$40
</span>
<div class="">
<button type="button" class="inline-flex items-center lwq0m d5esf ejo46 b5782 dvb9h nvtwc focus:outline-hidden bbv3q dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci3">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="iifk8 cv3u8 yxcbn jhbd9 yxawv dark:border-neutral-700">
<!-- List -->
<div class="dmv3j khfgm theuu v6f2r">
<div>
<p class="hysdx ejo46 dark:text-neutral-200">
Subtotal
</p>
</div>
<div class="yo4p5">
<span class="hysdx ejo46 dark:text-neutral-200">$229</span>
</div>
</div>
<!-- End List -->
<p class="mbvb4 hg5w2 d5esf z0e83 dark:text-neutral-500">
Shipping, taxes and discounts are calculated at checkout.
</p>
<div class="flex items-center u3ov7">
<a class="mi46d gjk1t relative xp67g inline-flex enhxb items-center lwq0m tuuss hw6xt wavyl k9mkq yxawv zxv30 ejo46 ntfdl wsl5v disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden u7q2f dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-300" href="../../pro/shop/cart.html">
View cart (3)
</a>
<a class="mi46d gjk1t xp67g inline-flex enhxb items-center u3ov7 tuuss hw6xt wavyl k9mkq je4jy inpav w3h0o vr6t4 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden jxarz" href="../../pro/shop/checkout.html">
Checkout
</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Cart Offcanvas -->