Shopify Temasına Kod Değişiklikleriyle Ürün Alt Başlığı Ekleme!

Shopify'da ürün alt başlığı eklemek ister misiniz?

Bunu yapmanın birçok potansiyel faydası vardır. Örneğin, Ikea ürün sayfasına bir göz atın, alt başlıkta Ikea ürünle ilgili en önemli bilgileri (ne işe yaradığı ve hangi malzemelerden yapıldığı) sadece birkaç kelimeye indirgemiştir. 

Ziyaretçiler bir ürün sayfasına girdiklerinde, geri çekilip çekilmeyeceklerine veya daha fazla bilgi edinmek için orada kalıp kalmayacaklarına karar vermeleri genellikle sadece birkaç saniye sürer. Bir bilgi parçası sayfada ne kadar yukarıda yer alırsa, ziyaretçilerin bu ilk taramada onu gerçekten görme olasılığı o kadar artar. Bir ürün alt başlığında en üstte önemli ayrıntıları ve avantajları vurgulayarak, ziyaretçinin ilgisini çekme ve onları bir müşteriye dönüştürme şansınızı artırabilirsiniz.

 

Ürün alt başlığı eklemenin bir yolu, tema dosyalarınızı düzenlemektir. Bunun için öncelikle bir metafields oluşturmanız ve ardından temanızın main-product.liquid dosyasında bu yeni meta alana başvurmanız gerekecek.

Meta alanlar, Shopify'ın varsayılan ayarlarında yer almayan verileri saklamanızı ve görüntülemenizi sağlar. Örneğin, Shopify'da bir ürünün ayarlarını açtığınızda başlık, açıklama, fiyat gibi alanlar bulunur; ancak ürün alt başlığı için böyle bir alan bulunmaz. Bu nedenle, yeni bir meta alan oluşturarak alt başlık için gerekli alanı kendiniz eklemeniz gerekmektedir.

İşte adım adım nasıl yapacağınız:

1. Shopify hesabınıza giriş yapın ve ana kontrol panelinin sol kenar çubuğundaki Ayarlar seçeneğine tıklayın.
2. Mağaza ayarlarınızda Özel veriler bölümünü seçin.
3. Açılan sayfada Meta alan tanımları bölümüne gidin ve Ürünler seçeneğine tıklayın.
4. Sağ üst köşede bulunan Tanım ekle butonuna tıklayın.
5. Yeni oluşturduğunuz meta alanına "Alt Başlık" gibi bir isim verin.
6. Ardından, "Tür seç" bölümünden "Tek satırlık metin" ve "Tek değer" seçeneklerini seçin.
7. Son olarak, değişikliklerinizi kaydedin.

Bu adımları takip ederek, Shopify mağazanızda her ürün için bir alt başlık ekleyebilirsiniz. Şimdi, main-product.liquid dosyasına kod ekleyerek bu meta alanı ürün sayfalarınızda gösterebilirsiniz.

Yeni Meta alanlar oluşturduktan sonra, Shopify kataloğunuzdaki herhangi bir ürüne alt başlık eklemek için şu adımları takip edebilirsiniz:

1. Shopify ana kontrol paneline giriş yapın ve sol kenar çubuğundan Ürünler seçeneğine tıklayın.
2. Alt başlık eklemek istediğiniz ürünü seçin.
3. Ürün ayarları sayfasında Meta alanlar bölümüne gidin.
4. Burada, daha önce oluşturduğunuz "Alt Başlık" alanını göreceksiniz. Bu alana istediğiniz alt başlığı girin.
5. Son olarak, değişikliklerinizi kaydedin.

Alt başlığınızın/metafield'iniz mağazanızın canlı versiyonunda görüntülenebilmesi için, şimdi tema dosyalarınızı düzenlemeniz gerekiyor:

1. Shopify ana kontrol panelinin sol kenar çubuğunda, özelleştirmek istediğiniz satış kanalını seçin.
2. Temanızın yanındaki "…" menüsüne tıklayın ve "Kod düzenle" seçeneğini seçin — bu, Shopify’ın kod editörünü açacaktır.
3. Kod editörünün sol kenar çubuğunda "sections" klasörüne gidin ve "main-product.liquid" dosyasını açın (veya kod editöründeki arama çubuğunu kullanarak bu dosyayı bulabilirsiniz).
4. Alt başlığın doğru şekilde görüntülenebilmesi için, alt başlık kodunu ürün başlığının hemen altına eklememiz gerekiyor. Ürün başlığı kodunun nasıl görüneceği, kullandığınız temaya bağlı olarak değişecektir. Shopify’ın varsayılan Dawn temasında, ürün başlığı kodu aşağıdaki gibi görünür — farklı bir tema kullanıyorsanız, benzer bir kod bulmak için arama yapabilirsiniz:

{%- when 'title' -%}
     <div class="product__title" {{ block.shopify_attributes }}>
          <h1>{{ product.title | escape }}</h1>
               <a href="{{ product.url }}" class="product__title">
                    <h2 class="h1">
                         {{ product.title | escape }}
                    </h2>
               </a>
     </div>

Bu bölümün hemen altına, ürün alt başlığı için aşağıdaki kodu ekleyeceğiz:

{% unless product.metafields.custom.subtitles == blank %}
     <p class ="subtitle mb-4 ">
          {{ product.metafields.custom.subtitles }}
     </p>
{% endunless %}

Değişikliklerinizi kaydetmeyi unutmayın.

Bu kod eklendikten sonra, alt başlıklar, yalnızca alt başlığı olan ürünler için görüntülenecektir. Kodun yazılma şekli sayesinde, metafield’de değeri olmayan ürünler için alt başlık bölümü görünmeyecek, yani alt başlık olmayan ürün sayfalarında boş alanlar oluşmayacaktır. Bu sayede, ürün sayfalarınızda düzen bozulmaz ve şık bir görünüm elde edilir.

 

Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. İyi satışlar diliyoruz! .. 🧑🏻‍💻 😊