Navigasi bukan tradisional boleh menjadi cara yang menyeronokkan untuk memecahkan beberapa corak reka bentuk lama yang sama. Pilihan bar navigasi sisi menegak hanyalah salah satu daripada beberapa idea.

Faedah-faedah menggunakan bar navigasi sisi menegak termasuk:

  • Navigasi menegak kiri jatuh ke dalam stroke panjang bentuk F, di mana pembaca melihat bahagian atas terlebih dahulu dan kemudian ke sebelah kiri sebagai corak bacaan semula jadi

  • Bacaan dari atas ke bawah adalah mudah apabila terdapat ruang yang mencukupi antara unsur-unsur

  • Berpotensi untuk mengandungi lebih banyak pautan dengan cara yang bersih

Ini adalah panduan untuk anda tetapkan bar sisi yang mudah di sebelah kiri kedai anda. Tiada pengetahuan pengekodan diperlukan. Cuma ikuti langkah-langkah di bawah untuk menambah bar sisi ke EasyStore anda.



Langkah 1 : Pergi ke Admin EasyStore > Saluran > Kedai Online > Mengubahkan sumber > layout/theme.liquid

Langkah 2 : Cari <main class="wrapper main-content" role="main"> ( di sekitar baris 140 - 160 )  

Langkah 3 : Tampalkan kod yang sesuai ( anda boleh pilih dengan atau tanpa garis bawah ).

Dengan garis bawah

Tampalkan kod di bawah selepas <div class="grid">

{% if template != 'product' %}
 <div class="grid__item medium-down--hide large--one-quarter">
 <hr>
       <nav>
          <b>Category<br></b>    
  {% for link in contents.catalog.links %}
         <a href="{{link.url}}"><span style="font-size: 0.75em;">{{link.title}}</span></a><br>
         <hr style="margin: 0;">
  {% endfor %}
</nav>
  </div>
      {% endif %}


Tanpa garis bawah

Tampalkan kod di bawah selepas <div class="grid">

{% if template != 'product' %}
       <div class="grid__item medium-down--hide large--one-quarter">
         <hr class="hr--small hr--clear">
       <nav>
          <font size="5"> <hr><b>Category<br></b></font>    
  {% for link in contents.catalog.links %}
         <a href="{{link.url}}">{{link.title}}</a><br>
  {% endfor %}
         <hr>
</nav>
      </div>
      {% endif %}


Langkah 4 : Lepas itu, cari <div class="grid__item"> yang hanya satu garis di bawah.

Langkah 5 : Padamkan dan ganti dengan:

<div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">

Langkah 6 : Simpan dan siap

💡 Tips:

  • Sembunyikan bar sisi dari laman utama ( hanya paparkan di halaman Koleksi )

Cari {% if template != 'product' %} > ganti dengan {% if template == 'collection' %}

  • Hanya paparkan bar sis di laman utama

Cari {% if template != 'product' %} > ganti dengan {% if template == 'index' %}

Did this answer your question?