> 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

**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).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://nestable-studio.gitbook.io/sonder/introduction.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.