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

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



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

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

การอ่านจากบนลงล่างนั้นง่ายต่อการมองเห็น เมื่อมีระยะห่างระหว่างองค์ประกอบเพียงพอ

สามารถมีลิงค์เพิ่มเติมได้ ต้องอยู่ในลักษณะที่ไม่เยอะเกินไป ดูสะอาดตา


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

ไปที่  EasyStore แอดมิน > ธีม > แก้ไขแหล่งข้อมูล  > layout/theme.liquid

มองไปที่ <main class="wrapper main-content" role="main">  (ประมาณ บรรทัดที่  140 - 160)




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



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

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

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



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

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

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



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



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



บันทึก


เคล็ดลับ :   

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

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

อัปเดตเมื่อ: 20/09/2022