Introduction
Build beautiful, dynamic storefronts with Quickbutik’s powerful templating system
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:
Basic Examples
Where to Edit Your Theme
You can access and modify your theme code through the Quickbutik Control Panel:
Access theme editor
Navigate to Appearance → Theme → Under the Hood in your control panel
Browse template files
Explore the different template files like product.mustache
, list.mustache
, cartsuccess.mustache
Edit and preview
Make changes to the code and use the preview function to see your changes
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:
Custom Product Displays
Custom Product Displays
Create unique product layouts, image galleries, and variant selectors tailored to your brand.
Dynamic Navigation
Dynamic Navigation
Shopping Cart Integration
Shopping Cart Integration
Display cart contents, quantities, and totals anywhere in your theme.
Multi-language Support
Multi-language Support
Create themes that work seamlessly with Quickbutik’s translation system.
Development Workflow
Pro tip: Always test your changes in a theme under construction before publishing to your live version!
Recommended Development Process
- Plan your layout - Sketch out the design and identify what data you need
- Start with static HTML - Build the basic structure without dynamic content
- Add dynamic elements - Replace static content with Mustache templates
- Test thoroughly - Check different scenarios (empty cart, sold out products, etc.)
- 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.