Lägg till en Tillbaka till början-knapp på långa sidor
Om du har sidor som är långa och kräver mycket bläddring kan du lägga till en Tillbaka till början-knapp i ditt tema.
På den här sidan
Skapa ett back-to-the-top-fragment
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Från Shopify-appen klickar du på Butik.
Tryck på Webbshop i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på Lägg till en ny snippet i katalogen Snippets.
Döp ditt fragment till
back-to-the-top
och klicka sedan på Skapa fragment. Din fragmentfil öppnas i kodredigeraren.Klistra in följande kod i din nyligen skapade
back-to-the-top
-fil:
{% 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 > coords) {
goTopBtn.classList.remove('hide');
}
if (scrolled < coords) {
goTopBtn.classList.add('hide');
}
}
function backToTop() {
if (window.pageYOffset > 0) {
window.scrollBy(0, -80);
setTimeout(backToTop, 0);
}
}
var goTopBtn = document.querySelector('.back-to-top');
window.addEventListener('scroll', trackScroll);
goTopBtn.addEventListener('click', backToTop);
})();
</script>
- Klicka på Spara.
Inkludera ditt fragment
Öppna filen
theme.liquid
i mappen Layouter.Bläddra längst ner i filen. Precis ovanför den avslutande
</body>
-taggen klistrar du in den här koden:
{% render 'back-to-the-top' %}
Din kod ska se ut så här:
- Klicka på Spara.
Konfigurera tillbaka till början-knappen (valfritt)
Om du vill anpassa din tillbaka till början-knapp klickar du här och tittar på de första raderna i ditt fragment.
- Redigera
position_from_bottom
-värdet för att ändra knappens placering i förhållande till den nedre delen av webbläsaren:
{% assign position_from_bottom = '4em' %}
- Redigera
vertical_offset_for_trigger
-värdet för att ändra hur långt ner en kund behöver bläddra innan knappen syns:
{% assign vertical_offset_for_trigger = 300 %}
Demobutik
Besök demobutiken för att se ett exempel på denna anpassning.