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.

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

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

Objects

Data containers that hold information like products, orders, or store settings. Example: {{product.title}}

Attributes

Properties of objects that contain specific data. Example: {{product.price}}, {{customer.email}}

Conditionals

If-statements that show content based on conditions. Example: {{#product.soldOut}}Out of stock{{/product.soldOut}}

Wrappers

Helper functions that process and transform data. Example: {{#img}}{{product.image}}_400x400{{/img}}

​
Template Structure

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

{{object.attribute}}

​
Basic Examples

<!-- Display a product's title -->
<h1>{{product.title}}</h1>

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

​
Where to Edit Your Theme

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

1

Access theme editor

Navigate to Appearance → Theme → Under the Hood in your control panel

2

Browse template files

Explore the different template files like product.mustache, list.mustache, cartsuccess.mustache

3

Edit and preview

Make changes to the code and use the preview function to see your changes

4

Save and publish

Save your changes and publish them to your live store

​
Common Use Cases

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

​
Development Workflow

Pro tip: Always test your changes in a theme under construction before publishing to your live version!

  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

Search Function

Use the search function (top left) or browser search to quickly find specific objects or functions

Contact Support

Technical questions? Email us at support@quickbutik.com

Community

Join our developer community for tips, tricks, and peer support

Examples

Browse our comprehensive examples library for common implementation patterns

​
Next Steps

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

Quickstart Tutorial

Build your first custom template in 15 minutes

Mustache Basics

Learn the fundamental syntax and concepts

Template Structure

Understand how Quickbutik themes are organized

Development Setup

Set up your local development environment

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