Getting Started with Theme Development

Learn how to set up your development environment and create your first custom theme.

Prerequisites

Before we begin, make sure you have:

• Node.js 18+ installed
• A code editor (VS Code recommended)
• Basic knowledge of HTML, CSS, and JavaScript

Setting Up Your Environment

First, let's set up the development environment:

# Clone the starter template
git clone https://github.com/tanqory/theme-starter.git my-theme

# Navigate to the project
cd my-theme

# Install dependencies
npm install

# Start the development server
npm run dev

Project Structure

Here's what you'll find in the starter template:

my-theme/
├── assets/
│   ├── css/
│   └── js/
├── sections/
├── snippets/
├── templates/
├── config/
└── locales/

Creating Your First Section

Let's create a simple hero section:

{% raw %}
<section class="hero">
  <div class="hero__content">
    <h1>{{ section.settings.title }}</h1>
    <p>{{ section.settings.subtitle }}</p>
    <a href="{{ section.settings.button_link }}" class="btn">
      {{ section.settings.button_text }}
    </a>
  </div>
</section>

{% schema %}
{
  "name": "Hero",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Welcome to our store"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ]
}
{% endschema %}
{% endraw %}

Adding Styles

Create a corresponding CSS file:

.hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.hero__content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero__content p {
  font-size: 1.25rem;
  opacity: 0.8;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: transform 0.2s;
}

.btn:hover {
  transform: translateY(-2px);
}

Next Steps

Now that you have the basics, try:

1. Creating more sections (featured products, testimonials, etc.)
2. Adding responsive styles
3. Implementing JavaScript interactions

In the next tutorial, we'll dive deeper into advanced theme customization.

---

Questions? Join our Discord community!