Sonsuz kaydırmalı banner oluşturma

Sonsuz kaydırmalı banner, içeriği bir haber bandı gibi sağdan sola sürekli dönen bir çubuktur. Tekrarlayan kampanyalar, ücretsiz kargo duyuruları veya müşterilerin fark etmesini istediğiniz kısa duyurular için kullanın.

Not

Sonsuz kaydırmalı banner’ın tek bir içerik bölümü vardır; Add Group seçeneği bulunmaz. Birbiri ardına dönüşümlü gösterilen birden çok mesaja ihtiyacınız varsa bunun yerine temel banner kullanın.

1. Banners sayfasını açın

   Shopify yönetici panelinizde Sami Product Labels uygulamasını açın, uygulama kenar çubuğunda Extra Features’a tıklayın, ardından Banners sekmesine geçin.

   

   Banners’ı Sami Product Labels kenar çubuğundan açın.

2. Create banners’a tıklayın, ardından Infinite Scroll’u seçin

   Create banners’a tıklayın. Select Type iletişim kutusunda, banner içeriğini kesintisiz kayma efekti için sonsuz döngüyle tekrarlayan tür olan Infinite Scroll’un yanındaki Select’e tıklayın.

   

   Haber bandı tarzı bir çubuk oluşturmak için Infinite Scroll’u seçin.

3. Banner’a ad verin

   Tam ekran düzenleyici Design sekmesinde açılır. Önizlemenin üzerindeki ad alanında New Banner yazısını en fazla 50 karakterlik bir adla değiştirin. Bu ad yalnızca dahili kullanım içindir ve müşterilere hiçbir zaman gösterilmez.

   Adın yanında ayrıca bir dil seçici, masaüstü ve mobil önizleme düğmeleri ile Active / Draft durum anahtarı bulunur.

   

   Önizlemenin üzerindeki araç çubuğunda banner adı, dil, önizleme cihazı ve durum yer alır.

4. Kayan içeriği düzenleyin

   Section 1, ✨ Free ship on order $40+ ✨ gibi örnek metin içeren tek bir Description öğesiyle başlar. Ayarlarını sağda açmak için ona tıklayın:

   • Content: kalın, italik, altı çizili, emoji, hizalama ve HTML görünümü (</>) sunan zengin metin düzenleyicisi. Dil çipi hangi dili düzenlediğinizi gösterir.
   • Text: yazı tipi Size ve Color.
   • Padding ve Margin: öğenin çevresindeki boşluk, piksel cinsinden.

   Döngüye daha fazla öğe eklemek için Add element’e tıklayın: Message, Heading, Line break, Button, Countdown veya Image. Sıralarını değiştirmek için bir satırın solundaki tutamacı sürükleyin.

   

   Çubukta dönen öğeyi düzenleyin veya diziye daha fazlasını ekleyin.

5. Çubuğun stilini belirleyin

   Style panelinde:

   • Background Type: Single Color, Gradient Color veya Pattern Image’ı seçin. Sonsuz kaydırmalı banner’larda varsayılan Pattern Image’dır; döşemeyi değiştirmek için Change Image’ı, temizlemek için Remove’u kullanın.
   • Font Style: yazı tipini, kalınlığı ve varsayılan metin rengini ayarlayın.
   • Padding: çubuğun iç boşluğunu belirleyin.

   Not

   Desen görselleri PNG, JPG veya SVG olmalı, en fazla 5 MB ve 512 × 512 px boyutunda olmalıdır.

6. Kapatma düğmesi ekleyin veya çubuğu tıklanabilir yapın

   Her iki seçenek de Button panelinde yer alır ve varsayılan olarak kapalıdır:

   • Müşterilerin çubuğu kapatabilmesi için üzerine bir “x” yerleştirmek üzere Include Close Button’ı işaretleyin. İki alan görünür: Color ve Hover Color.
   • Tüm çubuğu bağlantıya dönüştürmek için Bar Clickable’ı işaretleyin. Link URL alanı görünür; hedef adresi girin ve bağlantıyı yeni sekmede açmak için yanındaki anahtarı kullanın.

   

   Her onay kutusunu etkinleştirmek ayarlarını gösterir: kapatma düğmesi renkleri veya bağlantı URL’si.

7. Kaydırma hızını ve zamanlamayı ayarlayın

   Animation panelindeki dört alanın tümü saniye cinsindendir:

   Alan	Neyi kontrol eder
   Scroll speed	Tek bir tam döngünün ne kadar sürdüğü. Daha yüksek bir sayı daha yavaş kaydırır.
   Disappear After	Çubuğun gizlenmeden önce ekranda ne kadar kalacağı.
   Interval Between Bar Display	Çubuğun yeniden görünmeden önceki bekleme süresi.
   Time For The Bar To Fade In	Belirme animasyonunun süresi.

   Not

   Bu davranışı devre dışı bırakmak için ilgili alanı 0 bırakın. Örneğin Disappear After = 0 ayarı, müşteri kapatana kadar çubuğu görünür tutar.

   

   Scroll speed, bir döngünün süresini belirler; bandı yavaşlatmak için değeri artırın.

8. (İsteğe bağlı) Özel CSS ekleyin

   Custom CSS (Developer Zone) kutusuna kendi CSS’inizi yazmak için Advance Section’ı açın. Altındaki CSS reference listesi, sonsuz kaydırma etkin olduğunda kullanılan sarmalayıcı .samita_banner_groups.infinityScroll dahil kullanılabilir seçicileri gösterir. Eklemek için bir seçiciye tıklayın.

9. Banner’ın nerede görüneceğini seçin

   Placement sekmesine geçin ve bir görüntüleme konumu seçin:

   Konum	Davranış
   Top	Sayfa içeriğini aşağı iter.
   Top Sticky	İçeriği aşağı iter ve kaydırırken görünür kalır.
   Top Overlay	Sayfa içeriğinin üst kısmının üzerine biner.
   Overlay Sticky	İçeriğin üzerine biner ve kaydırırken görünür kalır.
   Bottom Sticky	Sayfanın altına sabitlenir.
   Custom	Çubuğu bir kısa kod ile istediğiniz yere yerleştirin.

   Konum seçicinin altında hedef kitleyi Product conditions, Customer conditions, Page conditions, Language conditions, Country conditions, Other conditions ve Visibility date ile daraltabilirsiniz. Custom’ı seçtiğinizde Shortcode paneli, temanıza yapıştıracağınız kod parçasını verir.

   Her koşul türünün ayrıntıları için Görüntüleme koşullarını yapılandırma sayfasına bakın.

   

   Bir görüntüleme konumu seçin, ardından banner’ı kimlerin göreceğini kontrol etmek için koşullar ekleyin.

10. Kaydedin ve etkinleştirin

    Önizlemenin üzerindeki durum anahtarını Active olarak ayarlayın, ardından sağ üst köşedeki Save’e tıklayın. Yayınlamadan çalışmaya devam etmek için Draft’ta bırakın.

    Dikkat

    Banner’lar mağazanızda yalnızca uygulama yerleştirmesi temanızda etkinse görüntülenir. Bkz. Uygulamayı temanızda etkinleştirme.

Sonraki adımlar

• Görüntüleme koşullarını yapılandırma: banner’ınızın nerede ve kimlere görüneceğini kontrol edin.
• Temel banner oluşturma: bunun yerine sabit veya dönüşümlü bir duyuru çubuğu oluşturun.

İpucu

Desteğe mi ihtiyacınız var?

Bu adımları izlerken herhangi bir sorunla karşılaşırsanız [email protected] adresinden bize ulaşın.