> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Tambah bar navigasi sisi di laman web anda

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.

![](https://storage.crisp.chat/users/helpdesk/website/e6ae63e490954800/3c43eb07-8122-4803-b080-a4010d_us0trp.png)

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](https://admin.easystore.co/) > Saluran > Kedai Online > Mengubahkan sumber > **layout/theme.liquid**

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

![](https://storage.crisp.chat/users/helpdesk/website/db7cd82f3c930800/0c2e49dc-6cac-4a11-a127-946e2e_1ixur8k.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/285afc3f5933ce00/b82902a3-ee05-4e04-a5dc-826b66_kubgx5.png)

## **Dengan garis bawah**

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

``` {% if template != 'product' %} 

 

* * *

       

          **Category  
**     {% for link in contents.catalog.links %}         [{{link.title}}]({{link.url}})  
         

* * *

  {% endfor %}

 

      {% endif %}```

##   
**Tanpa garis bawah**

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

``` {% if template != 'product' %}       

         

* * *

       

         

* * *

**Category  
**     {% for link in contents.catalog.links %}         [{{link.title}}]({{link.url}})  
  {% endfor %}         

* * *

     

      {% endif %}```

  

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

![](https://storage.crisp.chat/users/helpdesk/website/b568861ef3769000/15a96dd2-6bb9-43b4-a4cd-13356b_nr83nl.png)

**Langkah 5 :** Padamkan dan ganti dengan:

```

```

![](https://storage.crisp.chat/users/helpdesk/website/50b99a14b8cd2800/f8773787-363c-48c8-9722-fd1f3e_ik5p67.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/3d0fd68bc0244400/64721565-ed0b-474d-b353-377400_gqxh06.png)

![](https://storage.crisp.chat/users/helpdesk/website/b52301263d18e000/992590f0-5c18-46d5-a81f-c2a241_1hdqra2.png)