เพิ่มปุ่มกลับไปยังด้านบนในหน้าแบบยาว
หน้านี้พิมพ์ขึ้นเมื่อ Mar 28, 2024 หากต้องการเวอร์ชันปัจจุบัน โปรดไปที่ https://help.shopify.com/th/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top
หากคุณมีหน้าที่ยาวและต้องเลื่อนลงหลายครั้ง คุณสามารถเพิ่มปุ่มกลับไปยังด้านบนให้ธีมของคุณได้
สร้างส่วนย่อยของการย้อนกลับไปยังด้านบน
- ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
- ตั้งชื่อส่วนย่อย
back-to-the-top
จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
- วางโค้ดต่อไปนี้ลงในไฟล์
back-to-the-top
ที่สร้างขึ้นใหม่:
- คลิกที่ “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
- ตั้งชื่อส่วนย่อย
back-to-the-top
จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
- วางโค้ดต่อไปนี้ลงในไฟล์
back-to-the-top
ที่สร้างขึ้นใหม่:
- คลิกที่ “บันทึก”
- จากแอป Shopify ให้แตะที่ปุ่ม …
- ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
- แตะจัดการธีม
- ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
- ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
- ตั้งชื่อส่วนย่อย
back-to-the-top
จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
- วางโค้ดต่อไปนี้ลงในไฟล์
back-to-the-top
ที่สร้างขึ้นใหม่:
- คลิกที่ “บันทึก”
ใส่ส่วนย่อยของคุณ
- ในโฟลเดอร์เลย์เอาต์ ให้เปิดไฟล์
theme.liquid
- เลื่อนไปที่ด้านล่างของไฟล์ แล้ววางโค้ดนี้เหนือแท็กปิด
</body>
โค้ดของคุณควรจะมีลักษณะดังนี้:
- คลิกที่ “บันทึก”
กำหนดค่าปุ่มกลับไปยังด้านบน (ไม่บังคับ)
หากต้องการปรับแต่งปุ่มกลับไปยังด้านบน ให้คลิกที่นี่และดูบรรทัดแรกของส่วนย่อยคุณ
- หากต้องการเปลี่ยนตําแหน่งของปุ่มที่สัมพันธ์กับด้านล่างของเบราว์เซอร์ ให้แก้ไขค่า
position_from_bottom
- หากต้องการเปลี่ยนระยะเวลาที่ลูกค้าต้องเลื่อนก่อนจะพบปุ่ม ให้แก้ไขค่า
vertical_offset_for_trigger
ร้านค้าตัวอย่าง
ไปที่ร้านค้าตัวอย่างเพื่อดูตัวอย่างของการปรับแต่งนี้