Shopify'da Özel Bölüm (Section) Geliştirmek: Ne Zaman ve Nasıl?

Hazır temalar çoğu ihtiyacı karşılar; ancak markaya özel bir anlatım, farklı bir ürün sunumu veya kampanyaya özel bir düzen gerektiğinde özel bölüm (section) geliştirmek en temiz çözümdür. Doğru yazılmış bir bölüm, mağaza ekibinin içeriği kod bilgisi olmadan yönetmesini sağlar ve tema güncellemelerinde sorun çıkarmaz.

Neden özel bölüm?

Sayfaya sabit kod eklemek yerine bölüm geliştirildiğinde içerik tema düzenleyiciden yönetilir. Metinler, görseller, renkler ve sıralama tıklayarak değiştirilebilir; bölüm farklı sayfalarda tekrar kullanılabilir. Uygulama kurmaya göre de avantajlıdır: aylık ücret yoktur, ek JavaScript yüklenmez, tasarım temayla birebir uyumlu olur.

Hangi durumlarda özel bölüm gerekir?

• Ürün sayfasında marka hikâyesi, malzeme anlatımı veya karşılaştırma tablosu
• Ana sayfada temada olmayan bir düzen: kategori kartları, önce/sonra görselleri, video vitrin
• Kampanya sayfaları için geri sayım, ürün grupları ve indirim bantları
• Metafield verisini gösteren beden tablosu, bakım talimatı veya teknik özellik blokları
• Mağaza listesi, SSS, ekip veya basında biz gibi kurumsal içerikler

Bir bölüm nasıl yapılandırılır?

Her bölüm bir Liquid dosyasıdır ve sonunda bölümün ayarlarını tanımlayan bir {% schema %} kısmı bulunur. Ayarlar tema düzenleyicide alanlara dönüşür; bloklar ise içeriğin tekrar eden parçalarıdır:

<section class="ozellikler">
  <h2>{{ section.settings.baslik }}</h2>
  <div class="ozellikler-grid">
    {% for block in section.blocks %}
      <div class="ozellik" {{ block.shopify_attributes }}>
        {{ block.settings.ikon | image_url: width: 96 | image_tag: loading: 'lazy' }}
        <h3>{{ block.settings.metin }}</h3>
      </div>
    {% endfor %}
  </div>
</section>

{% schema %}
{
  "name": "Özellikler",
  "settings": [{ "type": "text", "id": "baslik", "label": "Başlık", "default": "Neden biz?" }],
  "blocks": [{
    "type": "ozellik", "name": "Özellik",
    "settings": [
      { "type": "image_picker", "id": "ikon", "label": "İkon" },
      { "type": "text", "id": "metin", "label": "Metin" }
    ]
  }],
  "presets": [{ "name": "Özellikler" }]
}
{% endschema %}

presets kısmı bölümün tema düzenleyicideki "Bölüm ekle" listesinde görünmesini sağlar.

İyi bir bölümün özellikleri

• Ayarları anlaşılır Türkçe etiketlerle ve gerekiyorsa açıklama metinleriyle sunar.
• Blokları kullanarak esnek içerik ekleme imkânı verir.
• Temanın renk şemaları ve yazı tipleriyle uyumludur; ayrı stil dünyası kurmaz.
• Görselleri doğru boyutta ve ekranın altında kalıyorsa gecikmeli yükler.
• Mobilde ayrı düşünülmüştür; masaüstü düzeni küçültülmüş hali değildir.
• Klavye ve ekran okuyucu erişilebilirliğini gözetir.
• Yalnızca ihtiyaç duyduğu CSS ve JavaScript'i yükler.

Geliştirme süreci

1. İhtiyaç ve taslak: Bölümün hangi sayfalarda, hangi içerikle kullanılacağı netleştirilir; varsa tasarım dosyası incelenir.
2. Ayar planı: Ekibin neleri değiştirebilmesi gerektiği belirlenir; gereksiz ayar kalabalığından kaçınılır.
3. Geliştirme: Temanın kopyasında kodlanır ve Theme Check ile kontrol edilir.
4. Test ve teslim: Farklı ekran boyutlarında denenir, ekibe nasıl kullanılacağı gösterilir.

Tema güncellemeleriyle uyum

Özel bölümler ayrı dosyalarda tutulduğunda tema güncellemesinde kolayca taşınır. Ana tema dosyalarını değiştirmek yerine yeni dosya eklemek bakım maliyetini düşürür. Ayrıntılar için tema güncelleme rehberimize bakabilirsiniz.

Sık sorulanlar

Temanıza özel bölümler geliştirmemizi isterseniz Liquid geliştirme ve özel tema geliştirme hizmetlerimize göz atın.