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