# Create from scratch
> Build your first Shoplazza Theme by hand: create the layout, home page template, sections, snippets, a navigation menu, and a product page, then upload and preview it.
# Create a theme from scratch
This guide walks you through creating your first Shoplazza theme from scratch. By the end, you'll have a working theme with a layout, a home page, a navigation menu, and a product detail page.
## What you'll learn
- The basic directory structure of a Shoplazza theme
- How to create a layout, templates, sections, and snippets
- How to build a dynamic navigation menu and a product detail page
- How to upload and preview your theme
## Prerequisites
1. A [Shoplazza store](https://sso.shoplazza.com/login) — you can't develop a theme without one.
2. A text editor, or the built-in [Shoplazza theme editor](/docs/theme/developer-tools/theme-editor).
3. Basic knowledge of HTML, CSS, JavaScript, and [Liquid](/docs/theme/references/liquid/) — Shoplazza themes are built with these technologies.
## Workflow overview
```mermaid
flowchart LR
A[Step 1: Set up the directory structure] --> B[Step 2: Create the layout file]
B --> C[Step 3: Create the home page template]
C --> D[Step 4: Create the config file]
D --> E[Step 5: Create a navigation menu]
E --> F[Step 6: Create a product detail page]
F --> G[Step 7: Upload and preview your theme]
```
## Step 1: Set up the directory structure
Create a new folder for your theme with the following structure:
```text
my-new-theme/
├── assets/
├── config/
│ └── settings_data.json
├── layout/
│ └── theme.liquid
├── sections/
│ ├── header.liquid
│ └── product-template.liquid
├── snippets/
│ └── navigation.liquid
└── templates/
├── index.liquid
└── product.liquid
```
For a complete overview of all directories and their roles, see [Theme architecture overview](/docs/theme/architecture/overview).
:::tip
You can also scaffold a complete directory structure in seconds with `shoplazza themes init`, which clones [Nova 2023](/docs/theme/developer-tools/nova-2023). Nova 2023 is a full-featured reference theme, so its structure is richer than the minimal layout built by hand here. See [Develop with Shoplazza CLI](/docs/theme/getting-started/develop-with-cli).
:::
## Step 2: Create the layout file
The layout file is the HTML shell that wraps every page. Create `layout/theme.liquid`:
```liquid
{{ shop.name }} - {{ page.title }}
{{ content_for_header }}
{% section 'header' %}
{{ content_for_layout }}
{{ content_for_js }}
```
`{{ content_for_header }}` and `{{ content_for_js }}` load scripts required by Shoplazza. `{{ content_for_layout }}` is where template content gets injected. The `{% section 'header' %}` tag renders the header section you'll create in Step 5. To learn more, see [Theme layouts](/docs/theme/architecture/layouts/overview).
## Step 3: Create the home page template
Create `templates/index.liquid` — this is what renders on your store's home page:
```liquid
Welcome to {{ shop.name }}
This is your first Shoplazza theme.
```
## Step 4: Create the config file
Create `config/settings_data.json` with a minimal valid structure:
```json
{
"current": {}
}
```
To learn more about theme configuration, see [Theme config](/docs/theme/architecture/config/overview).
## Step 5: Create a navigation menu
Build a dynamic header navigation that reads from the store's [linklist](/docs/theme/references/liquid/objects/linklist) configuration and supports dropdown submenus.
First, create the header section `sections/header.liquid`:
```liquid
```
This includes a [snippet](/docs/theme/architecture/snippets) named `navigation` and passes the links from the `main-menu` linklist to it.
Next, create the navigation snippet `snippets/navigation.liquid`:
```liquid
```
The snippet loops through each link in the linklist. If a link has child links, it renders a submenu. To learn more about snippets, see [Snippets](/docs/theme/architecture/snippets).
## Step 6: Create a product detail page
Build a [section](/docs/theme/architecture/sections/overview) that displays product information and offers merchant-configurable settings through the theme editor.
Create the product section `sections/product-template.liquid`:
```liquid
{% if product %}
{{ product.title }}
{{ product.description }}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{{ product.price | money }}
{% else %}
This product does not exist.
{% endif %}
{% schema %}
{
"name": "Product template",
"settings": [
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": true
}
]
}
{% endschema %}
```
The `{% schema %}` block defines a `show_vendor` toggle that merchants can control in the theme editor. For all available setting types, see [Input settings](/docs/theme/architecture/settings/input-settings).
Then create the product template `templates/product.liquid` to render the section on product pages:
```liquid
{% section 'product-template' %}
```
The `product` object inside the section automatically refers to the current product being viewed.
## Step 7: Upload and preview your theme
1. Compress your `my-new-theme/` folder into a `.zip` file.
2. In your Shoplazza admin, go to **Online Store** → **Themes**.
3. Click **Upload theme** and select the `.zip` file.
4. After the upload completes, click **Actions** → **Preview** next to your theme.
Your browser opens a new tab showing your theme with a navigation menu, a home page, and product pages. In the theme editor, you can assign a linklist to the `main-menu` and toggle the **Show vendor** setting on product pages.
:::tip
For a more streamlined development workflow using Shoplazza CLI with live preview and hot reload, see the [CLI-based tutorial](./index.md).
:::
## Next steps
Now that you have a working theme, explore these topics to build it out:
- [Theme architecture overview](/docs/theme/architecture/overview) — understand every directory and file type
- [Theme layouts](/docs/theme/architecture/layouts/overview) — customize headers, footers, and the HTML shell
- [Theme config](/docs/theme/architecture/config/overview) — add merchant-configurable settings
- [Sections](/docs/theme/architecture/sections/overview) — build reusable, customizable content modules
- [Snippets](/docs/theme/architecture/snippets) — create reusable code fragments
- [Locale files](/docs/theme/architecture/locales/overview) — add multi-language support
- [Liquid objects](/docs/theme/references/liquid/objects/) — learn about dynamic data available in templates