> ## 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).

# เพิ่มการนำทาง(navigation)แถบด้านข้างไปยังเว็บไซต์ของคุณ

เป็นตัวเลือกรูปแบบใหม่ๆ ในการสร้างการนำทาง ที่ต่างออกไปจากแบบเดิม ๆ ทำให้สนุกมากขึ้นในการสำรวจหน้าเว็บไซต์ของคุณ โดยการสร้างแถบเมนูด้านข้าง นั้นก็เป็นอีกหนึ่งดีไซน์ที่น่าลองใช้งาน 

![](https://storage.crisp.chat/users/helpdesk/website/d1c816e3fff8e800/c6d47199-17bb-447f-8ac4-68fa0a_d11007.png)

**ประโยชน์ของการใช้แถบนำทางแนวตั้งด้านข้าง :**

*   เป็นการนำทางแนวตั้งที่อยู่ทางด้านซ้าย ซึ่งเวลาที่ลูกค้าเข้ามาเยี่ยมชมเว็บไซต์ของคุณ เลื่อนลงมาจากทางด้านบนก็จะสามารถเห็นแถบเมนูด้านข้างได้อย่างเป็นธรรมชาติ 
    
*   การอ่านจากบนลงล่างนั้นง่ายต่อการมองเห็น เมื่อมีระยะห่างระหว่างองค์ประกอบเพียงพอ
    
*   สามารถมีลิงค์เพิ่มเติมได้ ต้องอยู่ในลักษณะที่ไม่เยอะเกินไป ดูสะอาดตา 
    

นี่คือคำแนะนำสำหรับคุณที่จะมีแถบเมนูด้านข้างทางด้านซ้ายของเว็บไซต์  
ไม่จำเป็นต้องมีความรู้ด้านการทำโค้ด แค่เพียงทำตามขั้นตอนด้านล่าง  
เพื่อเพิ่มแถบเมนูด้านข้างไปยัง EasyStore ของคุณ

1.   ไปที่  [EasyStore แอดมิน](https://admin.easystore.co/) > ธีม > แก้ไขแหล่งข้อมูล  > **layout/theme.liquid**
    
2.  **มองไปที่ <main class="wrapper main-content" role="main">**  (ประมาณ บรรทัดที่  140 - 160)  
    

![](https://storage.crisp.chat/users/helpdesk/website/551783110302f800/37f3bcbe-8775-448d-83ae-c2eb65_o3sy2d.png)

3. วางโค้ดตามนั้น (เลือกที่จะขีดเส้นใต้ หรือ ไม่ขีดเส้นใต้ )

![](https://storage.crisp.chat/users/helpdesk/website/e354ea8f73d95800/08dcd860-a723-4e53-b474-510af3_15md6ro.png)

**ต้องการ ขีดเส้นใต้** 

วางโค้ด หลังจาก **<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 %}

**รูปภาพเพิ่มเติม สำหรับต้องการขีดเส้นใต้**

![](https://storage.crisp.chat/users/helpdesk/website/43953b9d1ec01400/a8d9f873-2af1-4dc8-845b-0672aa_dmqjbl.gif)

**ไม่ต้องการขีดเส้นใต้** 

 วางโค้ดหลัง  **<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 %}

**รูปภาพเพิ่มเติม ไม่ต้องการขีดเส้นใต้** 

![](https://storage.crisp.chat/users/helpdesk/website/3720c17457e3c400/d47e1bd8-9997-4536-b1d6-b2ac8d_18outfq.gif)

 4. มองไปยัง **<div class="grid__item">** ซึ่งมีเพียงหนึ่งแถวด้านล่าง 

![](https://storage.crisp.chat/users/helpdesk/website/18c7f218ec1ee100/7940c202-17ad-41c7-bdac-704483_xsa01j.png)

5. ลบและแทนที่ด้วย  **<div class="grid__item{% if template != 'product' %} large--three-quarters{% endif %}">**

![](https://storage.crisp.chat/users/helpdesk/website/c19985d8c36a8800/ba0312dd-2f27-4e81-ab77-e89d4d_1agxbsu.png)

6. บันทึก 

  
**เคล็ดลับ :**   

*   ซ่อนแถบด้านข้างจากหน้าหลัก (แสดงในหน้าคอลเลคชั่นเท่านั้น) มองไปที่  **{% if template != 'product' %}** > Replace with **{% if template == 'collection' %}** 
    
*   โชว์แถบด้านข้างในหน้าหลัก มองไปที่ **{% if template != 'product' %}** > Replace with **{% if template == 'index' %}** 
    

![](https://storage.crisp.chat/users/helpdesk/website/823aaf41485e7000/a9f4fbc5-2834-4e60-9b18-9ed2a4_45h9tf.png)

![](https://storage.crisp.chat/users/helpdesk/website/a6edfbaeb5963800/52c509de-143e-4e1c-8f6f-e46d2f_515muz.png)