Shopify’da Açılır Pencere Nasıl Eklenir

Shopify’da açılır pencere eklemeyi adım adım kolay kılavuzlarla gösteriyoruz; böylece dikkat çekin, listenizi büyütün ve dakikalar içinde satışlarınızı artırın.
ChatGPT’in ne düşündüğünü gör Canlı Uygulama Editörü’nü Açın
Tarafından
How to Add a Popup in Shopify

Shopify mağazanıza bir açılır pencere eklemek, ziyaretçinin dikkatini tam da istediğiniz anda çekmeniz gerektiğinde ele almanız gereken bir adımdır—belki e-posta listenizi büyütmek, sınırlı süreli bir kampanya duyurmak veya kullanıcı siteyi terk etmeden önce özel bir teklif hakkında nazikçe hatırlatmak için. Açılır pencereler, etkileşimi artırmanıza, insanların ilgisini canlı tutmanıza ve ziyaretçilerin geri dönmesini teşvik etmenize yardımcı olur; özellikle ziyaretçiler ihtiyaç duydukları anda göründüğünde etkileşimi güçlendirir.

popup widget is a practical way to handle this. It lets you create, customize, and manage popups right inside your Shopify dashboard, so you don’t have to deal with any complicated code or manual updates. Everything stays up to date automatically, the design fits your branding, and you save time while making sure your visitors see the messages that matter most.

Bu kılavuzda neler bulacaksınız:



  • Adım adım kurulum kılavuzu. Shopify’a bir açılır pencere eklemek için ayrıntılı talimatlar.
  • Alternatif Yöntemler. Uygulama tabanlı ve manuel seçeneklerin karşılaştırılması, artılar ve eksiler.
  • Uzman Kontrol Listesi. Açılır pencere performansı ve uyumluluğu için doğrulanması gereken önemli noktalar.
  • Sorun Giderme Tavsiyeleri. En sık karşılaşılan kurulum ve görüntüleme sorunlarına yönelik çözümler.

Kolaylık için talimatlar net adımlara bölünmüştür; böylece açılır pencerenizi hızlıca kurabilir ve hazır olduğunuzda ayrıntıları ince ayar yapabilirsiniz.

Shopify’da Açılır Pencereyi Hızla Ekleme

Shopify sitenize açılır pencere eklemenin dört basit adımlık kısayolu burada.

  1. Elfsight’in düzenleyiciisini açın ve bir şablon seçin.
  2. Açılır pencere aracını özelleştirin.
  3. Ücretsiz olarak web sitene eklemek için tıklayın ve kodu kopyalayın.
  4. Shopify sitenizin arka ucuna yapıştırın.

Canlı düzenleyicide kendi Shopify açılır pencerenizi oluşturup önizleyin!

Bir açılır pencereyi biçimlendirmenin ne kadar kolay olduğunu gördünüz. İhtiyaçlarınızı karşılamak için widget’in neler yapabildiğini aşağıda bulacaksınız:

Ana Özellik Neden Önemli
Her türlü açılır pencere türü: bildirimler, indirimler, e-posta yakalama, çıkış niyeti Hedef kitlenize ve kampanyanıza uygun mesajı veya teklifi seçin ki her açılır pencere ilgili olsun.
Tetikleyiciler ve Koşullarla Kesin Hedefleme Mesajınızın fark edilmesi için açılır pencereleri doğru zamanda ve doğru ziyaretçilere gösterin.
Tasarımın Tam Özelleştirilmesi: Düzen, Renk, Görseller ve Mesajlar Açılır pencereleri markanıza uygun hale getirerek sitenizin görünüm ve hissini tutarlı kılın.
Kod Gerektirmeyen Canlı Düzenleyici — Anında Önizleme ve Gömme Kodu Açılır pencereleri hızlıca kurun, değişiklikleri anında görün ve teknik sıkıntılar yaşamadan yayınlayın.
Hazır Şablonlar ve Sıfırdan Oluşturma Esnekliği Bir şablonla başlayarak zaman kazanın veya herhangi bir kampanya için benzersiz bir açılır pencere oluşturun.

Bu özellikler, Elfsight’in açılır pencere widget’ının ziyaretçilerinizle etkileşim kurmanıza ve sonuç elde etmenize yardımcı olmasının birkaç yoludur. Sunulan tüm özellikleri görmek için açılır pencere özellikleri sayfasını inceleyin. Ardından, widget’ı web sitenize bağlamak için adım adım ilerleyelim.

Shopify Siteniz İçin Açılır Pencere Ekleme ve Özelleştirme Kapsamlı Rehberi

Bu bölüm, Shopify üzerinde açılır pencerenizin oluşturulması, özelleştirilmesi ve gömülmesi için adım adım kılavuzlar sunar; farklı hedef kitleleri veya dönüşüm hedefleri için yararlı ipuçları içerir.

1. Bir Şablon Seçin

Açılır Pencere Düzenleyicisini açtığınızda ilk adım bir şablon seçmektir. Elfsight, farklı pazarlama hedefleri için uygun olan 20’den fazla profesyonel tasarımlı açılır pencere şablonu sunar — özel teklifler ile satışları artırmak, bülten aboneleri toplamak veya yeni ürün lansmanlarını duyurmak için. Her şablon, kurulumunuzu hızlandırmak için ilgili içerik blokları ve mesajlarla önceden yapılandırılmıştır.

Choose Popup template

Ana dönüşüm hedefinizle uyumlu olan şablonu seçin ve bir sonraki adıma geçmek için “Bu şablonla devam et” düğmesine tıklayın. İhtiyaçlarınıza göre daha da özelleştirebilirsiniz.

2. İçerik Bloklarını Ekle ve Özelleştir

Açılır pencerenizi Elfsight’in esnek içerik bloğu sistemiyle oluşturmak için Builder sekmesine geçin.

Add content blocks to popup

Widget, 12’den fazla özelleştirilebilir blok türünü destekler; kod yazmadan son derece hedefli açılır pencereler oluşturmanıza olanak tanır:
  • Metinler ve Başlıklar – Başlıklar, ana metin ve açıklayıcı kopyalar
  • Görüntüler ve Videolar – Ürün fotoğrafları, tanıtım görselleri veya gömülü video içerikleri yükleyin
  • Düğmeler ve Eylem Çağrıları – Belirli URL’lere yönlendiren veya aksiyonları tetikleyen düğmeler
  • Formlar – E-posta kayıt alanları, iletişim formları veya anket öğeleri
  • Coupons – Display discount codes that visitors can copy with a single click
  • Boşluklar ve Ayırıcılar – İçeriği daha iyi okunabilirlik için görsel olarak düzenleyin
  • iFrame ve Özelleştirilmiş HTML – Gelişmiş kullanım durumları için harici içerik veya özel kod ekleyin
💡 İpucu: Açılır pencerenizi tek bir hedeften odaklayın. E-posta toplamaya ya da indirim duyurusu yapmaya odaklanın; netlik dönüşümü artırır. Çok fazla öğeyle sayfayı karıştırmayın — maksimum etki için açılır pencerenizi 3–5 blokla sınırlandırın.

3. Görünümü ve Markalaşmayı Özelleştirme

Arka Plan alanına tıklayın ki açılır pencereniz web sitenizin marka kimliği ve tasarım sistemiyle tam uyumlu olsun. Aşağıdakilerden birini seçebilirsiniz:

  • Düz Renkler – Mevcut renkler arasından seçin veya özel bir renk belirleyin, opaklığı ayarlayın
  • Gradyan Arka Planı – Gradyan renklerinizi ve karıştırma yönünüzü ayarlayın
  • Görüntü Yükle – Arka plan olarak kullanılacak bir resmi medya dosyalarınızdan ekleyin
  • Video Bağlantısı – YouTube veya Vimeo URL’sini yapıştırın ve arka plan olarak bir video ayarlayın
💡 Tip: CTA düğmesi için kontrast renkler kullanın ki arka planda öne çıksın. Açılır pencerelerinizin renklerini masaüstü ve mobilde test edin; tüm cihazlarda görünürlük ve okunabilirlik için.

Customize popup appearance

Görsel düzenleyici, tüm özelleştirmelerinizin canlı önizlemesini sunar; böylece yayımlamadan önce açılır pencerenizin tam görünümünü görebilirsiniz. Gelişmiş marka talepleri için Elfsight ayrıca piksel mükemmelliği için Özelleştirilmiş CSS desteği sağlar.

3. Açılır Pencere Düzeninizi Seçin

Web sitenizde açılır penceresinin nasıl görüneceğini seçmek için Layout sekmesini açın. Elfsight Popup, farklı kullanım senaryoları ve kullanıcı deneyimleri için tasarlanmış üç güçlü düzenleme seçeneği sunar:

  • Açılır Pencere (Merkez) – Geleneksel merkezi konumda açılır pencere, sayfa içeriğinizin üzerinde yarı saydam bir arka plan oluşturur. Yüksek öncelikli mesajlar, hoş geldiniz teklifleri veya hemen dikkat gerektiren kritik duyurular için idealdir
  • Kaydırmalı – Ekranın köşesinden içeri kayan bir açılır pencere, sayfa içeriğini tamamen engellemeden görünür kalır. Çıkış niyeti teklifleri veya kullanıcı deneyimini saygılı bir şekilde yakalamak için idealdir.
  • Panel – Ekranın sol veya sağ kenarında konumlanan özel bir panel. Sürekli mesajlaşma veya adım adım kullanıcı etkileşimini sağlayan çok adımlı formlar için mükemmel
Configure popup layout
💡 İpucu: Zaman duyarlı teklifler veya acil CTA’lar için modal düzenler en iyi dönüşümü sağlar. Slide-in düzenler çıkış niyetiyle açılan pencereler için iyi çalışır. Ziyaretçilerin kendi hızlarında etkileşime girebilecekleri acil olmayan bildirimler için Panel düzenlerini kullanın.

Açılır pencerenizin boyutlarını (genişlik, yükseklik ve hizalama) de özelleştirebilir, kapatma düğmesini ekleyip kaldırabilir ve marka kimliğinize uygun arka plan örtücüsünün renk veya görselini ayarlayabilirsiniz.

4. Tetikleyicileri ve Görüntüleme Davranışını Ayarlayın

Ayarlar sekmesini açın ve açılır pencerenizin ne zaman ve nasıl görüneceğini belirleyin. Burada Elfsight’in hassas hedefleme yetenekleri gerçekten öne çıkıyor ve doğru mesajı doğru zamanda göstermenizi sağlıyor. Açılır Penceremiz, kullanıcı davranışına dayalı olarak açılır pencerenizi tetiklemek için 6 gelişmiş tetikleyici sunar:

  • Sayfa Yüklendiğinde – Sayfa yüklemesi tamamlandığında hemen görüntülenir. Hoşgeldin iletileri veya zaman açısından kritik duyurular için mükemmel.
  • Sayfa Üzerinde Geçen Zaman – Ziyaretçi sayfada belirli bir saniye sayısına ulaştığında tetiklenir. İçeriğinizle etkileşime girdiğinizde ideal olarak kabul edin.
  • Kaydırma Yüzdesi (%) – Ziyaretçiler sayfadaki belirli bir yüzdeye kaydırdığında etkinleştirin (ör. %50 veya %75). İçerik etkileşimi sonrası dikkat çekmek için etkilidir.
  • Elemente Kaydırıldığında Göster – Sayfanızdaki belirli bir öğeyi geçtiğinizde görüntülenir. İlgili ürünleri veya özel teklifler için-stratejik içerik noktalarında mükemmeldir
  • Tıklama ile – Ziyaretçiler belirli bir düğmeye veya bağlantıya tıkladığında açılır pencereyi gösterin. “Daha Fazla Bilgi” düğmeleri veya ayrıntılı ürün bilgileri için harika
  • Çıkış Niyeti – Kullanıcı imlecini sekmeyi kapatmak ya da sayfadan ayrılmak üzere hareket ettirdiğinde tetiklenir. Sepet terkini önlemek veya özel teklifler için nihai dönüşüm fırsatı
Set popup triggers
💡 İpucu: Birden çok tetikleyici aynı anda etkinleştirilebilir — ilk karşılanan koşul açılır pencereyi tetikler. Örneğin, Sayfada Geçirilen Zaman (30 saniye) ile Çıkış Niyeti’ni birleştirerek ayrılmak üzere olan etkileşimli ziyaretçileri yakalayın.

5. Görünüm Sıklığını ve Hedeflemeyi Yapılandırın

Ayarlar sekmesinde kalın ve açılır pencerenizin erişimini optimize etmek için frekans, sayfa hedefleme ve cihaz hedeflemesini ayarlayın:

  • Görüntüleme Sıklığı — Açılır pencerenizin ne sıklıkla görüneceğini belirtin: her seferinde, kapatılana kadar, bir kez, her gün veya her hafta.
  • Sayfa Hedefleme – Açılır pencerenin hangi sayfalarda görüneceğini belirtin veya belirli sayfaları hariç tutun. Ürün sayfalarında yalnızca özel teklifler gösterin veya ödeme sayfalarında açılır pencereleri gizleyin
  • Cihaz Hedefleme – Açılır pencerenin masaüstü, mobil, tablet veya tüm cihazlarda görünüp görünmeyeceğini seçin. Küçük ekranlarda farklı kullanıcı deneyimleri için optimize edin
💡 İpucu: En iyi UX için “Bir kez göster” veya “Her gün göster” frekans ayarlarını kullanın. Bu, açılır pencere yorgunluğunu önlerken ziyaretçilere farklı oturumlarda ulaşma şansı verir.

6. Kurulum Kodunu Al

Popupınız tamamen yapılandırılıp test edildikten sonra, “Web Sitesine Ekle” düğmesine tıklayın — benzersiz kurulum betiğiniz ile bir açılır pencere görünecektir. Bu tüm kod parçacığını kopyalayın; sitenize widget’i gömmek için kullanacaksınız.

Copy popup installation code

7. Shopify’a Açılır Pencere Ekle

Mağazanızda widget’in görünmesini istediğiniz konuma uygun yöntemi aşağıdan seçin:

Belirli Sayfa — Çevrimiçi Mağaza 2.0

  1. Shopify yönetim panelinde Satış Kanalları → Çevrimiçi Mağaza → Temalar yolunu izleyin ve Özelleştir‘e tıklayın.
  2. Görsel düzenleyicinin üstündeki açılır menüden hedef sayfayı seçin.
  3. Bölüm Ekle’ye tıklayın ve Özel Liquid’i seçin.
  4. Elfsight snippet’inizi Özelleştirilmiş Liquid alanına yapıştırın ve Kaydet.

Belirli Sayfa — Vintage Temalar

  1. Shopify Yönetimi panelinde Online Store → Themes → Customize bölümüne gidin.
  2. Üstteki açılır menüden düzenlemek istediğiniz sayfayı seçin.
  3. Şunu tıklayın: Bölüm Ekle → Özel İçerik. Gerekirse Özel İçerik bloğu içinde Blok Ekle → Özel HTML kullanın.
  4. Gömme kodunuzu HTML alanına yapıştırın, gerekirse konteyner genişliğini 100% olarak ayarlayın ve ardından Kaydet düğmesine tıklayın.

Tüm Sayfalar (site genelinde)

  1. Shopify yönetici panelinde menüsüne tıklayın ve Kodu Düzenle seçeneğini seçin.
  2. Layout → theme.liquid
  3. Kodu kapanış etiketinden önce yapıştırın ve Kaydet düğmesine tıklayın.

Ürün Sayfaları

Ürün açıklamasına ekleme
  1. Ürünler bölümüne gidin ve düzenlemek için ürünü açın.
  2. HTML düzenleyicisini açmak için </> simgesine tıklayın, parçacığı yapıştırın ve Kaydet düğmesine tıklayın.
Tüm Ürün Sayfalarına Ekleme
  1. Shopify yönetiminde şu adımlara gidin: Çevrimiçi Mağaza → Temalar → İşlemler → Kodu Düzenle.
  2. Sections → main-product.liquid
  3. Elfsight kodunu görünmesini istediğiniz yere yapıştırın ve Kaydet düğmesine tıklayın.
Pro Check: Mağazanızı kurduktan sonra yenileyin. İçerik widget görünmüyorsa, tam gömme kodunu HTML/Liquid alanına yapıştırdığınızdan emin olun (zengin metin düzenleyiciye değil).

Widget eklemenin alternatif yollarını keşfetmek isterseniz, aşağıdaki bölüm Shopify sitenizde açılır pencereleri göstermenin farklı yaklaşımlarını anlatacaktır.

Shopify’da Açılır Pencereler Nasıl Eklenir

Shopify sitenize açılır pencere eklemenin birkaç yerleşik ve resmi yöntemi var; ancak her biri, Elfsight gibi özel bir açılır pencere aracı kullanmanın getirdiği bazı önemli tavizlerle geliyor.

Shopify’ın Yerleşik Tema Düzenleyicisi

Shopify’in tema düzenleyicisi, basit duyuru veya haber bülteni abonelik formları için temel açılır pencere işlevselliği sunar.

  1. Tema Düzenleyicisini Açın. Shopify yönetim panelinize gidin ve önce “Çevrimiçi Mağaza”yı, sonra “Temalar”ı seçin ve “Özelleştir”e tıklayın.
  2. Bir Bölüm veya Uygulama Bloğu Ekle. Açılır pencerelerin desteklendiği yeni bir bölüm veya blok eklemeyi seçin; örneğin haber bülteni açılır penceresi.
  3. Popup veya Duyuru Özelliğini Seçin. Temanız buna destek veriyorsa yerleşik açılır pencere veya duyuru çubuğu seçeneğini kullanın.
  4. İçerik ve Görünümünü Özelleştir. Tema tarafından sunulan metinleri, görselleri ve stil seçeneklerini düzenleyin.
  5. Değişiklikleri Kaydet ve Yayınla. Değişikliklerinizi önizleyin ve açılır pencerenin canlı olması için yayımlayın.

Shopify’in resmi yardım belgelerinde daha fazla ayrıntı mevcut.

Shopify Liquid Kodu ile Özelleştirilmiş Açılır Pencereler

Shopify, tema Liquid dosyalarını düzenleyip özel HTML, CSS ve JavaScript ekleyerek kendi özel açılır pencerelerinizi oluşturmanıza olanak tanır.

  1. Tema Koduna Erişin — “Çevrimiçi Mağaza”ya gidin, ardından “Temalar” ve tıklayın“Kodu Düzenle”.
  2. Açılır Pencere İçin HTML Ekle. İlgili tema dosyasına, örneğin theme.liquid, bir açılır pencere konteyneri ve içeriğini ekleyin.
  3. Stil İçin CSS Ekle. Temanızın stil sayfasına özel CSS ekleyerek açılır pencereyi biçimlendirin.
  4. Davranış için JavaScript ekleyin. Açılır pencerenin gösterim mantığını zamanlama veya düğme eylemleri gibi durumlar için JavaScript yazın.
  5. Test Et ve Yayınla. Web sitesindeki değişikliklerinizi kontrol edin ve memnun kaldığınızda yayınlayın.

Daha fazla bilgi Shopify’in geliştirici kaynaklarında bulunmaktadır.

Shopify Email Uygulaması Açılır Pencere Özelliği

Shopify Email uygulaması, liste oluşturma için etkinleştirilebilen temel bir açılır pencere kayıt formu içerir.

  1. Shopify Email Uygulamasını Yükleyin. Shopify yönetim panelinizden Shopify Email uygulamasını ekleyin.
  2. Formlar Bölümüne Gidin. Uygulama içindeki Formlar veya Kayıt Formları alanına gidin.
  3. Açılır Formu Etkinleştir. Açılır kayıt formu özelliğini etkinleştirin.
  4. Alanları ve Mesajı Özelleştir. Form alanlarını, eylem çağrısı ve görünümü düzenleyin.
  5. Etkinleştir ve İzle.

Daha fazla bilgi için Shopify Email uygulaması yardım bölümüne bakın.

Bu Açılır Pencere Ekleme Yöntemleri Nasıl Karşılaştırılır?

Yöntem Önemli Artı 👍 Önemli Eksiklikler 👎
Elfsight Açılır Pencere Widget’ı Yüksek düzeyde özelleştirilebilir tasarımlar ve gelişmiş tetikleyiciler. Kontrol paneline erişim için hesap gerekir.
Shopify Tema Editörü Kodlama gerekmez, kolay kurulum. Sınırlı açılır pencere türleri ve temel tetikleyici seçenekleri.
Özel Shopify Liquid Kodu Açılır pencere tasarımı ve tetikleyicileri üzerinde tam kontrol. Kodlama becerisi gerekir ve güncellemek zaman alır.
Shopify E-posta Uygulaması Açılır Penceresi Listeyi büyütmek için basit ve ücretsiz e-posta yakalama. Sadece temel e-posta kaydı için çalışır, promosyonel açılır pencereler yok.

Açılır pencerenizin sorunsuz çalışması ve Shopify sitenizde harika görünmesi için pratik ipuçları mı arıyorsunuz? Sıradaki bölümde uygulanabilir ipuçlarını okumaya devam edin.

Elfsight ekibinin binlerce sitede açılır pencere uygulama ve test etme deneyiminden, kurulumun küçük ayrıntılarının performansı belirlediğini biliyoruz. Açılır Pencere Aracınızdan en iyi verimi almak için işte en önemli önerilerimiz.

  1. Her açılır pencere için belirli bir hedef belirleyin. Elektron postaları yakalamak mı, sepet terk etmeyi azaltmak mı, bir indirim tanıtmak mı yoksa özelleştirmeye başlamadan önce ana mesajı iletmek mi istediğinize karar verin.
  2. Doğru tetikleyiciyi ve zamanı seçin. Özel teklifler için çıkış niyeti veya kaydırma derinliğini kullanın; yeni ziyaretçiler için açılır pencereleri geciktirin ve etkileşimi yüksek tutmak için hemen kesintiye yol açmaktan kaçının.
  3. Hedefleme kurallarıyla hedef kitlenizi bölümlendirin. Açılır pencerenizin hangi cihaz türünde, belirli sayfalarda veya kullanıcı eylemlerine göre görünmesini ayarlayın; böylece ilgili kalır ve kullanıcıyı yormadan etkileşimi artırırsınız.
  4. Markanıza uygun ve dikkat dağıtıcı olmayan bir tasarım sürdürün. Pop-up renklerini, yazı tiplerini ve görselleri markanızla uyumlu hale getirin. Mesajınızın net ve harekete geçirici olmasını sağlamak için rekabetçi öğeleri sınırlandırın.
  5. Hız için hazır şablonları kullanın, ardından ince ayar yapın. Kullandığınız duruma yakın bir şablonla başlayın, ardından kampanyanızın ihtiyaçlarına uygun olacak şekilde düzeni ve içeriği ayarlayın.
  6. Tüm cihazlarda yanıt verebilirliği önizleyin ve test edin. Canlı düzenleyicinin gerçek zamanlı önizlemesini kullanarak açılır penceresinin masaüstü, tablet ve mobilde nasıl göründüğünü ve nasıl çalıştığını kontrol edin.
  7. Etkileşimli öğeleri akıllıca entegre edin. Hedefinizi desteklediği alanlarda formlar veya kopyalanabilir kupon kodları ekleyin ve kullanıcı deneyimini basit tutun.
  8. Frekans ve zamanlama sınırlarını ayarlayın. Geri dönen ziyaretçiler için açılır pencerelerin görünme sıklığını ayarlayın ve rahatsızlık ile banner körlüğünü önleyin.
  9. Web sitenizde sorunsuz gömülü çalıştığını doğrulayın. Hızlı gömme kodunu kullanın ve CMS veya web sitesi oluşturucunuzda konumlandırmayı iki kez kontrol edin ki açılır pencere beklediğiniz gibi görününsün.

Sonraki bölümde, bir işletmenin sınırlı süreli teklifi vurgulamak için Popup Widget ekleyerek ana sayfasından e-posta listenizi nasıl büyüttüğünü gösteren gerçek bir senaryo üzerinden ilerleyeceğiz.

Ziyaretçileri Kesintisiz Yönlendiren Popup Widget

Let’s Go Peak District, Peak District’in cazibe merkezlerini, konaklama seçeneklerini ve deneyimlerini gezginlerle buluşturan kapsamlı bir turizm rehberi olarak, ziyaretçilere sayfa düzenini bozmayacak veya kullanıcı deneyimini etkilemeyecek önemli bilgileri iletmenin bir yoluna ihtiyaç duydu.

Elfsight Öncesi

Kritik UX zorluklarıyla mücadele eden ekip:

  • Statik sayfa düzenleri ana promosyon veya bilgilendirme mesajları için yer bırakmıyordu.
  • Etkinlikler, özel özellikler ve hizmetlerle ilgili önemli güncellemeler sayfa içeriği arasında kayboluyordu.
  • Özel açılır pencere çözümleri geliştirmek için kod bilgisi ve sürekli bakım gerekir.
  • Genel bildirim sistemleri, premium turizm sitesi deneyimini bozdu.

Çözüm: Elfsight Açılır Pencere Widget’ını Uygulama

Phil, kullanıcı yolculuğunda kritik anlarda önemli bilgileri göstermek için Elfsight Popup widget’ını ana sayfaya entegre etti. Açılır pencerenin, sitenin premium estetiğine doğal bir uyum sağlaması amacıyla tasarlandı — doğru zamanda görünür ve rahatsız edici ya da agresif hissettirmez.

Popup Use Case Example

Pop-up stratejisi, hedefli tetikleyiciler ve görüntüleme kurallarını içeriyordu; pop-up’lar yalnızca belirli ziyaretçi segmentleriyle alakalı olduğunda ve değer kattığı sayfalarda görünmesi için ayarlandı. Bu hedefli yaklaşım, gezginlerin en çok katılım gösterecekleri anda yeni cazibe merkezleri veya mevsimsel deneyimler hakkında bilgi edinmelerini sağladı.

Gerçek Sonuçlar

Elfsight Popup aracını uyguladıktan sonra:

  • Ziyaretçi Katılımı Artışı: Stratejik açılır pencere konumlandırması, öne çıkan cazibe merkezleri ve hizmetler üzerinde tıklama oranlarını artırdı; ziyaretçileri rahatsız etmeden.
  • Daha İyi Bilgi Mimarisi:
  • Geliştirilmiş Marka Algısı: Profesyonel açılır kutu tasarımı turizm platformunun algılanan kalitesini yükseltti
  • Tasarım Bozulmaz: Geleneksel statik afişlerden farklı olarak açılır pencereler bağlama göre görünür, temiz sayfa düzeni ve görsel hiyerarşiyi korur
  • Kolay A/B testi: Pop-up mesajları ve zamanlamaları dönüşüm ve etkileşimi optimize etmek için hızla ayarlanabilir

Geniş Perspektif: Çok Kanallı Turizm Pazarlaması

“İletişim Formları’nı yaygın şekilde kullanıyoruz ve Yorum widget’ları ya da Instagram Akışları’nı upsell olarak ya da daha yüksek ücretli liste paketlerimizle birlikte satıyoruz. Bu gerçekten, gerçekten iyi çalışıyor.”

Phil Sproson, Let’s Go Peak District
Event Calendar Use Case Example

Pricing Table to transparently display advertising packages, Event Calendar to showcase upcoming Peak District activities, and Contact Form to capture tourism business inquiries. By combining these tools, the platform transformed into an interactive ecosystem where travelers find inspiration, discover experiences, and tourism businesses increase their visibility.”>Let’s Go Peak District’in Açılır Pencere kullanımı, daha geniş bir stratejinin yalnızca bir bileşeniydi; bu strateji, reklam paketlerini şeffaf bir şekilde sergilemek için Fiyatlandırma Tablosu, Peak District’teki yaklaşan etkinlikleri sergilemek için Etkinlik Takvimi ve turizm işletme taleplerini yakalamak için İletişim Formu içeriyordu. Bu araçların bir araya gelmesiyle platform, gezginlerin ilham bulduğu, deneyimleri keşfettiği ve turizm işletmelerinin görünürlüğünü artırdığı etkileşimli bir ekosistem haline geldi.

🎯 Çıkarım: Kullanıcı deneyimini gözeten stratejik pop-up’lar dönüşüm için güçlü araçlardır. Turizm siteleri için doğru anda ilgili cazibe noktalarını, mevsimsel deneyimleri veya özel teklifleri gösteren pop-up’lar, sürtüşmeye yol açmadan anlamlı etkileşim sağlar.

Shopify Açılır Pencere Sorunları ve Pratik Çözümler

Shopify sitesine açılır pencere eklemek genelde basittir, ancak gerçek dünya deneyimi kullanıcıların kurulum sonrası açılır pencerelerin görünmemesi ve bazı cihazlarda yerleşim sorunlarıyla karşılaşabileceğini gösteriyor. Gelin bu sorunları birlikte çözelim:

Neden kodu yükledikten sonra açılır pencereniz görünmüyor?

Açılır pencere kodunun tema.liquid dosyasındaki kapanış etiketinden hemen önce yapıştırıldığından ve tema kaydedilip yayımlandığından emin olun. Açılır penceresinin ayarlarında görüntüleme kurallarının hedeflemek istediğiniz sayfalara ve cihazlara uyduğunu iki kez kontrol edin. Uygulama gömmesi kullanıyorsanız, gömmenin tema özelleştiricisinde etkin olduğundan emin olun.

Açılır pencereniz ödeme veya gezinme düğümlerinin üzerinde kaplıyor. Üst üste gelme sorunlarını nasıl giderim?

Açılır pencerenizin ayarlarında z-index değerini gerektiğinde ana öğelerin üzerinde ya da altında duracak şekilde ayarlayın. Ayrıca tema düzeninizle daha iyi uyum sağlamak için konum seçeneğini değiştirin (ör. modalden alt çubuk’a geçin).

Neden açılır pencere masaüstünde çalışırken mobilde çalışmıyor?

Widget ayarlarını cihaz hedeflemesi için kontrol edin ve mobilin etkin olduğundan emin olun. Bazı açılır pencereler varsayılan olarak yalnızca daha büyük ekranlarda gösterilecek şekilde ayarlanır; gerekirse görüntüleme koşullarını düzenleyin. Sadece masaüstünüzün mobil önizlemesini değil, gerçek bir mobil cihazda test edin.

Açılır pencereniz boş görünüyorsa veya stilleri bozulmuşsa ne yapmalısınız?

Bu durum, tema CSS’sinin açılır pencereyle çakışması veya kodun yanlış yere yapıştırılması durumunda ortaya çıkabilir. Kodu tema.liquid dosyasını daha yukarı taşıyın ve önbelleğinizi yenileyin. Tema yakın zamanda güncellendiyse, açılır pencere kodunuzu geri yükleyip stilini yeniden kontrol edin.

Tarayıcı uzantıları veya engelleyiciler Shopify açılır pencerelerini gizleyebilir mi?

Evet, reklam engelleyiciler ve gizlilik script’leri açılır pencerelerin yüklenmesini engelleyebilir. Bu sorunun gerçekten bu mu olduğunu anlamak için uzantılar kapalı bir gizli pencereyle sitenizi test edin. Eğer sorun buysa, kullanıcılarınıza alan adınızı veya açılır pencere hizmetinin alan adlarını beyaz listeye eklemelerini söyleyin.

Bu çözümleri denedikten sonra hâlâ sorun yaşıyorsanız, daha hedefli rehberlik için resmi Elfsight yardım merkezi ve destek kanallarını inceleyin.

Sorular veya Fikirler?

Bu kılavuzun Shopify sitenize açılır pencereler eklemeye başlamak için sağlam bir temel sunmasını umuyoruz. Ziyaretçilerinizin deneyimini iyileştirmeye odaklanıyoruz; bu yüzden geri bildirim, fikir veya yaratıcı açılır pencere çözümleri paylaşmak isterseniz duymak isteriz. Güncellemeler ve sohbetler için Elfsight ekibiyle X, Facebook veya LinkedIn üzerinden bizimle iletişime geçin.

Makale tarafından
Yapay Zeka İçerik Uzmanı
Kristina, Elfsight ve Beamtrace’de Yapay Zeka konularını ele alıyor: yapay zeka sohbet botları, LLM görünürlüğü ve Yapay Zeka’nın arama ile müşteri deneyimini nasıl yeniden şekillendirdiği üzerine yazıyor – gerçekten işe yarayacak çözümler arayan web sitesi sahipleri ve pazarlama ekipleri için pratik görüşlerle.