Shopify tema nasıl yapılır? Liquid ve Shopify CLI ile adım adım

Bu rehber temayı kodla yazmak isteyenler için. Hazır bir temanın görünümünü tema düzenleyicisinden değiştirmek ayrı bir iş; temanın sıfırdan yazılmasını istiyorsan kapsamı Shopify özel tema geliştirme sayfamızda anlattık.

Shopify teması neyden oluşur?

Bir Shopify teması, Shopify'ın belirlediği klasör yapısına uyan dosyalardan oluşur. Sayfanın iskeletini layout dosyası, sayfa türünü şablonlar, düzenleyiciden eklenip sıralanan içerik modüllerini bölümler (section) ve bloklar kurar; tekrar kullanılan Liquid parçaları snippets, CSS ve JavaScript assets, tema ayarları config, vitrin metinlerinin çevirileri locales klasöründe durur. Yapının tamamını Shopify'ın tema mimarisi dokümanı anlatıyor.

Shopify'ın koyduğu sınırları baştan bilmek planlamayı kolaylaştırır: bir JSON şablon en fazla 25 bölüm, her bölüm en fazla 50 blok gösterebilir ve bir temada en fazla 1.000 JSON şablon olabilir. Bir temaya en fazla 300 tema bloğu eklenebilir.

Kod yazmadan: hazır temayı tema düzenleyicisinde kurmak

Kod yazmadan da mağazanın görünümünü kurabilirsin: Shopify yöneticisinde Online Mağaza > Temalar bölümünden Theme Store'daki ücretsiz ya da ücretli bir temayı ekler, tema düzenleyicisini açarsın. Düzenleyicide bölümleri ve blokları ekler, sıralar ya da gizler; renkleri ve yazı tiplerini tema ayarlarından değiştirirsin. Temanın sunmadığı bir bölüm ya da davranış gerektiğinde iş koda geçer; aşağıdaki adımlar o durum için. Hazır temanın markaya göre düzenlenmesini Shopify tema tasarımı sayfamızda anlattık.

Başlamadan önce neye ihtiyacın var?

Shopify teması yazmak için bilgisayarında Node.js, bir paket yöneticisi ve Git olmalı; Shopify CLI bunların üzerinde çalışır. Temayı denemek için de bir geliştirme mağazası ya da üzerinde tema izni olan bir mağaza hesabı gerekir. Shopify'ın CLI dokümanına göre liste şöyle:

• Node.js 22.12 ya da üstü ve bir paket yöneticisi: npm, Yarn 1.x ya da pnpm.
• Git 2.28.0 ya da üstü.
• Shopify CLI: kurulumu aşağıdaki ilk adımda.
• Bir geliştirme mağazası: Shopify tema denemeleri için geliştirme mağazasını öneriyor. Geliştirme mağazasında CLI kullanmak için mağaza sahibi ya da personel hesabı olman gerekir.
• Tema izni: Başka bir mağazada çalışacaksan temaları yönetme izni olan bir ortak çalışan ya da personel hesabı veya mağaza sahipliği.
• Kod editörü: VS Code kullanıyorsan Shopify'ın Liquid eklentisi söz dizimi renklendirmesi, otomatik tamamlama ve tema denetimlerini birlikte getirir.

Mağazanın kendisini henüz açmadıysan hesap, ödeme ve alan adı adımlarını Shopify nedir rehberinde anlattık.

Adım adım Shopify teması yapmak

Aşağıdaki adımlar Shopify'ın resmi tema oluşturma akışını izliyor: Skeleton temasıyla başlar, yerelde geliştirir, denetler ve mağazaya yüklersin. Komutlar terminalde, tema klasörünün içinde çalıştırılır.

1. Shopify CLI'ı kur

Shopify CLI'ı npm ile bilgisayarına genel olarak kurarsın; macOS'ta Homebrew ile de kurulabiliyor. Shopify CLI 4.0'dan itibaren araç kendini kurulduğu paket yöneticisiyle otomatik güncelliyor.

npm install -g @shopify/cli@latest

2. Skeleton temasını indir

shopify theme init

Komut tema adını sorar ve Shopify'ın Skeleton temasını aynı adlı klasöre kopyalar. Skeleton, Shopify'ın en iyi uygulamalarına göre hazırlanmış sade bir başlangıç teması; hazır bir vitrin tasarımı getirmez, yapıyı sen kurarsın.

3. Geliştirme sunucusunu aç

shopify theme dev --store magazan.myshopify.com

İlk çalıştırmada Shopify hesabınla giriş yapman istenir. Önizleme http://127.0.0.1:9292 adresinde ve yalnız Google Chrome'da açılır; CSS ve bölüm değişiklikleri sayfayı yenilemeden, mağazanın gerçek verisiyle yansır. Komut mağazada gizli bir geliştirme teması oluşturur: bu tema tema sınırına sayılmaz, yedi gün kullanılmazsa ya da shopify auth logout çalıştırıldığında silinir.

4. İlk bölümünü yaz

sections/ klasörüne bir .liquid dosyası eklersin. Bölümün tema düzenleyicisinde görünen adı, ayarları ve blokları dosyanın sonundaki {% schema %} etiketinde JSON olarak tanımlanır. presets tanımlanmayan bir bölüm tema düzenleyicisinden eklenemez; onu şablona elle yazman gerekir. Aşağıdaki sections/duyuru.liquid dosyası, metni düzenleyiciden değiştirilebilen bir duyuru bandı kurar:

<div class="duyuru">
  {{ section.settings.metin }}
</div>

{% schema %}
{
  "name": "Duyuru",
  "settings": [
    {
      "type": "text",
      "id": "metin",
      "label": "Duyuru metni",
      "default": "Yeni sezon ürünleri yayında"
    }
  ],
  "presets": [{ "name": "Duyuru" }]
}
{% endschema %}

5. Bölümü bir şablona bağla

JSON şablonlar sayfada hangi bölümlerin hangi sırayla görüneceğini tutar: sections nesnesi bölümleri, order dizisi sıralarını belirler; type değeri bölüm dosyasının adıdır. Ana sayfanın şablonu templates/index.json şöyle görünebilir:

{
  "sections": {
    "duyuru": { "type": "duyuru" }
  },
  "order": ["duyuru"]
}

6. Bloklarla esnek düzen kur

Bloklar bir bölümü daha küçük, yeniden sıralanabilir parçalara böler. Üç blok türü var: blocks/ klasöründeki tema blokları bölümler arasında yeniden kullanılır ve iç içe girebilir; bölüm dosyasında tanımlanan bölüm blokları yalnız o bölümde çalışır; uygulama blokları ise mağazaya kurulan uygulamalardan gelir.

7. Tema ayarlarını ve dili ekle

config/settings_schema.json tema düzenleyicisindeki tema ayarlarını tanımlar; renk ve yazı tipi gibi bütün mağazayı ilgilendiren seçenekler buraya yazılır. Vitrin metinlerini koda gömmek yerine locales/ klasöründeki çeviri dosyalarına yazarsın. Varsayılan dil dosyası *.default.json biçiminde adlandırılır; mağaza Türkçe açılacaksa bu dosya tr.default.json olur.

8. Theme Check ile denetle

shopify theme check

Theme Check temayı söz dizimi hatalarına, eksik şablonlara, kullanılmayan değişken ve snippet'lere, bilinmeyen ya da eskimiş etiketlere ve performans sorunlarına karşı tarar. VS Code eklentisi aynı denetimleri sen yazarken gösterir.

9. GitHub'a bağla

Shopify'ın GitHub entegrasyonu bir depodaki dalı (branch) mağazadaki bir temaya bağlar. Dal güncellendikçe tema güncellenir; Shopify yöneticisinde yapılan değişiklikler de dala commit olarak geri yazılır. Böylece kodla tema düzenleyicisi arasındaki fark kaybolmaz ve her değişikliğin geçmişi kalır.

10. Yükle ve yayınla

shopify theme push --unpublished
shopify theme publish

İlk yüklemede --unpublished seçeneği temayı tema kütüphanene yayınlanmamış yeni bir tema olarak ekler; sonraki güncellemeleri shopify theme push ile gönderirsin. Çıkış yaptıktan sonra da açılan kalıcı bir önizleme bağlantısını bu yayınlanmamış temadan alırsın. Temayı canlıya almadan önce bütün yerel değişiklikleri yüklediğinden emin ol, sonra shopify theme publish komutunu çalıştır.

Liquid nedir? Üç temel yapı

Liquid, Shopify'ın geliştirdiği ve açık kaynak olarak yayımladığı şablon dilidir; Shopify temalarında ürün adı, fiyat, koleksiyon ve sepet gibi mağaza verilerini sayfaya basmak için kullanılır. Liquid'de üç temel yapı var:

• Nesneler veriyi gösterir ve çift süslü parantezle yazılır: {{ product.title }} ürünün adını basar.
• Etiketler mantık kurar ve yüzde işaretli süslü parantezle yazılır: {% if product.available %} ... {% endif %} arasındaki kod yalnız stokta olan üründe çalışır.
• Filtreler çıktıyı biçimlendirir ve dikey çizgiyle eklenir: {{ product.price | money }} fiyatı mağazanın para birimi biçiminde gösterir.

Üçü birlikte kullanıldığında bir koleksiyondaki ürünleri adı ve fiyatıyla listelemek birkaç satır sürer:

{% for product in collection.products %}
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
{% endfor %}

Liquid tek başına arayüzü kurmaz. HTML sayfanın yapısını, CSS görsel düzeni, JavaScript ise varyant seçimi, sepet çekmecesi ya da açılır pencere gibi etkileşimleri yönetir; Liquid bu parçaları mağaza verisiyle birleştirir. Bütün nesne, etiket ve filtrelerin listesi Shopify'ın Liquid referansında.

Var olan bir temayı kodla düzenlemek

Sıfırdan tema yazmak yerine mağazada çalışan bir temayı değiştireceksen akış biraz farklı. Temanın kodunu shopify theme pull ile bilgisayarına indirir, değişikliği yapar, shopify theme dev ile önizler ve shopify theme push ile mağazaya geri yüklersin. Mağaza başkasınınsa sahibinden temaları yönetme izni olan bir ortak çalışan erişimi istersin.

shopify theme pull --store magazan.myshopify.com

Küçük düzeltmeler için Shopify yöneticisindeki kod düzenleyici de kullanılabilir; ama hangi dosyada neyin değiştiğinin kaydını tutmak için yerel çalışma ve sürüm kontrolü daha güvenli. Theme Store'dan alınmış bir temada yaptığın kod değişiklikleri, temanın yeni sürümüyle çakışırsa güncellemeye taşınmaz; o durumda değişiklikleri yeni sürüme elle kopyalaman gerekir.

Hazır tema mı, sıfırdan tema mı?

Hazır tema birçok mağaza için doğru başlangıç: Theme Store'daki temalar geliştiricisinden güncelleme alır ve görünümleri tema düzenleyicisinden değiştirilebilir. Theme Store'dan satın alınan bir tema yalnız satın alındığı mağaza için lisanslanır. Ürün sunumu, koleksiyon keşfi ya da kampanya sayfaları hazır temanın bölümleriyle kurulamıyorsa tema sıfırdan yazılır; bu durumda güncellemeleri de temanın geliştiricisi planlar. Hazır temanın görünümünü markaya göre değiştirmeyi Shopify tema düzenleme, sıfırdan yazılan temayı Shopify özel tema geliştirme sayfasında anlattık.

Bir özellik temada mı, uygulamada mı yazılır?

Rozet, kampanya alanı ya da içerik bloğu gibi yalnız vitrinde görünen ihtiyaçlar temada çözülür. Bir özellik veri saklıyorsa, sipariş ya da stok gibi Shopify olaylarına tepki vermesi gerekiyorsa ya da başka bir sistemle konuşuyorsa uygulama işidir; uygulama temaya, bölümlerin kabul ettiği uygulama bloklarıyla girer. Mağazaya özel bir uygulamanın kapsamını Shopify uygulama geliştirme sayfamızda anlattık.

Yayından önce kontrol listesi

Önizlemede yalnız ana sayfanın masaüstü görünümüne bakmak yetmez. Yayından önce farklı mağaza durumlarını bu sırayla test edebilirsin:

Tasarımı gerçek katalogla kontrol et: birkaç örnek ürünle düzgün görünen düzen, yüzlerce ürün ve farklı varyant kombinasyonunda aynı sonucu vermeyebilir. Performansı Google'ın Core Web Vitals metrikleriyle ve Shopify'ın tema performansı önerileriyle ölç; sonuç tema kodunun yanında görsellerden, uygulamalardan ve sonradan eklenen içerikten de etkilenir. Başka bir platformdan geliyorsan yönlendirme planını Shopify'a geçiş sürecinin parçası olarak hazırla.

Shopify temalarını nasıl geliştiriyoruz?

Sıfırdan yazdığımız Shopify temalarında Skeleton temelinden başlıyor, stilleri Tailwind CSS, etkileşimleri TypeScript ile yazıp mağazaya derlenmiş dosyalar olarak yüklüyoruz. Geliştirme kendi geliştirme mağazamızda Shopify CLI ile ilerliyor; belirli aşamalarda önizleme paylaşıyor, her sürümden önce Theme Check'ten geçiriyor, kodu GitHub entegrasyonuyla mağazaya bağlıyor ve sürümleri numaralandırıyoruz. Tema mağazanın kendi Shopify hesabında yayınlanır ve orada çalışır. Waterfall'da önce ikas için özel tema olarak geliştirdiğimiz tasarımı ve özel bölümleri, marka Shopify'a geçince Shopify temasına uyarladık. Kapsamı ve süreci Shopify özel tema geliştirme sayfasında anlattık.

Kaynaklar

• Shopify: tema oluşturma
• Shopify CLI gereksinimleri ve kurulum
• Shopify CLI tema komutları ve geliştirme temaları
• Shopify tema mimarisi
• JSON şablonlar
• Bölümler (sections)
• Bloklar (blocks)
• Tema ayarları
• Çeviri dosyaları (locales)
• Theme Check
• Shopify GitHub entegrasyonu
• Shopify Liquid VS Code eklentisi
• Shopify Liquid referansı
• Liquid comment etiketi
• Shopify tema performansı
• Shopify temaları kişiselleştirme
• Shopify tema ekleme ve lisans
• Shopify temaları güncelleme
• Shopify tema kodunu düzenleme
• Shopify Theme Store
• Google Core Web Vitals rehberi