​
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 FilePurposeUsage
StartpageHomepage/Landing pageMain store entry point
ProduktsidaProduct detail pageIndividual product display
ProduktlistaProduct listing/Category pageProduct collection views
InnehållssidaStatic content pagesAbout, Terms, Custom pages
KontaktsidaContact pageContact form and information
BlogBlog overviewBlog post listings
Blog_postIndividual blog postSingle blog post display
Tack-sidaThank you pageOrder 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:

ObjectAvailable OnPurpose
productProduktsida, ProduktlistaProduct information
productsProduktlistaProduct collection for categories
categoryProduktlistaCategory information
orderTack-sidaOrder confirmation details
blog, posts, postBlog pagesBlog content and navigation
pageInnehållssidaStatic page content
response_dataKontaktsidaContact 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

<!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:

Mustache Basics

Learn the fundamentals of Mustache templating

Objects and Attributes

How to access and display data in your themes

Global Objects

Explore shop, user, and navigation data

Development Setup

Set up your development environment