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.



1. Pergi ke Admin EasyStore > Kedai Online > Tema > Menyesuaikan > layout/theme.liquid

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

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 %}


GIF ( dengan garis bawah ) : 


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 %}


GIF ( tanpa garis bawah )

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


5. Padamkan dan ganti dengan:

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

6. Simpan



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?