เพิ่มการนำทาง(navigation)แถบด้านข้างไปยังเว็บไซต์ของคุณ
เป็นตัวเลือกรูปแบบใหม่ๆ ในการสร้างการนำทาง ที่ต่างออกไปจากแบบเดิม ๆ ทำให้สนุกมากขึ้นในการสำรวจหน้าเว็บไซต์ของคุณ โดยการสร้างแถบเมนูด้านข้าง นั้นก็เป็นอีกหนึ่งดีไซน์ที่น่าลองใช้งาน
![](https://storage.crisp.chat/users/helpdesk/website/d1c816e3fff8e800/c6d47199-17bb-447f-8ac4-68fa0a_d11007.png)
ประโยชน์ของการใช้แถบนำทางแนวตั้งด้านข้าง :
เป็นการนำทางแนวตั้งที่อยู่ทางด้านซ้าย ซึ่งเวลาที่ลูกค้าเข้ามาเยี่ยมชมเว็บไซต์ของคุณ เลื่อนลงมาจากทางด้านบนก็จะสามารถเห็นแถบเมนูด้านข้างได้อย่างเป็นธรรมชาติ
การอ่านจากบนลงล่างนั้นง่ายต่อการมองเห็น เมื่อมีระยะห่างระหว่างองค์ประกอบเพียงพอ
สามารถมีลิงค์เพิ่มเติมได้ ต้องอยู่ในลักษณะที่ไม่เยอะเกินไป ดูสะอาดตา
นี่คือคำแนะนำสำหรับคุณที่จะมีแถบเมนูด้านข้างทางด้านซ้ายของเว็บไซต์
ไม่จำเป็นต้องมีความรู้ด้านการทำโค้ด แค่เพียงทำตามขั้นตอนด้านล่าง
เพื่อเพิ่มแถบเมนูด้านข้างไปยัง EasyStore ของคุณ
ไปที่ EasyStore แอดมิน > ธีม > แก้ไขแหล่งข้อมูล > layout/theme.liquid
มองไปที่ <main class="wrapper main-content" role="main"> (ประมาณ บรรทัดที่ 140 - 160)
![](https://storage.crisp.chat/users/helpdesk/website/551783110302f800/37f3bcbe-8775-448d-83ae-c2eb65_o3sy2d.png)
วางโค้ดตามนั้น (เลือกที่จะขีดเส้นใต้ หรือ ไม่ขีดเส้นใต้ )
![](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)
มองไปยัง <div class="grid__item"> ซึ่งมีเพียงหนึ่งแถวด้านล่าง
![](https://storage.crisp.chat/users/helpdesk/website/18c7f218ec1ee100/7940c202-17ad-41c7-bdac-704483_xsa01j.png)
ลบและแทนที่ด้วย <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)
บันทึก
เคล็ดลับ :
ซ่อนแถบด้านข้างจากหน้าหลัก (แสดงในหน้าคอลเลคชั่นเท่านั้น) มองไปที่ {% 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)
![](https://storage.crisp.chat/users/helpdesk/website/d1c816e3fff8e800/c6d47199-17bb-447f-8ac4-68fa0a_d11007.png)
ประโยชน์ของการใช้แถบนำทางแนวตั้งด้านข้าง :
เป็นการนำทางแนวตั้งที่อยู่ทางด้านซ้าย ซึ่งเวลาที่ลูกค้าเข้ามาเยี่ยมชมเว็บไซต์ของคุณ เลื่อนลงมาจากทางด้านบนก็จะสามารถเห็นแถบเมนูด้านข้างได้อย่างเป็นธรรมชาติ
การอ่านจากบนลงล่างนั้นง่ายต่อการมองเห็น เมื่อมีระยะห่างระหว่างองค์ประกอบเพียงพอ
สามารถมีลิงค์เพิ่มเติมได้ ต้องอยู่ในลักษณะที่ไม่เยอะเกินไป ดูสะอาดตา
นี่คือคำแนะนำสำหรับคุณที่จะมีแถบเมนูด้านข้างทางด้านซ้ายของเว็บไซต์
ไม่จำเป็นต้องมีความรู้ด้านการทำโค้ด แค่เพียงทำตามขั้นตอนด้านล่าง
เพื่อเพิ่มแถบเมนูด้านข้างไปยัง EasyStore ของคุณ
ไปที่ EasyStore แอดมิน > ธีม > แก้ไขแหล่งข้อมูล > layout/theme.liquid
มองไปที่ <main class="wrapper main-content" role="main"> (ประมาณ บรรทัดที่ 140 - 160)
![](https://storage.crisp.chat/users/helpdesk/website/551783110302f800/37f3bcbe-8775-448d-83ae-c2eb65_o3sy2d.png)
วางโค้ดตามนั้น (เลือกที่จะขีดเส้นใต้ หรือ ไม่ขีดเส้นใต้ )
![](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)
มองไปยัง <div class="grid__item"> ซึ่งมีเพียงหนึ่งแถวด้านล่าง
![](https://storage.crisp.chat/users/helpdesk/website/18c7f218ec1ee100/7940c202-17ad-41c7-bdac-704483_xsa01j.png)
ลบและแทนที่ด้วย <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)
บันทึก
เคล็ดลับ :
ซ่อนแถบด้านข้างจากหน้าหลัก (แสดงในหน้าคอลเลคชั่นเท่านั้น) มองไปที่ {% 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)
อัปเดตเมื่อ: 20/09/2022
ขอบคุณ!