Tailwind CSS Product Discovery Sections Blocks

All Blocks
Ecommerce
Product Discovery Sections

Product Discovery Sections

Product discovery sections for tabbed merchandising, complete-the-look carousels, and branded ecommerce product grids.

Tabbed Product Section with Draggable Carousel Pro

Centered merchandising section combines category tabs, a draggable product carousel, quick view triggers, and an inline link to the full collection.

<div class="py-14 lg:py-20 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div id="hs-listing-with-tab-and-slider" class="mb-10 max-w-xs mx-auto text-center">
                        <h2 class="mb-6 font-semibold text-xl md:text-2xl text-foreground">
                          Trending now
                        </h2>

<nav  class="p-0.5 w-full inline-flex border border-layer-line rounded-xl" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                          <button type="button" class="hs-tab-active:bg-surface w-full inline-flex justify-center items-center gap-x-2 text-foreground py-1.5 px-2 sm:py-2 sm:px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-shao-item-men" aria-selected="true" data-hs-tab="#hs-pro-tabs-shao-men" aria-controls="hs-pro-tabs-shao-men" role="tab" >
                            Men
                          </button>
                          <button type="button" class="hs-tab-active:bg-surface w-full inline-flex justify-center items-center gap-x-2 text-foreground py-1.5 px-2 sm:py-2 sm:px-3 text-sm rounded-lg disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shao-item-women" aria-selected="false" data-hs-tab="#hs-pro-tabs-shao-women" aria-controls="hs-pro-tabs-shao-women" role="tab" >
                            Women
                          </button>
                        </nav>
                        
                      </div>

<div id="hs-pro-tabs-shao-men" role="tabpanel" aria-labelledby="hs-pro-tabs-shao-item-men">
                        
                        <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "slidesQty": {
                            "xs": 2,
                            "sm": 3,
                            "lg": 4
                          },
                          "isDraggable": true
                        }' class="relative">
                          <div class="hs-carousel w-full overflow-hidden">
                            <div class="hs-carousel w-full">
                              <div class="hs-carousel-body flex flex-nowrap gap-3 md:gap-5 opacity-0 transition-transform duration-700 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing">
                                <div class="hs-carousel-slide">
                                  
                                  <div  class=" group relative">
                                    <div class="relative">
                                      <a class="block rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/product-detail.html">
                                        <img class="rounded-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">
                                      </a>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Slim Lyocell Trousers
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Trousers
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $50
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Camo Blend Jacket
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Jackets
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $140
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Cotton T-Shirt
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's T-Shirts
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $35
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Embroidered Hoodie
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Sweaters
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $69
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Everyday Solid White T-Shirt
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's T-Shirts
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $30
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (6)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>
                          </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                            <span class="text-2xl" aria-hidden="true">
                              <svg class="shrink-0 size-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"><path d="m15 18-6-6 6-6"/></svg>
                            </span>
                            <span class="sr-only">Previous</span>
                          </button>
                          <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-e-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                            <span class="sr-only">Next</span>
                            <span class="text-2xl" aria-hidden="true">
                              <svg class="shrink-0 size-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"><path d="m9 18 6-6-6-6"/></svg>
                            </span>
                          </button>
                          
                        </div>

<div class="mt-10 text-center">
                          <a class="inline-flex items-center gap-x-1.5 text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/listing-grid.html">
                            Shop all men
                            <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="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                        
                      </div>

<div id="hs-pro-tabs-shao-women" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shao-item-women">
                        
                        <div data-hs-carousel='{
                          "loadingClasses": "opacity-0",
                          "slidesQty": {
                            "xs": 2,
                            "sm": 3,
                            "lg": 4
                          },
                          "hasSnapSpacers": false,
                          "isDraggable": true
                        }' class="relative">
                          <div class="hs-carousel w-full overflow-hidden">
                            <div class="hs-carousel w-full">
                              <div class="hs-carousel-body flex flex-nowrap gap-3 md:gap-5 opacity-0 transition-transform duration-700 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing">
                                <div class="hs-carousel-slide">
                                  
                                  <div  class=" group relative">
                                    <div class="relative">
                                      <a class="block rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/product-detail.html">
                                        <img class="rounded-xl" src="https://images.unsplash.com/photo-1644483878395-858cd642538e?q=80&w=560&h=780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </a>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              -7%
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        White Shirt
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Women's Shirts
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $125
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Micro Houndstooth Suit Blazer
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Women's Blazers
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $35
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Micro Houndstooth Suit Blazer
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Women's Blazers
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $89
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Light Gray Midi Dress
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Women's Dresses
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $140
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                        <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                          <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"><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="sr-only">Add to favorites</span>
                                        </button>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                        <div class="flex flex-col gap-y-1">
                                          <p>
                                            <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                              🔥 Trending
                                            </span>
                                          </p>
                                        </div>
                                      </div>
                                      
    
                                      
                                      <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                        <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                          <div class="h-full flex flex-col justify-center items-center">
                                            <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shchpdm">
                                              <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="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                              Quick view
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                      
                                    </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Yoga Leggings
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Women's Leggings
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $89
                                      </p>
                                    </div>
                                  </div>
                                  
                                </div>
                              </div>
                            </div>
                          </div>

<div class="mt-10 lg:mt-14 text-center">
                          <a class="inline-flex items-center gap-x-1.5 text-foreground underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="../../../templates/ecommerce/storefront/listing-grid-with-categories.html">
                            Shop all women
                            <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="m9 18 6-6-6-6"/></svg>
                          </a>
                        </div>
                        
                      </div>
                      
                    </div>

Open related storefront home template

Complete the Look Carousel with Product Pins Pro

Snap-based complete-the-look carousel pairs full-bleed outfit imagery with interactive product pins that reveal item names, categories, and prices.

<div id="completeTheLook" class="py-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      
                      <div class="mb-3">
                        <h2 class="font-medium text-xl text-foreground">
                          Complete the look
                        </h2>
                      </div>

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "slidesQty": {
                          "xs": 2,
                          "md": 3
                        },
                        "isSnap": true,
                        "hasSnapSpacers": false
                      }' class="relative">
                        <div class="overflow-x-hidden">
                          <div class="-mx-1 sm:-mx-2.5">
                            <div class="hs-carousel w-full flex snap-x pb-2 snap-mandatory overflow-x-auto [&::-webkit-scrollbar-track]:mx-1 md:[&::-webkit-scrollbar-track]:mx-2.5 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                              <div class="hs-carousel-body flex flex-nowrap opacity-0 transition-transform duration-700">
                                <div class="hs-carousel-slide snap-center px-1 sm:px-2.5">
                                  
                                  <div class="min-h-96 relative group overflow-hidden">
                                    <img class="w-full min-h-96 object-cover rounded-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 class="top-[20%] inset-s-[50%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl1d1" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl1d1">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Lightweight Cotton Hooded
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Clothing
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $45
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="bottom-[35%] inset-s-[52%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl1d2" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl1d2">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Slim Lyocell Trousers
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Trousers
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $50
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="group-hover:translate-y-0 translate-y-full duration-300 absolute bottom-0 inset-x-0 p-1">
                                      <button type="button" class="py-2.5 px-3 w-full 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-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" data-hs-overlay="#hs-pro-shvilm">
                                        View details
                                      </button>
                                    </div>
                                  </div>
                                  
                                </div>

<div class="top-[30%] inset-s-[30%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl2d1" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl2d1">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Camo Blend Jacket
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Jackets
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $100
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="top-[17%] inset-s-[40%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl2d2" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl2d2">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Everyday Solid White T-Shirt
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's T-Shirts
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $49
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="bottom-[30%] inset-e-[20%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl2d3" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl2d3">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Tencel Cotton Trousers
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Trousers
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $49
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="top-[35%] inset-s-[40%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl3d1" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl3d1">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Cotton Printed T-Shirt
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's T-Shirts
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $35
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="bottom-[47%] inset-e-[40%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl3d2" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl3d2">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Regular-fit Pleated Trousers
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Trousers
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $99
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="top-[10%] inset-e-[45%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl3d3" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl3d3">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Soft Visor Cap
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Accessories
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $29
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<div class="bottom-[22%] inset-e-[33%] absolute">
                                      <div class="hs-dropdown [--auto-close:inside] [--trigger:hover] relative inline-flex">
                                        
                                        <button id="hs-pro-shpdcl3d4" type="button" class="group hover:scale-110 duration-200 focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                          <span class="relative flex">
                                            <span class="animate-ping absolute inline-flex size-full rounded-full bg-plain opacity-75"></span>
                                            <span class="relative inline-flex rounded-full size-4 bg-plain"></span>
                                            <span class="sr-only">Look Dot</span>
                                          </span>
                                        </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] duration-150 hs-dropdown-open:opacity-100 opacity-0 w-52 hidden z-10 bg-dropdown border border-dropdown-line rounded-xl shadow-lg before:absolute before:-top-2.5 before:inset-s-0 before:w-full before:h-3" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-shpdcl3d4">
                                          <div class="p-1 bg-layer rounded-xl">
                                            <a class="p-2.5 flex items-center gap-x-2 rounded-lg hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus" href="#">
                                              <div class="grow">
                                                <span class="block text-sm text-foreground">
                                                  Made in USA 990v6
                                                </span>
                                                <p class="mt-1 text-xs text-muted-foreground-1">
                                                  Men's Shoes
                                                </p>
                                                <p class="font-medium text-sm text-foreground">
                                                  $199
                                                </p>
                                              </div>
                                              <svg class="shrink-0 size-4 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="m9 18 6-6-6-6"/></svg>
                                            </a>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default md:hidden absolute top-1/2 inset-s-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-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"><path d="m15 18-6-6 6-6"/></svg>
                          </span>
                          <span class="sr-only">Previous</span>
                        </button>
                        <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default md:hidden absolute top-1/2 inset-e-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                          <span class="sr-only">Next</span>
                          <span class="text-2xl" aria-hidden="true">
                            <svg class="shrink-0 size-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"><path d="m9 18 6-6-6-6"/></svg>
                          </span>
                        </button>
                        
                      </div>
                      
                    </div>

Branded Product Grid Section with Detail Rows Free

Branded product section centers a short heading above a three-column card grid with stacked detail rows, buy buttons, and a view-all link.

<div class="max-w-340 px-4 sm:px-6 lg:px-8 py-12 lg:py-24 mx-auto">
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
                      
                      <div class="group flex flex-col">
                        <div class="relative">
                          <div class="aspect-4/4 overflow-hidden rounded-2xl">
                            <img class="size-full object-cover rounded-2xl" src="../../../assets/img/pro/coffee-shop/img1.png" alt="Product Image">
                          </div>
    
                          <div class="pt-4">
                            <p class="font-medium md:text-lg text-foreground">
                              Beija Flor
                            </p>
      
                            <p class="mt-2 font-semibold text-foreground">
                              $5.50
                            </p>
                          </div>

<a class="after:absolute after:inset-0 after:z-1" href="#"></a>
                        </div>
  
                        <div class="mb-2 mt-4 text-sm">
                          
                          <div class="flex flex-col">
                            
                            <div class="py-3 border-t border-line-2">
                              <div class="grid grid-cols-2 gap-2">
                                <div>
                                  <span class="font-medium text-foreground">Tasting Notes:</span>
                                </div>

<div class="text-end">
                                  <span class="text-foreground">Hazelnut, Grape, Milk Chocolate</span>
                                </div>
                              </div>
                            </div>

<div class="py-3 border-t border-line-2">
                              <div class="grid grid-cols-2 gap-2">
                                <div>
                                  <span class="font-medium text-foreground">Origin:</span>
                                </div>

<div class="flex justify-end">
                                  <span class="text-foreground">Brazil</span>
                                </div>
                              </div>
                            </div>

<div class="py-3 border-t border-line-2">
                              <div class="grid grid-cols-2 gap-2">
                                <div>
                                  <span class="font-medium text-foreground">Region:</span>
                                </div>

<div class="text-end">
                                  <span class="text-foreground">San Paulo</span>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
  
                        <div class="mt-auto">
                          <a class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium text-nowrap rounded-xl bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus transition disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Buy now
                          </a>
                        </div>
                      </div>

<div class="group flex flex-col">
                        <div class="relative">
                          <div class="aspect-4/4 overflow-hidden rounded-2xl">
                            <img class="size-full object-cover rounded-2xl" src="../../../assets/img/pro/coffee-shop/img2.png" alt="Product Image">
                          </div>
    
                          <div class="pt-4">
                            <p class="font-medium md:text-lg text-foreground">
                              El Mirador
                            </p>
      
                            <p class="mt-2 font-semibold text-foreground">
                              $7.50
                            </p>
                          </div>

<div class="text-end">
                                  <span class="text-foreground">Red Apple, Caramel, Aimond</span>
                                </div>
                              </div>
                            </div>

<div class="flex justify-end">
                                  <span class="text-foreground">Colombia</span>
                                </div>
                              </div>
                            </div>

<div class="text-end">
                                  <span class="text-foreground">Manizales</span>
                                </div>
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
  
                        <div class="mt-auto">
                          <a class="py-2 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium text-nowrap rounded-xl bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus transition disabled:opacity-50 disabled:pointer-events-none" href="#">
                            Buy now
                          </a>
                        </div>
                      </div>
                      
    
                      
                      <div class="group flex flex-col">
                        <div class="relative">
                          <div class="aspect-4/4 overflow-hidden rounded-2xl">
                            <img class="size-full object-cover rounded-2xl" src="../../../assets/img/pro/coffee-shop/img5.png" alt="Product Image">
                          </div>
    
                          <div class="pt-4">
                            <p class="font-medium md:text-lg text-foreground">
                              Pedra Branca
                            </p>
      
                            <p class="mt-2 font-semibold text-foreground">
                              $2.10
                            </p>
                          </div>

<div class="text-end">
                                  <span class="text-foreground">Red Apple, Walnut, Milk Chocolate</span>
                                </div>
                              </div>
                            </div>

<div class="group flex flex-col">
                        <div class="relative">
                          <div class="aspect-4/4 overflow-hidden rounded-2xl">
                            <img class="size-full object-cover rounded-2xl" src="../../../assets/img/pro/coffee-shop/img1.png" alt="Product Image">
                          </div>
    
                          <div class="pt-4">
                            <p class="font-medium md:text-lg text-foreground">
                              Beiia Flor
                            </p>
      
                            <p class="mt-2 font-semibold text-foreground">
                              $12.50
                            </p>
                          </div>

<div class="group flex flex-col">
                        <div class="relative">
                          <div class="aspect-4/4 overflow-hidden rounded-2xl">
                            <img class="size-full object-cover rounded-2xl" src="../../../assets/img/pro/coffee-shop/img3.png" alt="Product Image">
                          </div>
    
                          <div class="pt-4">
                            <p class="font-medium md:text-lg text-foreground">
                              Beija Flor
                            </p>
      
                            <p class="mt-2 font-semibold text-foreground">
                              $7.50
                            </p>
                          </div>

<div class="text-end">
                                  <span class="text-foreground">Apricot, Cashew, Praline</span>
                                </div>
                              </div>
                            </div>