Shopify Collection Navigasyon Geliştirme

Shopify’da kullanıcı deneyimini geliştirmek ve belirli koleksiyonlara özel menü butonları eklemek, satışları artırmanın etkili yollarından biridir. Bu blog yazımda, Shopify mağazanızda koleksiyon bazlı dinamik butonlar eklemek için geliştirdiğim özel yazılımdan bahsedeceğim.

Projenin Amacı

Shopify’da varsayılan olarak koleksiyon sayfalarında özelleştirilebilir dinamik menüler bulunmamaktadır. Benim geliştirdiğim özel yazılım, belirli koleksiyonlar (örneğin, elbise, siyah elbise ve farklı olarak etek) için özel butonların otomatik olarak eklenmesini sağlıyor. Bu sayede müşteriler, ilgili kategoriler arasında daha hızlı ve kolay geçiş yapabiliyor.

Nasıl Çalışıyor?

• Snippets Kullanımı
  • “menu-buttons.liquid” adında özel bir dosya oluşturuldu ve Shopify’ın Snippets klasörüne eklendi.
  • Bu dosya, belirlenen koleksiyonlara özel butonların dinamik olarak eklenmesini sağlıyor.

• Liquid Kod Yapısı
  • Liquid kodları kullanılarak, belirli koleksiyonlar için özel “menü butonları” tanımladım.
  • Örneğin, ‘Elbise’ koleksiyonuna girildiğinde, elbiselerle ilgili alt kategoriler (Mini Elbise, Maxi Elbise, Straplez Elbise vb.) gösterilecek.
• CSS ile Kaydırılabilir Menü:
  • Mobil uyumlu bir kaydırılabilir menü tasarımı oluşturuldu.
  • Kullanıcıların rahatça gezinmesi için butonlar yatay kaydırma özelliğiyle entegre edildi.

Shopify Mağazanıza Nasıl Ekleyebilirsiniz?

1. Shopify yönetim panelinde Snippets klasörüne girin.
2. menu-buttons.liquid adında yeni bir dosya oluşturun ve sizinle paylaştığım kodları buraya ekleyin.
3. collection.liquid dosyanızın uygun bir yerine aşağıdaki kodu ekleyerek çağırın:{% render 'menu-buttons' %} veya özelleştir sayfanızdan Collections’ları seçip yeni bir metin ekleyerek “menu-buttons” yapısını çağırabilirsiniz.
4. Shopify’da Online Store > Navigation sekmesine giderek, koleksiyonlarınıza özel menü butonlarını düzenleyebilirsiniz.

Bu özel geliştirme, Shopify mağazanızda kullanıcı deneyimini artırırken, müşterilerinize daha sezgisel bir alışveriş süreci sunmanızı sağlar. Siz de Shopify mağazanızda benzer bir özelleştirme yapmak istiyorsanız, yukarıdaki adımları takip ederek kolayca uygulayabilirsiniz. Daha fazla geliştirme ve özelleştirme için benimle iletişime geçebilirsiniz!

Kodlara Github üzerinden ulaşabilirsiniz.

{% if template contains 'collection' %}
  {% if collection.handle == 'elbise' or collection.handle == 'etek' or product.collections contains 'etek' %}
  
  <style>
    .scroll-container {
      overflow-x: auto;
      white-space: nowrap;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      display: flex;
      padding-bottom: 10px;
      width: 100%;
      scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .menu-buttons {
      display: flex;
      gap: 1rem;
      min-width: max-content;
      scroll-snap-type: x mandatory;
      padding: 0 10px;
    }

    .menu-button {
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      font-weight: 500;
      background-color: rgb(229, 231, 235);
      color: black;
      transition: all 300ms;
      border: none;
      cursor: pointer;
      text-decoration: none;
      scroll-snap-align: start;
      flex-shrink: 0;
    }

    .menu-button:hover {
      background-color: black;
      color: white;
    }

    /* Mobilde kaydırma ve scrollbar ayarı */
    @media (max-width: 768px) {
      .scroll-container {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .scroll-container::-webkit-scrollbar {
        display: none;
      }

      .menu-buttons {
        flex-wrap: nowrap;
        overflow-x: auto;
      }
    }
  </style>

  <div class="sub-menu-buttons">
  {% assign current_collection = collection.handle %}

  {% if current_collection == blank and request.path contains '/collections/' %}
    {% assign path_parts = request.path | split: '/' %}
    {% assign current_collection = path_parts[2] %}
  {% endif %}

  {% if current_collection contains 'elbise' %}
    {% assign submenu = linklists.elbise-submenu.links %}
  {% elsif current_collection contains 'etek' %}
    {% assign submenu = linklists.etek-submenu.links %}
  {% else %}
    {% assign submenu = null %}
  {% endif %}

  {% if submenu %}
    {% for link in submenu %}
      {% assign menu_handle = link.url | split: '/' | last %}
      {% if menu_handle != current_collection %}
        <a href="{{ link.url }}" class="sub-menu-button">
          {{ link.title }}
        </a>
      {% endif %}
    {% endfor %}
  {% endif %}
</div>

  {% endif %}
{% endif %}