Zephyr Theme

Zephyr is a performance-first Shopify theme built on a Tailwind CSS pipeline. It pairs a lightweight, fast-loading storefront with a deeply configurable block-based architecture so merchants can compose pages without touching code.

Why Zephyr

• Performance by default — every image uses a responsive <picture> with precisely calculated srcset ladders; below-the-fold sections lazy-render; layout thrash is eliminated via post-paint measurement.
• Tailwind-driven styling — utilities and atomic classes are generated by Tailwind; component CSS stays lean.
• 32-shape vocabulary — a unified rounded-* shape system (squircle, arch, blob, petal, drop, diamond…) drives cards, buttons, media and avatars from a single --shape-radius variable.
• Block architecture — sections are composed of reusable blocks; the same block (e.g. product card, image, FAQ) is reused across home, collection, product and page templates.
• Refined interactions — slideshows use arrow navigation (no dots); filters, mega-menu and slide-grids are keyboard-accessible.

Documentation structure

• Getting started — install, customize, support.
• Theme settings — global colors, typography, cart, swatches and more.
• Sections — every section and its settings.
• Blocks — every reusable block.
• Templates — what each page template includes.
• Advanced guides — performance architecture.

💡 All configuration happens in Shopify Admin → Online Store → Themes → Customize.