> For the complete documentation index, see [llms.txt](https://nestable-studio.gitbook.io/sonder/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nestable-studio.gitbook.io/sonder/introduction.md).

# Introduction

<figure><img src="https://246241625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYT94IJrzxy0iNQfrDNCp%2Fuploads%2FcY5R8pf1qJhXqA7qzGga%2FChatGPT%20%E5%9B%BE%E5%83%8F%202026%E5%B9%B49%E6%9C%8830%E6%97%A5%2015_30_36.png?alt=media&amp;token=7cba2d66-9435-44b9-b76c-c1b0154c9c67" alt=""><figcaption></figcaption></figure>

**Sonder** is a high-performance, modern e-commerce Shopify theme built for contemporary brand storefronts. Designed with flexibility, speed, and user experience in mind, the theme fits multiple industries including fashion, beauty, home goods, accessories, and niche boutique stores.Built fully compatible with Shopify Online Store 2.0, Sonder delivers a lightweight, clean, and highly customizable store experience without requiring advanced coding skills. It integrates exclusive marketing tools, flexible design systems, and developer-friendly structures to help merchants build conversion-focused storefronts.

**Core Theme Features**

* **Smart Product Recommendation System**: Supports AI automatic recommendation and manual curated modes. Merchants can display recommendation sections in single-column or double-column layouts, with built-in quick-add functionality to boost conversion rates.
* **Global Configurable Mini Product Cards**: Unified product card design system with multiple image styles (square, rounded, circle). Supports four mainstream aspect ratios: 1:1, 3:4, 2:3, and 4:3. Global one-click configuration ensures consistent brand visuals across the entire store.
* **Built-in Marketing Tools**: Equipped with promotion countdown timers, activity progress bars, and multi-type product badges (sale, new arrival, pre-order, limited edition) to support diverse marketing campaigns.
* **Premium User Experience**: Features ripple button animation, smooth page loading and transition effects, complete A11y accessibility support, and fully responsive layout for all devices.
* **Flexible Design System**: Includes 9 pre-built color presets with unlimited custom color options. Developed with Tailwind CSS and modular CSS architecture for outstanding performance and easy customization.
* **Developer Friendly Structure**: Clean and standardized code following Shopify best practices, with complete code comments and documentation. Adopts component-based snippets, CSS variable dynamic configuration, full locale multi-language support, and strict code quality rules (ESLint, Stylelint, Prettier, Git Husky workflow).