Skip to content
polar-commerce
← Wiedza

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.

Mateusz Śnieżek, Shopify Expert

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ć:

{
  "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

# 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:

{% 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:

{{ 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

  • Lazy load images — `loading="lazy"` na obrazkach poza viewport
  • Responsive images — `srcset` z Shopify image API
  • Defer JavaScript — `defer` lub `async` na script tags
  • Minimalizuj Liquid loops — unikaj zagnieżdżonych pętli
  • Preload critical assets — fonty, hero image, CSS
  • 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ę.