Çevrimiçi sipariş düğmesini websitenizde yayınlamak normalde bir kopyala yapıştırma meselesidir.

Websitesi oluşturucunun sınırlamalarına girdiğinizde, özellikle düğmeyi düzeninize ve tasarımınıza en iyi uyacak şekilde özelleştirmek istiyorsanız, işler biraz daha karmaşık olabilir.

Yüzlerce sipariş düğmesi ve bunları işletmelerin websitelerinde nasıl kullandığı zaman içinde gördük. Geri bildirimleriniz sayesinde, sitenize eklemenizi istediğimiz html kodunu sürekli olarak geliştirebildik ve en yaygın websitesi oluşturucularına hitap edebildik.

Bu yazıda, çevrimiçi sipariş düğmenizden en iyi şekilde yararlanmaya yönelik ipuçlarımızı ve nasıl yapacağınızla ilgili bilgileri bir araya getirdik.

Çevrimiçi sipariş düğmenizin fark edilmesini sağlayın

Siparişlerin gerçekleşmesi için websitesi ziyaretçilerinizin düğmeyi fark etmesi ve tıklaması gerekir. En çok online satışlar başka türlü olamaz. Bu en iyi uygulamalar listesini gözden geçirin ve hepsini kontrol ettiğinizden emin olun.

Ana sayfada düğmeyi gösterin:

Sitenin diğer sayfalarını hariç tutmuyoruz, ancak çevrimiçi sipariş düğmenizin veya harekete geçirici mesajınızın ana sayfada bulunduğundan emin olun.

Ayrıca, en üst alana (websitesi açıldığında aşağı kaymadan görünen alana) yerleştirin. Müşterilerinizin, onların siparişlerini gerçekten gördüğünüzden ve siparişlerinin göz ardı edilmeyeceğinden emin olmak için bunu hemen görmesi gerekir.

Ayrıca, birçok gıda müşterisi sayfayı aşağı kaydırma eğiliminde değildir.

Gördüğümüz kötü bir örnek: Düğme yalnızca iletişim sayfasının altına yerleştirilir. Bu, herhangi bir çevrimiçi sipariş alma şansını önemli ölçüde azaltır.

Diğer önemli sayfalarda düğmeyi gösterin:

Websitenizin diğer ilgili sayfalarında (menü, iletişim, en alt bölüm gibi) gösterin. Ziyaretçinin en sık ziyaret ettiği sayfaları bilin ve ona göre yerleştirin.

Düğmeyi öne çıkarın:

Çevrimiçi sipariş düğmesi görünür olmalı ve dikkat çekmelidir (renk / büyüklük / tasarım). Sadece websitenizin kalabalık bir köşesine “atmayın”.

Ona yer verin ve rengin arka plandan ve çevreden ayrıştığından emin olun.

Boyut önemlidir:

Çevrimiçi sipariş düğmenizi sayfadaki diğer düğmelerden veya bağlantılardan biraz daha belirgin hale getirmeniz gerekir.

Ancak abartmamaya dikkat edin. Çok büyük bir düğme, sayfadaki içeriğinizin geri kalanını öldürür.

Eylem odaklı metin:

Müşterinizi istediğiniz hedefe yönlendirmeniz gerekir: çevrimiçi sipariş. Düğmeye basarken, müşteriniz alacağı sonuç hakkında şaşırmamalıdır.

Metniniz davetkar ve bundan sonra ne olacağı konusunda açık olmalıdır.

Örneğin “Menüyü Gör ve Sipariş Ver” veya “Online Sipariş” kullanımı iyi etiketlerdir.

İçlerinde En Önemli Noktayı Tekrar Vurgulayalım: Sipariş tuşu sitenizde üst alanda görünür olmalıdır.
sipariş sistemi websitesinde nerede olmalı

Online sipariş sisteminde, düğmeleri ana sayfada, ekranın üst kısmına yayınlayın.

Sipariş tuşunun yerleştirilmesi online satışlarınızı artırabilir veya kesintiye uğratabilir.

Sipariş tuşu, ana sayfada, ekranın üst kısmında, görünür şekilde, dikkat dağıtıcı başka öğeler olmadan, oldukça görünür bir şekilde yerleştirilmiş olan websitesi, ortalama 60%’lık bir tıklama oranı elde eder.

Bu tuşu, “gizleyen” websiteleri 10% veya daha az bir tıklama oranı elde eder.

Web sitenize özel düğme nasıl eklenir?

Daha önce belirtildiği gibi, düğmeyi eklemek için kodu sayfanızda kopyalayıp yapıştırmanız yeterlidir.

Ancak, websitesi oluşturucularının çoğu bazı kısıtlamalarla gelir. Görsel örneklerimiz aşağıda ve bu website oluşturuculardan birini kullanıyorsanız bize bildirin ve kurulumla ilgili ilave önerilerimizi size yollayalım:

web sitesi oluşturma altyapı platformları

Son zamanlarda, websitesi oluşturucularının sınırlamalarına yönelik bazı iyileştirmeler yaptık.

İşte bazı örnekler:

  • WordPress ile tamamen uyumludur, yani daha fazla eklentiye gerek yoktur. Kodu metin modunda kopyalayıp yapıştırabilirsiniz.
  • Otomatik açma özelliği, özellikle Wix kullanıcıları için yararlıdır. Wix üzerinde çalışıyorsanız, büyük olasılıkla “Menüyü Gör ve Sipariş Ver” düğmesini  yerleştirdiğiniz yeni bir sayfa açan bir düğme oluşturdunuz. Bu harika bir akış değildir – kullanılabilirlik açısından – ve biz bunu düzelttik. Wix talimatları sayfamızda size menüyü otomatik olarak nasıl açacağınızı öğretiyoruz, böylece son gereksiz tıklamayı atlıyoruz.
  • Düğmemiz, herhangi bir sorun yaşamadan aynı sayfaya birden çok kez eklenebilir.
  • Düğme ve çevrimiçi yemek menüsü daha hızlı yüklenir.

Özel kodunuzun en son sürümünü bize sorarak almanızı ve websitenizde güncellemenizi öneririz.

Menüyü Gör ve Sipariş Ver düğmesi nasıl özelleştirilir?

Varsayılan turuncu renkli Menüyü Gör ve Sipariş Ver düğmesinin websitenizde iyi gitmemesi / görünmemesi söz konusu olabilir.

Örneğin renk göze çarpmıyor, boyut yerleşime uymuyor, yazı tipi veya düğme stilinin kendisi diğer web sitesi öğelerinizle eşleşmiyor olabilir.

Bu gibi durumlarda çevrimiçi sipariş düğmesinin görünümünü ve şeklini değiştirmeniz gerekir.

“Kendi işini kendin yap” türünde bir kişi iseniz ancak bununla nasıl başa çıkacağınızı bilmiyorsanız, bu bölümü okumaya devam edin.

Düğme kodunuz şu an benzer görünür (bu örnekte düğme metni İngilizce’dir):

menüyü gör online sipariş ver düğmesi

Düğmenin geçerli görünümü ve hissi class = “glf-button” ile verilir.

Bu sınıfta (class), düğmenin turuncu görünmesini, yazı tipinin beyaz olmasını ve benzeri olmasını sağlayan özellikleri tanımladık.

Düğme stilini şu şekilde değiştirebilirsiniz:

  • glf-düğme sınıfını kendi düğme sınıfınızla değiştirmek
  • İstediğiniz satır içi stil (style inline) tanımlamak

İşte oynamak için bazı özellikler:

onlin sipariş tuşu özelleştirme seçenekleri

İstediğiniz tasarıma ulaşmak için özellikleri bir araya getirin.

Örneğin, aşağıdaki stil:

style=”padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00″

Düğme koduna şu şekilde eklenir:

düğme yazılım kodu

Aşağıdaki sonucu verecektir:

menü ve sipariş tuşu tasarımı

Düğmenin yer aldığı kabındaki (container) konumunu ayarlamak için style özelliğini de kullanabilirsiniz.

Düğmenin yatay olarak ortalanmış ve 100 piksel aşağı üstten nasıl yerleştirileceğine ilişkin bir örnek:

style: “position: absolute; left: 50%; transform: translateX(-50%); top: 100px;”

Son bir ipucu:

Bir parça kodla oynamanıza izin veren güzel bir araç (JS Bin) var.

Adresi: https://jsbin.com/?html,output

Hemen sonucu gösteriyor.

Açın, sol sütunda zaten mevcut olan kodu silin ve kendi düğme kodunuzu yapıştırın. Kodda değişiklik yaptığınızda, sağ sütun otomatik olarak yenilenir.

Bir deneyin, size zaman kazandıracak.

Düğmenizi özelleştirerek eğlenin, ancak akıllıca yapın!

Bu yazının başında konuştuğumuz en iyi pratik uygulamaları lütfen aklınızda bulundurun! Sorularınızı bize iletin.

İşlerinizde kolaylıklar dileriz.

Yazılım Teknik Ekibi | Restoran Ödül – www.restoranodul.com