Takaisin alkuun ‑painikkeen lisääminen pitkille sivuille
Tämä sivu on tulostettu Mar 29, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top.
Huomio
Vanhoja teemoja ei ole saatavilla Theme Storessa. Näissä teemoissa ei ole Shopifyn Online Store 2.0 -teemoihin sisältyviä ominaisuuksia, eikä niihin tehdä muita päivityksiä kuin turvallisuuskorjauksia.
Huomaa
Jos käytät Shopifyn ilmaista teemaa , voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki .
Huomaa
tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.
Jos sinulla on sivuja, jotka ovat pitkiä ja vaativat paljon vierittämistä, voit lisätä teemaasi Takaisin alkuun ‑painikkeen.
Takaisin alkuun vievän back-to-the-top‑koodinpätkän luominen
Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Anna koodinpätkäsi nimeksi back-to-the-top
ja valitse sitten Luo koodinpätkä . Koodinpätkätiedostosi avautuu koodieditorissa.
Liitä seuraava koodi uuteen, juuri luotuun back-to-the-top
-tiedostoosi:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Anna koodinpätkäsi nimeksi back-to-the-top
ja valitse sitten Luo koodinpätkä . Koodinpätkätiedostosi avautuu koodieditorissa.
Liitä seuraava koodi uuteen, juuri luotuun back-to-the-top
-tiedostoosi:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Klikkaa Tallenna .
Napauta Shopify-sovelluksessa … -painiketta.
Napauta myyntikanavat -osiossa Verkkokauppa .
Napauta Hallitse teemoja .
Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ... -painiketta ja klikkaa sitten Muokkaa koodia .
klikkaa Koodinpätkät -hakemistossa Lisää uusi koodinpätkä .
Anna koodinpätkäsi nimeksi back-to-the-top
ja valitse sitten Luo koodinpätkä . Koodinpätkätiedostosi avautuu koodieditorissa.
Liitä seuraava koodi uuteen, juuri luotuun back-to-the-top
-tiedostoosi:
{% 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 : 0 px ;
text-decoration : none ;
color : #999 ;
background-color : #eee ;
font-size : 16 px ;
padding : 0 . 3 em ;
-webkit-border-top-left-radius : 3 px ;
-webkit-border-bottom-left-radius : 3 px ;
-moz-border-radius-topleft : 3 px ;
-moz-border-radius-bottomleft : 3 px ;
border-top-left-radius : 3 px ;
border-bottom-left-radius : 3 px ;
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>
Klikkaa Tallenna .
Koodinpätkän sisällyttäminen
Avaa Asettelut -kansiossa theme.liquid
-tiedosto.
Vieritä tiedoston alareunaan. Liitä tämä koodi heti </body>
-lopputunnisteen yläpuolelle:
{% render 'back-to-the-top' %}
Koodisi pitäisi näyttää tältä:
Klikkaa Tallenna .
Takaisin alkuun ‑painikkeen määritys (valinnainen) Jos haluat mukauttaa Takaisin alkuun ‑painiketta, klikkaa tästä ja katso koodinpätkäsi ensimmäisiä rivejä.
Jos haluat muuttaa painikkeen sijaintia suhteessa selaimen alaosaan, muokkaa position_from_bottom
-arvoa:
{% assign position_from_bottom = '4em' %}
Jos haluat muuttaa sitä, kuinka pitkälle alas asiakkaan on vieritettävä näkymää, ennen kuin painike tulee näkyviin, muokkaa vertical_offset_for_trigger
-arvoa:
{% assign vertical_offset_for_trigger = 300 %}
Vinkki: vertical_offset_for_trigger
-arvo on määritettävä ilman yksiköitä, ja sen on oltava pikseliarvo.
Demokauppa Vieraile demokaupassa nähdäksesi esimerkin tästä mukautuksesta.