Buat Kustom Breadcrumbs di Shopify

Salah satu elemen penting di suatu website adalah breadcrumbs. Apa itu breadcrumbs? Breadcrumbs adalah navigasi berbasis tautan yang membantu pengguna memahami struktur situs web dan kembali ke halaman sebelumnya dengan mudah.

Sedangkan pada Shopify, breadcrumbs juga sangat penting untuk SEO dan pengalaman pengguna (UX) karena membantu mesin pencari memahami hierarki situs serta meningkatkan keterlibatan pengguna.

Manfaat Breadcrumbs di Shopify

Shopify juga harus mengutamakan SEO, jika toko online yang Anda bangun menggunakan shopify ingin terindex di mesin pencarian Google, Bing dan lain sebagainya harus mematuhi aturan SEO.

Salah satunya adalah menggunakan breadcrumbs, ketahui terlebih dahulu manfaat menggunakan breadcrumbs di shopify berikut ini:

1. Meningkatkan Navigasi – Mempermudah pengguna dalam menavigasi situs web.
2. Meningkatkan Pengalaman Pengguna – Memungkinkan pengguna memahami letak mereka dalam struktur situs.
3. Meningkatkan SEO – Google menggunakan breadcrumbs untuk memahami konteks halaman dan menampilkannya dalam hasil pencarian.
4. Mengurangi Bounce Rate – Membantu pengguna menemukan lebih banyak halaman dalam situs Anda

Cara Membuat Kustom Breadcrumbs di Shopify

Ada beberapa cara yang dapat dilakukan untuk menambahkan breadcrumbs di shopify, diantaranya adalah menggunakan pihak ketiga (third-party) dan menggunakan kustom kode menggunakan liquid. Simak cara menambahkan breadcrumbs berikut ini:

1. Menggunakan Third-Party Shopify

Third-party Shopify merujuk pada aplikasi, layanan, atau toko yang tidak langsung dikelola oleh Shopify, tetapi berintegrasi dengan platform Shopify untuk memperluas fungsionalitas atau memberikan layanan tambahan bagi pemilik toko.

Shopify adalah platform e-commerce yang memungkinkan pengguna untuk membuat dan mengelola toko online mereka. Namun, untuk meningkatkan kemampuan toko online mereka, banyak pemilik toko menggunakan aplikasi atau layanan dari pihak ketiga yang bekerja dengan Shopify.

Berikut adalah beberapa contoh dari third-party Breadcrumbs di Shopify:

Kunjungi app store shopify https://apps.shopify.com/, lalu ketikkan Breadcrumbs pada kolom pencariannya. Kekurangan layanan pihak ketiga adalah biaya yang cukup mahal. Selain itu juga fitur terlalu minim tidak seperti pada Yoast plugin wordpress yang dapat kita kustom lagi.

2. Menggunakan Kustom Liquid untuk Membuat Breadcrumbs

Shopify tidak menyediakan breadcrumbs secara default, tetapi kita bisa menambahkannya dengan menggunakan Liquid, bahasa templating bawaan Shopify.

Langkah 1: Buka Tema Editor

1. Masuk ke Shopify Admin.
2. Pilih Online Store > Themes.
3. Klik Customize dan pilih Edit Code.

Langkah 2: Buat breadcrumb.liquid

1. Buka folder Snippets.
2. Klik Add a new snippet dan beri nama breadcrumb.
3. Tambahkan kode berikut:

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ul>
    <li><a href="{{ shop.url }}" class="home">Home</a></li>

    {% if template contains 'collection' and collection %}
      <li><a href="{{ routes.collections_url }}">Shop</a></li>
      <li><a href="{{ collection.url }}">{{ collection.title }}</a></li>
    
    {% elsif template contains 'product' %}
      {% if collection %}
        <li><a href="{{ routes.collections_url }}">Shop</a></li>
        <li><a href="{{ collection.url }}">{{ collection.title }}</a></li>
      {% endif %}
      <li>{{ product.title }}</li>

    {% elsif template contains 'article' %}
      <li><a href="{{ blog.url }}">{{ blog.title }}</a></li>
      <li>{{ article.title }}</li>

    {% elsif template contains 'page' %}
      <li>{{ page.title }}</li>
    {% endif %}
  </ul>
</nav>

4. Panggil atau cara untuk menampilkannya di seluruh template, buka file theme.liquid. Tambahkan kode dibawah ini tepat setelah bagian header, atau dimana saja Anda ingin letakkan.

{% render 'breadcrumb' %}

5. Simpan perubahan dan periksa apakah breadcrumbs muncul di situs Anda.

Sebagai contoh, penerapan yang sudah saya lakukan seperti ini:

Anda dapat mengkombinasikan dengan menambahkan kustom padding section shopify untuk mengatur jarak antara header dan body konten supaya lebih mudah.

Baca juga: Cara Buat Kustom Section Shopify Liquid

Mengoptimalkan Breadcrumbs untuk SEO

Agar breadcrumbs membantu meningkatkan peringkat SEO Anda, ikuti langkah-langkah berikut:

Gunakan Markup Schema untuk Breadcrumbs

Tambahkan JSON-LD Schema Markup agar Google dapat mengenali breadcrumbs dengan lebih baik. Tambahkan kode berikut di dalam <head> file theme.liquid:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "{{ shop.url }}"
    },
    {% if template contains 'collection' %}
    {
      "@type": "ListItem",
      "position": 2,
      "name": "{{ collection.title }}",
      "item": "{{ collection.url }}"
    }
    {% endif %}
  ]
}
</script>

Setelah menambahkan kode ini, gunakan Google Rich Results Test untuk memastikan breadcrumbs terdeteksi dengan benar.

Kesimpulan

Breadcrumbs sangat penting dalam Shopify untuk meningkatkan navigasi, pengalaman pengguna, dan SEO. Dengan menambahkan breadcrumbs menggunakan Liquid, aplikasi pihak ketiga, atau Schema Markup, Anda bisa meningkatkan keterlihatan situs Anda di Google dan memudahkan pelanggan menjelajahi toko Anda dengan lebih baik.

Demikian pembahasan cara membuat kustom breadcrumbs shopify dengan liquid.