> ## 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**
Always make a backup of your theme before making changes, and test thoroughly in a theme under construction before publishing to your live version!
## 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}
{{seo.title}} - {{shop.name}}
{{shop.name}}
{{#linklist.main}}
{{name}}
{{/linklist.main}}
```
## 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:
Learn the fundamentals of Mustache templating
How to access and display data in your themes
Explore shop, user, and navigation data
Set up your development environment