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

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

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

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

  1. ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่

  2. ตั้งชื่อส่วนย่อย back-to-the-top จากนั้นคลิกที่ "สร้างส่วนย่อย" ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด

  3. วางโค้ดต่อไปนี้ลงในไฟล์ back-to-the-top ที่สร้างขึ้นใหม่:

    ```html {% comment %} ลดค่าด้านล่างหากคุณต้องการให้ปุ่มย้อนกลับไปยังด้านบนปรากฏสูงขึ้นในหน้า ค่านั้นจะอยู่ในหน่วยพิกเซล {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} ออฟเซ็ตแนวตั้งจากด้านล่างของเบราว์เซอร์สำหรับตำแหน่งของปุ่ม {% endcomment %} {% assign position_from_bottom = '6em' %}

    Back to the top {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

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

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

    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 แล้วหรือยัง

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