Tailwind CSS Product Modals Blocks

All Blocks
Ecommerce
Product Modals

Product Modals

Product modals for lookbook overlays, quick product previews, variant pickers, and size guide dialogs.

Two-column lookbook modal combines a hero-image carousel with a scrollable list of linked outfit items and inline shop buttons.

<div id="hs-pro-shvilm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shvilm-label">
  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md lg:max-w-4xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
    <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
      
      <div class="absolute -top-2.5 -inset-e-2.5 z-10">
        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shvilm">
          <span class="sr-only">Close</span>
          <svg class="shrink-0 size-4" 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>

<div class="min-h-96 grid grid-cols-1 lg:grid-cols-2">
        
        <div class="relative">
          
          <div data-hs-carousel='{
              "loadingClasses": "opacity-0",
              "updateDelay": 400
            }' class="relative h-full">
            <div class="hs-carousel relative overflow-hidden w-full min-h-72 lg:min-h-96 h-full">
              <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap">
                <div class="hs-carousel-slide">
                  <div class="h-72 lg:h-full relative">
                    <img class="shrink-0 absolute inset-0 size-full object-cover object-center rounded-t-xl lg:rounded-tr-none lg:rounded-s-xl" src="https://images.unsplash.com/photo-1708443683198-a2b77a54c36e?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </div>
                </div>
                <div class="hs-carousel-slide">
                  <div class="h-72 lg:h-full relative">
                    <img class="shrink-0 absolute inset-0 size-full object-cover object-center rounded-t-xl lg:rounded-tr-none lg:rounded-s-xl" src="https://images.unsplash.com/photo-1708443683334-1e41c52f33ac?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </div>
                </div>
                <div class="hs-carousel-slide">
                  <div class="h-72 lg:h-full relative">
                    <img class="shrink-0 absolute inset-0 size-full object-cover object-center rounded-t-xl lg:rounded-tr-none lg:rounded-s-xl" src="https://images.unsplash.com/photo-1708443683202-a5be0ced5b8b?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </div>
                </div>
              </div>
            </div>
            
            
            <div class="p-2 absolute bottom-0 inset-x-0">
              <div class="p-0.5 inline-flex justify-center items-center gap-2 bg-layer rounded-full">
                <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 disabled:pointer-events-none inline-flex justify-center items-center size-7 text-surface-foreground rounded-full hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus">
                  <span class="text-2xl" aria-hidden="true">
                    <svg class="shrink-0 size-4" 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="m15 18-6-6 6-6"/></svg>
                  </span>
                  <span class="sr-only">Previous</span>
                </button>

<div class="grow flex flex-col">
                    <p class="text-sm text-foreground">
                      Soft Visor Cap
                    </p>

<div class="grow flex flex-col">
                    <p class="text-sm text-foreground">
                      Everyday Solid Black T-Shirt
                    </p>
                    <span class="mt-1.5">
                      <span class="text-sm text-muted-foreground-1">
                        <s>$60</s>
                      </span>
                      <span class="text-sm text-red-500">
                        $40
                      </span>
                    </span>

<div class="grow flex flex-col">
                    <p class="text-sm text-foreground">
                      Regular-fit Pleated Trousers
                    </p>

Quick product view modal combines responsive product media, color swatches, size selectors, a quantity picker, and add-to-cart actions.

<div id="hs-pro-shchpdm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shchpdm-label">
  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-md lg:max-w-4xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
    <div class="relative w-full max-h-full flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
      
      <div class="absolute top-2 inset-e-2.5 z-10">
        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shchpdm">
          <span class="sr-only">Close</span>
          <svg class="shrink-0 size-4" 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>

<div class="grid grid-cols-1 lg:grid-cols-2">
        
        <div class="hidden lg:block relative">
          <img class="shrink-0 absolute inset-0 size-full object-cover object-center rounded-t-xl lg:rounded-tr-none lg:rounded-s-xl" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
        </div>
        
        
        
        <div class="py-4 sm:py-6 md:py-8">
          <div class="flex flex-col justify-between gap-5 lg:gap-0">
            <div class="px-4 sm:px-6 lg:px-8 flex items-center gap-x-3">
              <div class="lg:hidden shrink-0 size-20">
                <img class="shrink-0 size-full object-cover object-center rounded-xl" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=980&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
              </div>
              <div class="grow">
                <p class="text-sm text-muted-foreground-1">
                  Men's shoes
                </p>
                <h2 id="hs-pro-shchpdm-label" class="font-medium text-lg text-foreground">
                  Nike Alphafly 3 Electric
                </h2>
              </div>

<div class="lg:my-4 pb-1 px-4 sm:px-6 lg:px-8 space-y-7 h-72 lg:h-64 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
              <div>
                <p class="mb-2 font-medium text-sm text-foreground">
                  Colors
                </p>

<div class="flex flex-wrap gap-2.5">
                  
                  <label for="hs-pro-shprmich1" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich1" class="hidden" value="@@title" name="hs-pro-shprmich" checked>
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>

<label for="hs-pro-shprmich2" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich2" class="hidden" value="@@title" name="hs-pro-shprmich" >
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1704949834515-e9d11a0ceb9a?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>
                  
                  
                  
                  <label for="hs-pro-shprmich3" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich3" class="hidden" value="@@title" name="hs-pro-shprmich" >
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1699198489130-2e02f3726612?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>
                  
                  
                  
                  <label for="hs-pro-shprmich4" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich4" class="hidden" value="@@title" name="hs-pro-shprmich" >
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1695686331766-16a2c3c2c382?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>
                  
                  
                  
                  <label for="hs-pro-shprmich5" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich5" class="hidden" value="@@title" name="hs-pro-shprmich" >
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1695748966450-3abe5c25b481?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>
                  
                  
                  
                  <label for="hs-pro-shprmich6" class="size-8 sm:size-10 rounded-full flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                    <input type="radio" id="hs-pro-shprmich6" class="hidden" value="@@title" name="hs-pro-shprmich" >
                    <img class="shrink-0 size-8 sm:size-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1700853012811-ce0a42d2b6d3?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                  </label>
                  
                </div>
                
              </div>

<div>
                <p class="mb-2 font-medium text-sm text-foreground">
                  Select size
                </p>

<div class="grid grid-cols-3 gap-3">
                  
                  <label for="hs-pro-shchms-us-6and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-6and5" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      6.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-7" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-7" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      7
                    </span>
                  </label>

<label for="hs-pro-shchms-us-7and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-7and5" class="hidden" name="hs-pro-shchms" disabled>
                    <span class="block">
                      7.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-8" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-8" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      8
                    </span>
                  </label>

<label for="hs-pro-shchms-us-8and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-8and5" class="hidden" name="hs-pro-shchms" disabled>
                    <span class="block">
                      8.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-9" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-9" class="hidden" name="hs-pro-shchms" disabled>
                    <span class="block">
                      9
                    </span>
                  </label>

<label for="hs-pro-shchms-us-9and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-9and5" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      9.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-10" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-10" class="hidden" name="hs-pro-shchms" disabled>
                    <span class="block">
                      10
                    </span>
                  </label>

<label for="hs-pro-shchms-us-10and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-10and5" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      10.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-11" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-11" class="hidden" name="hs-pro-shchms" disabled>
                    <span class="block">
                      11
                    </span>
                  </label>

<label for="hs-pro-shchms-us-11and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-11and5" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      11.5
                    </span>
                  </label>

<label for="hs-pro-shchms-us-12" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                  has-checked:text-primary-checked
                  has-checked:border-primary-checked
                  has-checked:ring-1
                  has-checked:ring-primary-checked
                  has-disabled:pointer-events-none
                  has-disabled:opacity-70
                  has-disabled:text-line-2
                  has-disabled:after:absolute
                  has-disabled:after:inset-0
                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                    <input type="radio" id="hs-pro-shchms-us-12" class="hidden" name="hs-pro-shchms" >
                    <span class="block">
                      12
                    </span>
                  </label>
                  
                </div>

<p class="mt-2 inline-flex items-center gap-x-1 text-sm text-orange-500">
                  <svg class="shrink-0 size-3.5" 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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                  Low in stock
                </p>
              </div>
            </div>

<button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                  Add to cart
                </button>
                
                <button type="button" class="py-3 px-4 relative inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-muted-focus">
                  <span class="sr-only">Favorite</span>
                  <svg class="shrink-0 size-4" 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"/></svg>
                </button>
              </div>
              
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
  </div>
</div>

Open related storefront home template

Product detail modal pairs a hero image with color swatches, size selectors, stock messaging, and a full-width update action.

<div>
                <p class="mb-2 font-medium text-sm text-foreground">
                  Select size
                </p>

<div class="px-4 sm:px-6 lg:px-8">
              <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                Update
              </button>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
  </div>
</div>

Open related storefront cart template

Large size guide modal combines measurement-unit toggles, multiple fit tables, and explanatory copy inside a scrollable panel.

<div id="hs-pro-shpdsgm" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto [--close-when-click-inside:true] pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shpdsgm-label">
  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
    <div class="pb-4 w-full max-h-full relative overflow-hidden flex flex-col bg-overlay border border-overlay-line rounded-xl pointer-events-auto shadow-xl">
      
      <div class="py-4 px-6 md:px-8 flex justify-between items-center border-b border-overlay-divider">
        <h2 id="hs-pro-shpdsgm-label" class="font-medium text-foreground">
          Size guide
        </h2>
        <button type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-surface text-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" aria-label="Close" data-hs-overlay="#hs-pro-shpdsgm">
          <span class="sr-only">Close</span>
          <svg class="shrink-0 size-4" 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>

<div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
        <div class="p-6 md:p-8 min-h-96">
          
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
            
            <div class="relative">
              <div class="absolute top-2 ps-3 text-xs pointer-events-auto">
                <span class="text-xs text-muted-foreground-1">
                  Line
                </span>
              </div>

<select data-hs-select='{
                  "placeholder": "Select option...",
                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative pt-6 pb-1.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                  "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                  "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                  "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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=\"m6 9 6 6 6-6\"/></svg></div>"
                }' class="hidden">
                <option value="">Choose</option>
                <option selected>Men</option>
                <option>Women</option>
                <option>Teenage boys</option>
                <option>Teenage girls</option>
                <option>Boys</option>
                <option>Girls</option>
                <option>Baby boys</option>
                <option>Baby girls</option>
                <option>Newborns</option>
              </select>
            </div>

<div class="relative">
              <div class="absolute top-2 ps-3 text-xs pointer-events-auto">
                <span class="text-xs text-muted-foreground-1">
                  Garments and accessories
                </span>
              </div>

<select data-hs-select='{
                  "placeholder": "Select option...",
                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative pt-6 pb-1.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                  "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                  "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                  "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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=\"m6 9 6 6 6-6\"/></svg></div>"
                }' class="hidden">
                <option value="">Choose</option>
                <option selected>T-shirts</option>
                <option>Coats</option>
                <option>Jackets</option>
                <option>Cardigans and sweaters</option>
                <option>Trousers</option>
                <option>Shirts</option>
                <option>Jeans</option>
                <option>Sweatshirts</option>
                <option>Underwear and pyjamas</option>
                <option>Blazers</option>
                <option>Swimwear</option>
                <option>Shoes</option>
                <option>Hats and gloves</option>
                <option>Belts and braces</option>
              </select>
            </div>

<div class="relative">
              <div class="absolute top-2 ps-3 text-xs pointer-events-auto">
                <span class="text-xs text-muted-foreground-1">
                  Region
                </span>
              </div>

<select data-hs-select='{
                  "placeholder": "Select option...",
                  "toggleTag": "<button type=\"button\" aria-expanded=\"false\"></button>",
                  "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative pt-6 pb-1.5 ps-3 pe-9 flex gap-x-2 text-nowrap w-full cursor-pointer border border-layer-line text-layer-foreground rounded-lg text-start text-sm focus:outline-hidden focus:border-primary-focus focus:ring-1 focus:ring-primary-focus",
                  "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 overflow-hidden overflow-y-auto bg-select border border-select-line rounded-xl shadow-xl [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb",
                  "optionClasses": "hs-selected:bg-select-item-active py-2 px-4 w-full text-sm text-select-item-foreground cursor-pointer hover:bg-select-item-hover rounded-lg focus:outline-hidden focus:bg-select-item-focus",
                  "optionTemplate": "<div class=\"flex justify-between items-center w-full\"><span data-title></span><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-3.5 text-foreground\" xmlns=\"http:.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\"><polyline points=\"20 6 9 17 4 12\"/></svg></span></div>",
                  "extraMarkup": "<div class=\"absolute top-1/2 inset-e-3 cursor-pointer -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-foreground\" 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=\"m6 9 6 6 6-6\"/></svg></div>"
                }' class="hidden">
                <option value="">Choose</option>
                <option selected>US</option>
                <option>UK</option>
                <option>EU</option>
                <option>DE</option>
                <option>FR</option>
                <option>IT</option>
              </select>
            </div>
            
          </div>

<label for="hs-pro-shsgm-cm" class="group inline-flex items-center gap-x-1.5 cursor-pointer text-sm text-foreground">
              <input type="radio" name="hs-pro-shsgm" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-pro-shsgm-cm">
              cm
            </label>
            
          </div>

<tbody class="divide-y divide-table-line">
                    <tr>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs font-medium text-foreground">
                          Chest
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          28.1 - 31.5
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          31.5 - 35
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          35 - 37.5
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          37.5 - 41
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          41 - 44
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          44 - 48.5
                        </span>
                      </td>
                    </tr>

<tr>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs font-medium text-foreground">
                          Waist
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          22.5 - 25.5
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          25.5 - 29
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          29 - 32
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          32 - 35
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          35 - 38
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          38 - 43
                        </span>
                      </td>
                    </tr>

<tr>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs font-medium text-foreground">
                          Height
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          < 5'7"
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          5'7" - 6'0"
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          5'7" - 6'0"
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          5'7" - 6'0"
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          5'7" - 6'0"
                        </span>
                      </td>
                      <td class="size-px whitespace-nowrap px-4 py-3 odd:bg-layer even:bg-surface">
                        <span class="text-xs text-muted-foreground-2">
                          5'7" - 6'0"
                        </span>
                      </td>
                    </tr>
                  </tbody>
                </table>
                
              </div>
            </div>

<div>
              <h3 class="text-sm font-medium text-foreground">
                Fit tips
              </h3>

<p class="mt-3 text-sm text-muted-foreground-1">
                Tops Sizes (6’ – 6’5”/183-196cm): 1.75”/4.5cm longer in length than regular tops. Sleeve length is adjusted proportionately depending on silhouette. sizes are only available for select styles.
              </p>

<p class="mt-3 text-sm text-muted-foreground-1">
                If you’re on the borderline between two sizes, order the smaller size for a tighter fit or the larger size for a looser fit. If your measurements for chest and waist correspond to two different suggested sizes, order the size indicated by your chest measurement.
              </p>
            </div>

<div>
              <h3 class="text-sm font-medium text-foreground">
                How to measure
              </h3>

<ul class="mt-3 ps-1 space-y-1">
                <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                  <span class="font-medium text-foreground">Chest:</span> Measure under the arms at the fullest point of the bust
                </li>
                <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                  <span class="font-medium text-foreground">Waist:</span> Measure around your natural waist, the narrowest point
                </li>
                <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                  <span class="font-medium text-foreground">Hips:</span> Measure around the fullest part of your hips while standing
                </li>
                <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                  <span class="font-medium text-foreground">Inseam:</span> Measure from the top of your inner thigh to the bottom of your ankle bone while standing
                </li>
              </ul>
              
            </div>

<div>
              <h3 class="mb-3 text-sm font-medium text-foreground">
                International size equivalents
              </h3>

<div class="border border-layer-line rounded-lg overflow-x-auto [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                <div class="min-w-full inline-block align-middle">
                  
                  <table class="min-w-full divide-y divide-table-line">
                    <thead>
                      <tr>
                        <th scope="col" class="odd:bg-layer even:bg-surface">
                          <div class="px-4 py-3 text-start flex items-center gap-x-1 text-xs font-medium text-foreground">
                            US
                          </div>
                        </th>

Product Modals

Shop-the-Look Modal with Carousel and Product List Pro

Quick Product View Modal with Cart Actions Pro

Product Detail Modal with Variant Selectors Pro

Size Guide Modal with Measurement Tables Pro