---
title: Shopify Theme Development — tworzenie szablonów od podstaw
description: Jak tworzyć szablony Shopify? Architektura Online Store 2.0, Liquid, JSON templates, sekcje, bloki, metafields i Shopify CLI.
canonical_url: "https://www.polar-commerce.com/wiedza/shopify-theme-development"
locale: pl
category: development
date_modified: 2026-05-05
source: "https://www.polar-commerce.com/wiedza/shopify-theme-development.md"
publisher: Polar Commerce
publisher_url: "https://www.polar-commerce.com"
---

# Shopify Theme Development — tworzenie szablonów od podstaw

> Jak tworzyć szablony Shopify? Architektura Online Store 2.0, Liquid, JSON templates, sekcje, bloki, metafields i Shopify CLI.

Tworzenie szablonów Shopify (theme development) to proces budowy frontendu sklepu internetowego przy użyciu Liquid, HTML, CSS, JavaScript i architektury Online Store 2.0. Od 2021 roku standardem jest OS 2.0, który wprowadził JSON templates i sekcje na każdej stronie.

## Architektura Online Store 2.0

### Struktura plików szablonu
```
theme/
├── assets/          # CSS, JS, obrazki
├── config/          # settings_schema.json, settings_data.json
├── layout/          # theme.liquid (główny layout)
├── locales/         # tłumaczenia (pl.json, en.json)
├── sections/        # modularne sekcje
├── snippets/        # reużywalne fragmenty kodu
├── templates/       # JSON templates (OS 2.0)
│   ├── index.json
│   ├── product.json
│   ├── collection.json
│   └── page.json
└── templates/customers/  # strony konta klienta
```

### JSON Templates vs Liquid Templates
**OS 2.0 (JSON):** Każdy template to plik JSON definiujący, które sekcje wyświetlić:
```json
{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {}
    },
    "recommendations": {
      "type": "product-recommendations",
      "settings": {
        "heading": "Polecane produkty"
      }
    }
  },
  "order": ["main", "recommendations"]
}
```

**Zalety:** Merchant może dodawać, usuwać i reorderować sekcje bez edycji kodu.

## Shopify CLI — lokalne środowisko

```bash
# Instalacja
npm install -g @shopify/cli

# Inicjalizacja nowego szablonu
shopify theme init my-theme

# Lokalny development (hot reload)
shopify theme dev --store=twojsklep.myshopify.com

# Deploy na serwer
shopify theme push

# Pull aktualnego szablonu
shopify theme pull
```

## Sekcje — budulec szablonu

### Dynamiczne sekcje
Sekcje z `{% schema %}` mogą być dodawane przez Theme Editor:

```liquid
{% schema %}
{
  "name": "Hero z wideo",
  "tag": "section",
  "class": "hero-section",
  "settings": [
    {
      "type": "video",
      "id": "video",
      "label": "Wideo w tle"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Nagłówek",
      "default": "Witaj w naszym sklepie"
    },
    {
      "type": "url",
      "id": "cta_link",
      "label": "Link CTA"
    }
  ],
  "presets": [
    {
      "name": "Hero z wideo"
    }
  ]
}
{% endschema %}
```

## Metafields i Metaobjects

### Metafields
Dodatkowe pola danych na produktach, kolekcjach, stronach:
```liquid
{{ product.metafields.custom.material.value }}
{{ product.metafields.custom.warranty_years.value }}
```

### Metaobjects
Custom content types (jak CMS):
- Banery promocyjne
- FAQ items
- Team members
- Store locations

## Performance best practices

1. **Lazy load images** — `loading="lazy"` na obrazkach poza viewport
2. **Responsive images** — `srcset` z Shopify image API
3. **Defer JavaScript** — `defer` lub `async` na script tags
4. **Minimalizuj Liquid loops** — unikaj zagnieżdżonych pętli
5. **Preload critical assets** — fonty, hero image, CSS
6. **Compress images** — WebP/AVIF format

## Development szablonów z Polar Commerce

[Polar Commerce](/) buduje custom szablony Shopify optymalizowane pod wydajność i konwersję. Wykorzystujemy architekturę OS 2.0, nowoczesne CSS i JavaScript, oraz najlepsze praktyki UX. [Umów konsultację](/kontakt).