Shopify Liquid ile Blog Sayfanızı Özel Tasarıma Uyarlama

Shopify Liquid Nedir?

Shopify Liquid, Shopify platformunda temaların ve sayfaların dinamik olarak oluşturulmasını sağlayan açık kaynaklı bir şablon dilidir. HTML ile birlikte kullanılarak, mağazanızın içeriğini ve görünümünü özelleştirmenize olanak tanır.

Blog Sayfası Şablon Yapısı

Shopify'da blog sayfaları genellikle templates/blog.liquid ve sections/blog-template.liquid dosyalarıyla yönetilir. Bu dosyalarda blog gönderilerinin listelenmesi, sayfa başlıkları ve navigasyon gibi öğeler bulunur.

Liquid Temel Kodları ve Değişkenler

Liquid'de değişkenler, döngüler ve filtreler kullanarak blog gönderilerini dinamik şekilde çekebilirsiniz. Örneğin, for post in blog.articles döngüsü ile tüm makaleler listelenir. Ayrıca post.title, post.url gibi değişkenler gönderi bilgilerini gösterir.

Blog Tasarımını Özelleştirme Adımları

1. Tema dosyalarınızı yedekleyin.
2. Liquid şablonlarına erişin ve blog sayfası dosyasını açın.
3. HTML ve Liquid kodları ile gönderi kartlarını, başlıkları ve içerik düzenini değiştirin.
4. CSS ile stil ekleyerek görünümü kişiselleştirin.
5. Gerekirse JavaScript ile interaktif öğeler ekleyin.

Performans ve SEO İpuçları

Blog sayfanızın hızlı yüklenmesi ve SEO uyumlu olması için resim optimizasyonu, lazy loading, doğru meta etiket kullanımı ve hızlı hosting önemlidir. Liquid ile dinamik meta etiketleri oluşturmak SEO açısından avantaj sağlar.

Örnek Kodlarla Uygulama

Aşağıda basit bir blog listeleme kodu örneği bulunmaktadır:

{% for article in blog.articles %}
  <article>
    <h2><a href="{% raw %}{% endraw %}{{ article.url }}{% raw %}{% endraw %}">{% raw %}{% endraw %}{{ article.title }}{% raw %}{% endraw %}</a></h2>
    <p>{% raw %}{% endraw %}{{ article.excerpt | strip_html | truncate: 150 }}{% raw %}{% endraw %}</p>
  </article>
{% endfor %}

Bu kod blogdaki tüm yazıları başlıkları ve kısa açıklamaları ile listeler.