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

# Template Structure

> Understanding Quickbutik theme architecture and file organization

# Template Structure

Quickbutik themes are built using the **Mustache** templating language. This guide covers the theme architecture and file organization you need to understand before building your first theme.

## Theme Architecture

### Template Files

Quickbutik themes consist of several template files, each serving a specific purpose:

| Template File | Purpose | Usage |
| - | - | - |
| **Startpage** | Homepage/Landing page | Main store entry point |
| **Produktsida** | Product detail page | Individual product display |
| **Produktlista** | Product listing/Category page | Product collection views |
| **Innehållssida** | Static content pages | About, Terms, Custom pages |
| **Kontaktsida** | Contact page | Contact form and information |
| **Blog** | Blog overview | Blog post listings |
| **Blog\_post** | Individual blog post | Single blog post display |
| **Tack-sida** | Thank you page | Order confirmation |

### Accessing Template Files

You can access and edit your theme's source code through your Quickbutik control panel:

**Utseende > Tema > Kod under huven**

<Tip>
  Always make a backup of your theme before making changes, and test thoroughly in a theme under construction before publishing to your live version!
</Tip>

## Data Availability

Understanding which data is available on which templates is crucial for effective theme development:

### Global Objects

Available on **all pages**:

* `shop` - Store settings and configuration
* `user` - Customer login/account information
* `basket` - Shopping cart data
* `seo` - Search engine optimization data
* `linklist` - Navigation menus
* `paylink` - Checkout URL

### Page-Specific Objects

Available only on **specific templates**:

| Object | Available On | Purpose |
| - | - | - |
| `product` | Produktsida, Produktlista | Product information |
| `products` | Produktlista | Product collection for categories |
| `category` | Produktlista | Category information |
| `order` | Tack-sida | Order confirmation details |
| `blog`, `posts`, `post` | Blog pages | Blog content and navigation |
| `page` | Innehållssida | Static page content |
| `response_data` | Kontaktsida | Contact form responses |

## File Organization Best Practices

### CSS and Assets

```
/css/
  styles.css       - Main stylesheet
  responsive.css   - Mobile/tablet styles
  
/js/
  theme.js         - Theme functionality
  
/images/
  logo.png         - Store logo
  placeholders/    - Default images
```

### Template Structure Example

```mustache theme={null}
<!DOCTYPE html>
<html>
<head>
  <title>{{seo.title}} - {{shop.name}}</title>
  <link href="{{#assets}}css/styles.css{{/assets}}" rel="stylesheet">
</head>
<body>
  <!-- Global Header -->
  <header>
    <h1>{{shop.name}}</h1>
    <!-- Navigation available globally -->
    {{#linklist.main}}
      <a href="{{url}}">{{name}}</a>
    {{/linklist.main}}
  </header>

  <!-- Page-specific content varies by template -->
  <main>
    <!-- Content differs based on template file -->
  </main>

  <!-- Global Cart (available everywhere) -->
  <aside>
    {{^basket.isEmpty}}
      <p>{{basket.items_count}} items - {{basket.total_amount}}</p>
    {{/basket.isEmpty}}
  </aside>
</body>
</html>
```

## Template Inheritance Patterns

### Common Header/Footer

Most themes follow this pattern:

1. **Header section** - Logo, navigation, search (same across all pages)
2. **Main content** - Varies by template type
3. **Footer section** - Links, contact info (same across all pages)

### Responsive Considerations

Structure your templates with mobile-first approach:

* Use flexible grid systems
* Optimize images with `{{#img}}` wrapper
* Test on multiple screen sizes

## Next Steps

Now that you understand the theme structure, learn the templating language:

<CardGroup cols={2}>
  <Card title="Mustache Basics" icon="file-code" href="/theme-development/mustache-basics">
    Learn the fundamentals of Mustache templating
  </Card>

  <Card title="Objects and Attributes" icon="brackets-curly" href="/theme-development/objects-and-attributes">
    How to access and display data in your themes
  </Card>

  <Card title="Global Objects" icon="globe" href="/theme-development/global/shop">
    Explore shop, user, and navigation data
  </Card>

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.