Desktop design

Lightbox design

Mobile design

E-commerce product page

ce="next"><link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/webpack-652a5bfa5e838f88.js"><scrip

s="16x16"><meta name="next-size-adjust"><scrip

href="/"><img alt="logo" loading="lazy" width="137.5" height="20" decoding="async" data-nimg="1" style="color:transparent" src="/images/logo.svg"></a><n

d:hidden"><img alt="close icon" loading="lazy" width="13.44" height="13.44" decoding="async" data-nimg="1" style="color:transparent" src="/images/icon-close.svg"></butt

nav></div><div aria-label="user avatar and cart link" class="flex items-center gap-11"><div c

r gap-11"><div class="relative" aria-label="cart button"><div c

elative "><div aria-label="product image slider" class="relative w-full h-[calc(100vw)] md:w-[445px] md:h-[445px]"><img a

></button><div aria-label="thumbnail images" class="hidden md:flex md:items-center md:justify-between md:gap-8 md:mt-[455px]"><img a

-[455px]"><img aria-active="true" alt="thumbnail image" loading="lazy" width="88" height="88" decoding="async" data-nimg="1" class="rounded-[10px] hover:opacity-50 cursor-pointer transition-all duration-300 opacity-50 border-2 border-[#FF7E1B]" style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fimage-product-1-thumbnail.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimages%2Fimage-product-1-thumbnail.jpg&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fimage-product-1-thumbnail.jpg&amp;w=256&amp;q=75"><img a

amp;q=75"><img aria-active="false" alt="thumbnail image" loading="lazy" width="88" height="88" decoding="async" data-nimg="1" class="rounded-[10px] hover:opacity-50 cursor-pointer transition-all duration-300 " style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fimage-product-2-thumbnail.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimages%2Fimage-product-2-thumbnail.jpg&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fimage-product-2-thumbnail.jpg&amp;w=256&amp;q=75"><img a

amp;q=75"><img aria-active="false" alt="thumbnail image" loading="lazy" width="88" height="88" decoding="async" data-nimg="1" class="rounded-[10px] hover:opacity-50 cursor-pointer transition-all duration-300 " style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fimage-product-3-thumbnail.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimages%2Fimage-product-3-thumbnail.jpg&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fimage-product-3-thumbnail.jpg&amp;w=256&amp;q=75"><img a

amp;q=75"><img aria-active="false" alt="thumbnail image" loading="lazy" width="88" height="88" decoding="async" data-nimg="1" class="rounded-[10px] hover:opacity-50 cursor-pointer transition-all duration-300 " style="color:transparent" srcset="/_next/image?url=%2Fimages%2Fimage-product-4-thumbnail.jpg&amp;w=96&amp;q=75 1x, /_next/image?url=%2Fimages%2Fimage-product-4-thumbnail.jpg&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2Fimages%2Fimage-product-4-thumbnail.jpg&amp;w=256&amp;q=75"></div>

offer.</p><div aria-label="price and discount" class="flex items-start justify-between md:justify-start gap-6 mt-6"><div c

</p></div><div aria-label="quantity and add to cart" class="flex flex-col md:flex-row items-center gap-4 mt-8"><div c

div></div><div class=" hidden w-[360px] bg-white rounded-lg absolute top-3 right-3 md:-top-2 md:right-2 shadow-[0_4px_4px_0_rgba(0,0,0,0.3)]" aria-modal="false" aria-labelledby="cartTitle"><heade

Design comparison

Please log in to post a comment

Community feedback

e-commerce Product Page

Design comparison

Please log in to post a comment

Community feedback

Join our Discord community