> ## Documentation Index
> Fetch the complete documentation index at: https://quickbutik.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Build beautiful, dynamic storefronts with Quickbutik's powerful templating system

Welcome to Quickbutik's theme development documentation! This guide will teach you everything you need to know about building custom storefronts using our powerful Mustache-based templating system.

<Info>
  **What you'll learn:**

  * How to work with Quickbutik's theme engine
  * Mustache templating language fundamentals
  * Available objects and data structures
  * Best practices for theme development
</Info>

## What is Quickbutik Theme Development?

Quickbutik uses **Mustache**, an open-source logic-less templating language, to create dynamic ecommerce storefronts. With our templating system, you can customize every aspect of the shopping experience.

## Key Concepts

Before diving in, let's understand the core concepts you'll work with:

<CardGroup cols={2}>
  <Card title="Objects" icon="box">
    **Data containers** that hold information like products, orders, or store settings. Example: `{{product.title}}`
  </Card>

  <Card title="Attributes" icon="list">
    **Properties** of objects that contain specific data. Example: `{{product.price}}`, `{{customer.email}}`
  </Card>

  <Card title="Conditionals" icon="code-branch">
    **If-statements** that show content based on conditions. Example: `{{#product.soldOut}}Out of stock{{/product.soldOut}}`
  </Card>

  <Card title="Wrappers" icon="brackets-curly">
    **Helper functions** that process and transform data. Example: `{{#img}}{{product.image}}_400x400{{/img}}`
  </Card>
</CardGroup>

## Template Structure

All Quickbutik themes follow a structured approach where dynamic content is embedded using double curly braces:

```mustache theme={null}
{{object.attribute}}
```

### Basic Examples

<CodeGroup>
  ```mustache Product Title theme={null}
  <!-- Display a product's title -->
  <h1>{{product.title}}</h1>

  <!-- Output: <h1>Amazing T-Shirt</h1> -->
  ```

  ```mustache Price with Currency theme={null}
  <!-- Display price with currency -->
  <span class="price">{{product.price}} {{product.currency}}</span>

  <!-- Output: <span class="price">299 SEK</span> -->
  ```

  ```mustache Conditional Content theme={null}
  <!-- Show different content based on stock status -->
  {{#product.soldOut}}
    <div class="alert alert-warning">Out of stock</div>
  {{/product.soldOut}}
  {{^product.soldOut}}
    <button class="btn btn-primary">Add to Cart</button>
  {{/product.soldOut}}
  ```
</CodeGroup>

## Where to Edit Your Theme

You can access and modify your theme code through the Quickbutik Control Panel:

<Steps>
  <Step title="Access theme editor">
    Navigate to **Appearance → Theme → Under the Hood** in your control panel
  </Step>

  <Step title="Browse template files">
    Explore the different template files like `product.mustache`, `list.mustache`, `cartsuccess.mustache`
  </Step>

  <Step title="Edit and preview">
    Make changes to the code and use the preview function to see your changes
  </Step>

  <Step title="Save and publish">
    Save your changes and publish them to your live store
  </Step>
</Steps>

## Common Use Cases

Here are some popular things you can accomplish with theme development:

<AccordionGroup>
  <Accordion title="Custom Product Displays">
    Create unique product layouts, image galleries, and variant selectors tailored to your brand.

    ```mustache theme={null}
    {{#product.images}}
      <img src="{{#img}}{{image}}_800x600{{/img}}" alt="{{alttext}}" />
    {{/product.images}}
    ```
  </Accordion>

  <Accordion title="Dynamic Navigation">
    Build responsive menus that adapt based on your store's categories and pages.

    ```mustache theme={null}
    <nav>
      {{#linklist.main}}
        <a href="{{url}}" {{#current}}class="active"{{/current}}>{{name}}</a>
      {{/linklist.main}}
    </nav>
    ```
  </Accordion>

  <Accordion title="Shopping Cart Integration">
    Display cart contents, quantities, and totals anywhere in your theme.

    ```mustache theme={null}
    {{^basket.isEmpty}}
      <div class="cart-summary">
        {{basket.items_count}} items - {{basket.total_amount}}
        <a href="{{paylink}}">Checkout</a>
      </div>
    {{/basket.isEmpty}}
    ```
  </Accordion>

  <Accordion title="Multi-language Support">
    Create themes that work seamlessly with Quickbutik's translation system.

    ```mustache theme={null}
    <button>{{#lang}}Add to Cart{{/lang}}</button>
    <!-- Automatically translates based on store language settings -->
    ```
  </Accordion>
</AccordionGroup>

## Development Workflow

<Tip>
  **Pro tip**: Always test your changes in a theme under construction before publishing to your live version!
</Tip>

### Recommended Development Process

1. **Plan your layout** - Sketch out the design and identify what data you need
2. **Start with static HTML** - Build the basic structure without dynamic content
3. **Add dynamic elements** - Replace static content with Mustache templates
4. **Test thoroughly** - Check different scenarios (empty cart, sold out products, etc.)
5. **Optimize performance** - Minimize template complexity and optimize images

## Getting Help

<CardGroup cols={2}>
  <Card title="Search Function" icon="magnifying-glass">
    Use the search function (top left) or browser search to quickly find specific objects or functions
  </Card>

  <Card title="Contact Support" icon="envelope">
    Technical questions? Email us at [support@quickbutik.com](mailto:support@quickbutik.com)
  </Card>

  <Card title="Community" icon="users">
    Join our developer community for tips, tricks, and peer support
  </Card>

  <Card title="Examples" icon="code">
    Browse our comprehensive examples library for common implementation patterns
  </Card>
</CardGroup>

## Next Steps

Ready to start building? Here's your learning path:

<CardGroup cols={2}>
  <Card title="Quickstart Tutorial" icon="rocket" href="/theme-development/quickstart">
    Build your first custom template in 15 minutes
  </Card>

  <Card title="Mustache Basics" icon="code" href="/theme-development/mustache-basics">
    Learn the fundamental syntax and concepts
  </Card>

  <Card title="Template Structure" icon="sitemap" href="/theme-development/template-structure">
    Understand how Quickbutik themes are organized
  </Card>

  <Card title="Development Setup" icon="tools" href="/theme-development/development-setup">
    Set up your local development environment
  </Card>
</CardGroup>

***

<Warning>
  **Important**: Always backup your theme before making significant changes. You can download a copy of your theme files from the control panel.
</Warning>