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

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

ในหน้านี้

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

เดสก์ท็อป

ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย back-to-the-top จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
วางโค้ดต่อไปนี้ลงในไฟล์ back-to-the-top ที่สร้างขึ้นใหม่:

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};
if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>

แล้วคลิกที่บันทึก

iPhone

จากแอป Shopify ให้แตะที่ปุ่ม …
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย back-to-the-top จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
วางโค้ดต่อไปนี้ลงในไฟล์ back-to-the-top ที่สร้างขึ้นใหม่:

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};
if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>

แล้วคลิกที่บันทึก

Android

จากแอป Shopify ให้แตะที่ปุ่ม …
ในส่วนช่องทางการขาย ให้แตะที่ร้านค้าออนไลน์
แตะจัดการธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม … เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก แก้ไขโค้ด
ในไดเรกทอรีส่วนย่อย ให้คลิก เพิ่มส่วนย่อยใหม่
ตั้งชื่อส่วนย่อย back-to-the-top จากนั้นคลิกที่ “สร้างส่วนย่อย” ไฟล์ส่วนย่อยของคุณจะเปิดขึ้นในตัวแก้ไขโค้ด
วางโค้ดต่อไปนี้ลงในไฟล์ back-to-the-top ที่สร้างขึ้นใหม่:

{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}
<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};
if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>

แล้วคลิกที่บันทึก

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

ในโฟลเดอร์เลย์เอาต์ ให้เปิดไฟล์ theme.liquid
เลื่อนไปที่ด้านล่างของไฟล์ แล้ววางโค้ดนี้เหนือแท็กปิด </body>

{% render 'back-to-the-top' %}

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

แล้วคลิกที่บันทึก

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

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

หากต้องการเปลี่ยนตําแหน่งของปุ่มที่สัมพันธ์กับด้านล่างของเบราว์เซอร์ ให้แก้ไขค่า position_from_bottom

{% assign position_from_bottom = '4em' %}

หากต้องการเปลี่ยนระยะเวลาที่ลูกค้าต้องเลื่อนก่อนจะพบปุ่ม ให้แก้ไขค่า vertical_offset_for_trigger

{% assign vertical_offset_for_trigger = 300 %}

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

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