> ## Documentation Index > Fetch the complete documentation index at: https://quickbutik.dev/llms.txt > Use this file to discover all available pages before exploring further. # Quickstart Tutorial > Build your first custom Quickbutik theme template in 15 minutes This tutorial will walk you through creating your first custom theme template. You'll learn the core concepts by building a simple product page layout with dynamic content. **Prerequisites**: Basic knowledge of HTML and CSS. Access to your Quickbutik Control Panel. ## What we'll build By the end of this tutorial, you'll have created a custom product page that: * ✅ Displays product information dynamically * ✅ Shows product images in a gallery * ✅ Handles product variants and stock status * ✅ Includes an add-to-cart button ## Step 1: Access the Theme Editor First, let's access your theme files: Log into your Quickbutik store and navigate to **Appearance → Theme** Click **"Under the hood"** to open the theme code editor Look for the `product.html` file in the file list - this controls how individual product pages are displayed ## Step 2: Understanding the Basic Structure Let's start with a simple product page template: ```mustache product.html theme={null} {{product.title}} - {{shop.name}}

``` * `{{product.title}}` - Displays the product name * `{{shop.name}}` - Shows your store name * `{{seo.description}}` - SEO-optimized description for the page ## Step 3: Add Product Information Now let's add the core product information: ```mustache Basic Product Info theme={null}

{{#product.has_before_price}} {{product.before_price}} {{/product.has_before_price}} {{product.price}} {{product.currency}}

``` ```mustache Stock Status theme={null}

{{#product.soldOut}} {{#lang}}Out of stock{{/lang}} {{/product.soldOut}} {{^product.soldOut}} {{#lang}}In stock{{/lang}} {{/product.soldOut}}

``` ### What's happening here? We show both regular and sale prices, with the `has_before_price` conditional showing sale pricing only when relevant. Using `#` and `^` operators to show different content based on whether the product is sold out. The `{{#lang}}` wrapper automatically translates text based on your store's language settings. The `&` symbol in `{{&product.description}}` renders HTML content without escaping it. ## Step 4: Product Image Gallery Let's create a dynamic image gallery: ```mustache Image Gallery theme={null}

{{#lang}}No image available{{/lang}}

``` The `{{#img}}` wrapper automatically optimizes images. The `_800x600` suffix resizes the image to 800x600 pixels. ## Step 5: Product Variants If your product has variants (like size or color), let's display them: ```mustache Product Variants theme={null} {{#product.hasOptions}}

{{#lang}}Options{{/lang}}

{{/product.hasOptions}} ``` ## Step 6: Add to Cart Button Finally, let's add a functional add-to-cart button: ```mustache Add to Cart theme={null}

``` ## Step 7: Complete Example Here's your complete product page template: ```mustache Complete Template theme={null} {{product.title}} - {{shop.name}}

{{#product.has_before_price}} {{product.before_price}} {{/product.has_before_price}} {{product.price}} {{product.currency}}

{{#product.soldOut}} {{#lang}}Out of stock{{/lang}} {{/product.soldOut}} {{^product.soldOut}} {{#lang}}In stock{{/lang}} {{/product.soldOut}}

``` ## Step 8: Test Your Template Click **Save** in the theme editor Use the preview function to see your changes on a test product * Products with/without images * Products with/without variants * Products that are in stock vs. sold out When you're satisfied, publish your changes to make them live ## 🎉 Congratulations! You've successfully created your first custom Quickbutik theme template! You now understand: * ✅ How to display product data dynamically * ✅ How to use conditionals for different states * ✅ How to handle product variants and options * ✅ How to create functional form elements ## Next Steps Learn more about the templating language fundamentals Explore store-wide data like navigation, cart, and settings Learn about dynamic elements and complex layouts Discover performance tips and coding standards ## Common Issues Make sure you clicked **Save** and try clearing your browser cache. Some changes may take a few minutes to appear. Check that you're viewing the template on a product page. Some data is only available on specific page types. Remember that your theme's CSS file controls the visual appearance. The template only handles the HTML structure and dynamic content.