Oturum aç
Ücretsiz denemeyi başlat

Uzun sayfalarda başa dön düğmesi ekleme

Uzun olan ve çok fazla kaydırma gerektiren sayfalarınız varsa temanıza Başa dön düğmesi ekleyebilirsiniz.

Baştaki örneğe dön

Bu sayfada

Başa dön parçacığı oluştur

Masaüstü
  1. Shopify yöneticinizde Online Mağaza > Temalar'a gidin.
  2. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  3. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
  4. Parçacığınızı back-to-the-top olarak adlandırın ve Parçacık oluştur öğesine tıklayın. Parçacık dosyanız kod düzenleyicisinde açılır.
  5. Aşağıdaki kodu, yeni oluşturulan back-to-the-top dosyası içerisine yapıştırın:
{% 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>
  1. Kaydet'e tıklayın.
iPhone
  1. Shopify uygulamasında, … düğmesine dokunun.
  2. Satış Kanalları bölümünde Online Mağaza' ya dokunun.
  3. Temaları Yönet' e dokunun.
  4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  5. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
  6. Parçacığınızı back-to-the-top olarak adlandırın ve Parçacık oluştur öğesine tıklayın. Parçacık dosyanız kod düzenleyicisinde açılır.
  7. Aşağıdaki kodu, yeni oluşturulan back-to-the-top dosyası içerisine yapıştırın:
{% 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>
  1. Kaydet'e tıklayın.
Android
  1. Shopify uygulamasında, … düğmesine dokunun.
  2. Satış Kanalları bölümünde Online Mağaza' ya dokunun.
  3. Temaları Yönet' e dokunun.
  4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.
  5. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
  6. Parçacığınızı back-to-the-top olarak adlandırın ve Parçacık oluştur öğesine tıklayın. Parçacık dosyanız kod düzenleyicisinde açılır.
  7. Aşağıdaki kodu, yeni oluşturulan back-to-the-top dosyası içerisine yapıştırın:
{% 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>
  1. Kaydet'e tıklayın.

Parçacığınızı ekleme

  1. Düzen klasöründe, theme.liquid dosyasını açın.
  2. Dosyanın en altına gidin. Kapatma </body> etiketinin hemen üstüne aşağıdaki kodu yapıştırın:
{% render 'back-to-the-top' %}

Kodunuzun şu şekilde görünmesi gerekir:

Parçacık dahil başa dön

  1. Kaydet'e tıklayın.

Başa dön düğmesini yapılandırma (isteğe bağlı)

Başa dön düğmenizi özelleştirmek için buraya tıklayın ve parçacığınızın ilk satırlarına bakın.

  • Düğmenizin konumunu tarayıcının alt kısmına göre değiştirmek için position_from_bottom değerini düzenleyin:
{% assign position_from_bottom = '4em' %}
  • Düğme ortaya çıkmadan önce müşterinin ne kadar aşağı kaydırması gerektiğini değiştirmek için, vertical_offset_for_trigger değerini düzenleyin:
{% assign vertical_offset_for_trigger = 300 %}

Demo mağaza

Bu özelleştirmenin bir örneğini görmek için demo mağazayı ziyaret edin.

Aradığınız cevapları bulamıyor musunuz? Yardımcı olmak için buradayız.