Tailwind E-commerce Component Library

<a href="/products/brushed-cotton-crew" class="group block rounded-2xl border border-gray-200 bg-white overflow-hidden hover:shadow-md transition-shadow">
  <div class="aspect-square overflow-hidden bg-gray-50">
    <img
      src="/products/brushed-cotton-crew.jpg"
      alt="Brushed cotton crew neck shirt in oat"
      width="600"
      height="600"
      loading="lazy"
      class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.03] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
    />
  </div>
  <div class="p-3">
    <p class="text-[13px] font-semibold text-gray-900">Brushed Cotton Crew</p>
    <p class="text-[11px] text-gray-500 mt-0.5">4.7 (1,204) — 6 colors</p>
    <p class="text-[14px] font-bold text-gray-900 mt-1">$48</p>
  </div>
</a>

What this is

Seven copy-paste Tailwind 4.x components for the moments that move conversion on a store. No plugins, no @apply, each under 600 bytes of HTML. They work in Shopify Liquid, WooCommerce, Next.js, and plain HTML.

Most UI kits ship 60+ generic components you never wire up. This is the short list of surfaces that actually affect conversion, drawn from the conversion rate optimization guide.

What each component is for

Built for Core Web Vitals

• Every image has explicit width and height, so there is no layout shift.
• Animations use transform and opacity only, never layout properties.
• Motion drops to an 80 ms opacity fade under prefers-reduced-motion (WCAG 2.3.3).
• Six of the seven components ship zero runtime JS; the sticky add-to-cart adds one small IntersectionObserver block.

Pairing with Yokaify

The components work on their own, with or without chat. A few pair naturally with a Yokaify install:

• The sticky add-to-cart can signal intent for a behavioral intervention when a shopper hovers without clicking.
• The free-shipping progress bar pairs with cart abandonment recovery, so the message can name the exact distance to the threshold.

If you add Yokaify, the free tier covers the basic chat surface.

Platform notes

• Shopify (OS 2.0): drop snippets into a section file. The low-stock badge and thank-you card use the product and order Liquid objects. For the sticky bar, add data-atc-button to your Add-to-Cart button.
• WooCommerce: paste into a child-theme override and translate the Liquid expressions to PHP using the WooCommerce hooks reference.
• Next.js / headless: use a Server Component for static markup; wrap the sticky bar in a Client Component for the IntersectionObserver. The request.design_mode equivalent is next/script with strategy="afterInteractive".
• Webflow / Framer: paste into a custom-code embed; Tailwind classes need a build step or CDN, otherwise port them to inline styles.

What to do next

1. Pick the components you need from the picker above.
2. Paste each snippet into the right template file.
3. Run a Lighthouse mobile check on the page after install.
4. Toggle reduced motion and confirm animations drop to an opacity fade.
5. If you use the low-stock badge, match the inventory threshold to your fulfilment model.
6. If you use the trust row, swap in your real policies. Do not show a mark you have not earned.