เพิ่มปุ่มกลับไปยังด้านบนในหน้าแบบยาว

หากคุณมีหน้าที่ยาวและต้องเลื่อนลงหลายครั้ง คุณสามารถเพิ่มปุ่มกลับไปยังด้านบนให้ธีมของคุณได้

กลับไปยังตัวอย่างด้านบน

สร้างส่วนย่อยของการย้อนกลับไปยังด้านบน

ใส่ส่วนย่อยของคุณ

  1. ในโฟลเดอร์เลย์เอาต์ ให้เปิดไฟล์ theme.liquid
  2. เลื่อนไปที่ด้านล่างของไฟล์ แล้ววางโค้ดนี้เหนือแท็กปิด </body>
{% render 'back-to-the-top' %}

โค้ดของคุณควรจะมีลักษณะดังนี้:

กลับไปยังส่วนย่อยที่รวมอยู่ด้านบน

  1. คลิกที่ “บันทึก

กำหนดค่าปุ่มกลับไปยังด้านบน (ไม่บังคับ)

หากต้องการปรับแต่งปุ่มกลับไปยังด้านบน ให้คลิกที่นี่และดูบรรทัดแรกของส่วนย่อยคุณ

  • หากต้องการเปลี่ยนตําแหน่งของปุ่มที่สัมพันธ์กับด้านล่างของเบราว์เซอร์ ให้แก้ไขค่า position_from_bottom
{% assign position_from_bottom = '4em' %}
  • หากต้องการเปลี่ยนระยะเวลาที่ลูกค้าต้องเลื่อนก่อนจะพบปุ่ม ให้แก้ไขค่า vertical_offset_for_trigger
{% assign vertical_offset_for_trigger = 300 %}

ร้านค้าตัวอย่าง

ไปที่ร้านค้าตัวอย่างเพื่อดูตัวอย่างของการปรับแต่งนี้

พร้อมเริ่มต้นการขายด้วย Shopify แล้วหรือยัง

ทดลองใช้งานฟรี