Summer Sale – Use code oxbow20 at checkout for a 20% discount.

product details

1
<div class="items-center mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
  <!-- Product Image Gallery -->
  <img
    src="/store/shoes/airmax/1.png"
    class="size-full aspect-[16/10] object-cover object-center rounded-2xl lg:col-span-2"
    alt="Product image"
  />
  <!-- Product Details -->
  <div class="flex flex-col gap-8">
    <div>
      <p class="text-4xl sm:text-4xl md:text-5xl lg:text-6xl">$190</p>
      <h1 class="text-xl md:text-2xl lg:text-3xl mt-12 font-medium">
        Nike Air Max
      </h1>
      <p class="text-base mt-1 text-zinc-500">Black</p>
      <p class="text-base mt-4 text-zinc-500 lg:text-balance">
        Hitting the field in the late '60s, adidas airmaxS quickly became
        soccer's "it" shoe.
      </p>
    </div>
    <!-- Action Buttons -->
    <div class="flex mt-8">
      <button
        class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-zinc-900 outline outline-zinc-900 hover:bg-zinc-950 focus:outline-zinc-950 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
      >
        Add to Cart
      </button>
    </div>
  </div>
</div>

Simple details with CTA

Details with image slider on a two column grid, color, size selector and accordion

Details with image slider on a two column grid, color, size selector and accordion

Details with image slider on a three column grid, color, size selector and info tabs with reviews

Details with image grid on a 2 column grid, color, size selector and info tabs with reviews

Details with image grid on a bento grid, color, size selector and info tabs with details on modal and with reviews

Details with image slider with arrow and step navigation, color, size selector and info tabs with reviews

Details with image column and sticky details section with color, size selector and info tabs with reviews