Mağazanızın başlığına bir dinamizm dokunuşu eklemeye hazır mısınız? Bugün, müşterilerinizin dikkatini çekeceğinden emin olduğunuz kayan bir duyuru çubuğunu nasıl oluşturabileceğinizi ele alacağız. Bu kullanışlı özellik, promosyonları, kargo bilgilerini veya diğer önemli duyuruları vurgulamak için mükemmel olan tek bir alanda birden fazla mesajı sergilemenize olanak tanır.
Adım 1: Duyuru Çubuğu Liquid Dosyanızı Güncelleyin
Önemli: Öncelikle temanızı YEDEKLE. Yayımlanmış temanız üzerinde değil, bir taslak üzerinde çalışmanızı öneririz.
Öncelikle dosyanızın içeriğini değiştirmemiz gerekiyor announcement-bar.liquid.
Peki nasıl:
- Shopify yönetici panelinize gidin.
- “ Çevrimiçi Mağaza ” > “ Temalar ” bölümüne gidin.
- “ Eylemler ” > “ Kodu düzenle ” ye tıklayın.
- Bölümlere gidin , duyuru çubuğu.sıvıyı bulun ve tıklayın (eğer yoksa oluşturun).
- Mevcut tüm kodları aşağıdakilerle değiştirin ve kaydedin:
- {%- for block in section.blocks -%} {%- case block.type -%} {%- when 'announcement' -%} <div class="announcement-bar color-{{ block.settings.color_scheme }} gradient" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}> {%- if block.settings.message_one != blank -%} {%- if block.settings.link != blank -%} <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow"> {%- endif -%} <div class="page-width marquee enable-animation marquee--hover-pause"> <ul style="list-style: none" class="marquee__content"> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_three | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> </ul> <ul style="list-style: none" aria-hidden="true" class="marquee__content"> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_one | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_two | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_three| escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_four | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> <li class="announcement-bar__message {{ block.settings.text_alignment }} h5"> {{ block.settings.message_five | escape }} {%- if block.settings.link != blank -%} {% render 'icon-arrow' %} {%- endif -%} </li> </ul> </div> {%- if block.settings.link != blank -%} </a> {%- endif -%} {%- endif -%} </div> {%- endcase -%} {%- endfor -%} {% schema %} { "name": "t:sections.announcement-bar.name", "max_blocks": 12, "blocks": [ { "type": "announcement", "name": "t:sections.announcement-bar.blocks.announcement.name", "settings": [ { "type": "text", "id": "message_one", "default": "Message one", "label": "Announcement one" }, { "type": "text", "id": "message_two", "default": "Message two", "label": "Announcement two" }, { "type": "text", "id": "message_three", "default": "Message three", "label": "Announcement three" }, { "type": "text", "id": "message_four", "default": "Message four", "label": "Announcement four" }, { "type": "text", "id": "message_five", "default": "Message five", "label": "Announcement five" }, { "type": "select", "id": "text_alignment", "options": [ { "value": "left", "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__1.label" }, { "value": "center", "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__2.label" }, { "value": "right", "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.options__3.label" } ], "default": "center", "label": "t:sections.announcement-bar.blocks.announcement.settings.text_alignment.label" }, { "type": "color_scheme", "id": "color_scheme", "label": "t:sections.all.colors.label", "default": "accent-1" }, { "type": "url", "id": "link", "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label" } ] } ], "default": { "blocks": [ { "type": "announcement" } ] } } {% endschema %}
Adım 2: CSS'yi ekleyin
Sonra, duyuru çubuğumuzun harika görünmesini ve sorunsuz bir şekilde kaydırılmasını sağlamak için biraz CSS eklememiz gerekiyor. Bunu temanızın CSS dosyasına ekleyin veya yeni bir CSS dosyası oluşturup temanıza ekleyin. Bunu Tema Özelleştirici CSS'nizede ekleyebilirsiniz.
- .marquee { --gap: 1rem; position: relative; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; list-style: none; margin: 0; padding: 0; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } .enable-animation .marquee__content { animation: scroll 20s linear infinite; } .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee__content { animation-play-state: paused !important; } } .announcement-bar__message { padding: 10px 0; margin: 0; }
Adım 3: Duyuru Çubuğunuzu Özelleştirin
Şimdi eğlenceli kısma geliyoruz - duyuru çubuğunuzu özelleştirmek! İşte nasıl:
- Shopify yönetici panelinize geri dönün.
- “Çevrimiçi Mağaza” > “Temalar”a gidin.
- "Özelleştir"e tıklayın.
- "Başlık" bölümünü arayın.
- “Duyuru çubuğu” ekleme seçeneğini görmelisiniz – tıklayın!
- Artık beş farklı mesaja kadar ekleyebilir, metin hizalamasını değiştirebilir, bir renk şeması seçebilir ve hatta bir bağlantı ekleyebilirsiniz
İpucu: En iyi etkiyi yaratmak için mesajlarınızı kısa ve öz tutun!
Tebrikler! Artık müşterilerinizin dikkatini çekecek şık, kayan bir duyuru çubuğunuz var.
Bu kayan duyuru çubuğunu Shopify mağazanıza eklemek, önemli bilgileri öne çıkarmanın harika bir yoludur. İster bir indirimi tanıtıyor olun, ister kargo güncellemelerini duyuruyor olun veya sadece ziyaretçileri karşılıyor olun, bu dikkat çekici özellik mesajınızı iletmek için emin olabilirsiniz.
Unutmayın, harika bir duyuru çubuğunun anahtarı, mesajlarınızı net, öz ve müşterileriniz için alakalı tutmaktır.
Bu blog yazımızda bahsedilen hiçbir marka ile #işbirliğimiz yoktur. İyi satışlar diliyoruz! .. 🧑🏻💻 😊
