Shopify'a özel buton nasıl eklenir?

Shopify’da satış yapıyorsanız, CTA butonunuzun tasarımı son derece önemlidir. İster bir promosyon sayfasına, ister VIP bülten kaydına, ister bir satış ortaklığı bağlantısına yönlendirsin, dikkat çeken bir buton sayfanın içinde kaybolan bir butona göre çok daha fazla tıklanır — ve bir mağaza vitrininde daha fazla tıklama daha fazla satış demektir.

Shopify OS 2.0 temaları, Dawn dahil, yerleşik buton blokları sunar, ancak bu butonların nasıl görüneceği konusunda size çok az kontrol verir. Blok; etiketi, bağlantıyı ve stilin dolu mu yoksa çerçeveli mi olacağını ayarlamanıza izin verir, renkler ise global tema ayarlarınızdan gelir. Bu, mağazanızı tutarlı tutar (tema ayarlarının amacı da budur), fakat aynı zamanda öne çıkması gereken bir butonun sitenizdeki diğer tüm butonlar gibi görüneceği anlamına gelir.

Kendi renklerine, hover efektine veya simgesine sahip bağımsız bir buton elde etmek için iki yaklaşımdan birini kullanabilirsiniz. Tema düzenleyicinize bir Özel Liquid bloğu ekleyip HTML ve CSS’i kendiniz yazabilir ya da stillendirmeyi sizin için halleden ve yapıştırmanız için bir yerleştirme kodu veren ücretsiz, barındırılan bir widget kullanabilirsiniz.

Shopify mağazanıza tema kodunu düzenlemeden veya bir geliştiriciye para ödemeden dönüşüm için optimize edilmiş, özel bir CTA butonu eklemek istiyorsanız, bu kılavuz her iki yöntemi kullanarak Shopify’a nasıl buton ekleneceğini anlatıyor.

Watch on youtube

How to Add a Custom Button to Shopify

Seçenek 1: Özel Liquid ve CSS Kullanın

Üçüncü taraf bir uygulama yüklemeden bir Shopify mağaza vitrinine benzersiz bir buton tasarımı eklemenin standart yolu, kodu kendiniz yazmaktır. Shopify’ın tema düzenleyicisi, kendi HTML ve CSS’inizi ekleyebileceğiniz bir Özel Liquid bölümü içerir; böylece temanızın dosyalarını doğrudan düzenlemeden bir buton tanımlayabilir ve tam olarak istediğiniz gibi stillendirebilirsiniz.

Özel Liquid ve CSS kullanarak Shopify’a nasıl buton ekleyeceğiniz aşağıda açıklanmıştır:

1. Shopify yönetici panelinizden, sol taraftaki menüde Online Mağaza bölümüne gidin. Ardından Online Mağaza yanındaki kalem simgesine tıklayın veya ekranda Temayı düzenle öğesine tıklayın.

2. Sol kenar çubuğunda Bölüm ekle öğesine tıklayın, Özel Liquid ifadesini arayın ve seçin. Sağ tarafta kodunuzun gireceği bir metin alanı görünür.

3. Butonunuz için HTML’i, CSS’inizi içeren bir <style> bloğuyla birlikte ekleyin, ardından sağ üst köşedeki Kaydet öğesine tıklayın. Değişiklikleriniz, siz çalışırken önizlemede görünür.

Bu yöntemi kullanırken bir uyarı: Stillendirmeyi kendiniz yazmak, hata yapma riskiyle karşı karşıya kalmanız anlamına gelir. Kapsamlandırılmış seçiciler olmadan yazılan kurallar, sayfadaki diğer öğeleri etkileyebilir ve başlığınıza veya alt bilginize eklenen Özel Liquid, mağazanızın her sayfasında görünür — bu nedenle küçük bir hata, yalnızca stillendirdiğiniz butondan çok daha büyük bir etkiye sahip olabilir. Shopify ayrıca kodu düzenlemeden önce temanızı yedek olarak çoğaltmanızı önerir ki bu da platformun bu riski nasıl gördüğünü yansıtır.

Bir geliştirici tutmak teknik sorunu çözebilir ancak tek bir buton için haklı çıkarması daha zor bir maliyet ekler; özellikle birkaç versiyonu test etmek istediğinizde ve her değişiklik başka bir talep anlamına geldiğinde.

Seçenek 2: Ücretsiz, özelleştirilebilir bir buton widget’ı ekleyin (önerilen)

Tasarım kontrolünü riske girmeden istiyor musunuz? Barındırılan ücretsiz bir buton widget’ı, Shopify’da kendi renkleri, hover durumu ve simgesiyle Özel Liquid’e bir alternatiftir. Butonu görsel bir oluşturucuda özelleştirebilir, yerleştirme kodunu kopyalayabilir ve tema düzenleyicinizdeki bir Özel Liquid bloğuna yapıştırabilirsiniz.

Jotform’un Buton widget’ı, Shopify’ın yerleşik bloğunun sunmadığı stillendirme seçeneklerini sunar. Arka plan, metin ve hover renklerini bağımsız olarak ayarlar, etiketten önce veya sonra bir simge ekler ve köşe yarıçapını, yüksekliği, dolguyu ve gölgeyi düzenlersiniz.

Jotform’un buton widget’ını kullanarak Shopify’a nasıl buton ekleyeceğiniz aşağıda açıklanmıştır: 

1. Jotform Çalışma Alanı sayfanızda Oluştur öğesine tıklayın, Web Sitesi Widget’ı seçeneğini seçin, “Buton” ifadesini arayın ve ardından Widget’ı Kullan öğesine tıklayın.

2. Genel sekmesinin altında buton eyleminizi seçin, istenen bilgileri (e-posta, telefon numarası, URL bağlantısı vb.) girin ve buton etiketinizi yazın. Teklifinizin bağlama ihtiyacı varsa ikinci bir satır veya çevresine metin ekleyin.

3. Stiller sekmesinin altında renklerinizi ayarlayın, bir simgeyi açın ve konumunu seçin, ardından şekli ve boyutu düzenleyin. Düzen sekmesi, butonun satır içi mi yoksa yüzen mi olduğunu ve masaüstünde, mobilde ya da her ikisinde mi görüneceğini kontrol eder.

4. Üst gezinme çubuğundaki Yayınla öğesine tıklayın, ardından sol menüdeki Yerleştir bölümünde Kodu Kopyala öğesine tıklayın.

Platforma özel yerleştirme talimatları için Platformlar öğesine tıklayıp Shopify’ı da seçebilirsiniz.

5. Özel butonunuzu Shopify‘a yerleştirmek için tema düzenleyicinizi açın, sayfa şablonunuzu seçin, Bölüm ekle veya Blok ekle öğesine tıklayın, Özel Liquid seçeneğini seçin, yerleştirme kodunuzu yapıştırın ve sağ üst köşedeki Kaydet öğesine tıklayın. 

Bu seçenekle, butonu doğrudan web sitesi temanızda değil Jotform‘da stillendirdiğiniz için değişiklikleriniz global tema ayarlarınızdan ayrı kalır. Farklı bir renk veya etiketi test etmek, yeniden tema kodunu düzenlemek yerine widget’ı düzenlemek anlamına gelir. Tüm kurulum için web sitesine nasıl buton eklenir konusuna bakın.

Shopify mağazanızı akıllı, sunucusuz widget’larla güçlendirin

Buton, bir geliştirici tutmadan veya başka bir aylık uygulamaya para ödemeden sitenize ekleyebileceğiniz çeşitli özelliklerden yalnızca biridir. Shopify harekete geçirici mesaj alternatifi olarak Jotform’un ücretsiz web sitesi widget’ları dizininde, butonla aynı mağaza eksikliklerini hedefleyen birkaçı da dahil olmak üzere 150’den fazla seçenek bulunur.

Örneğin, bir Duyuru Çubuğu widget’ı, ücretsiz kargo eşiğinizi veya indirim tarihlerinizi her sayfanın en üstüne, alışveriş yapanların ödeme yapmadan önce gördükleri yere yerleştirir. Bir Satın Al Butonu widget’ı, alışveriş yapanları bir satın alma CTA’sıyla doğrudan bir ürüne, sepete veya ödeme URL’sine yönlendirir ki bu da bir kampanya açılış sayfasına veya satın alma sonrası ek satışa uygundur. E-ticaret kategorisinde ise ürün kartları ve fiyatlandırma tabloları bulunur. Ayrıca, müşteri bilgilerini mağazanızla birlikte toplamanıza olanak tanıyan bir Jotform-Shopify entegrasyonu da vardır. 

Her widget, butonla aynı şekilde yerleştirilir, böylece basit bir özellik eklemek istediğinizde her seferinde başka bir uygulama aboneliğine para ödemezsiniz.

Bir e-ticaret markası olarak, zamanınız ve bütçeniz, bir butonun diğerlerinden farklı görünmesi için Özel Liquid yazmaya değil, ürün tedariki ve reklam hunilerinizi iyileştirme gibi şeylere harcanmalıdır. Jotform’un Buton widget’ı, temanıza dokunmadan bir dakikada yeniden stillendirebileceğiniz bir CTA sunar. Bugün ücretsiz deneyin.