Takaisin alkuun ‑painikkeen lisääminen pitkille sivuille

Jos sinulla on sivuja, jotka ovat pitkiä ja vaativat paljon vierittämistä, voit lisätä teemaasi Takaisin alkuun ‑painikkeen.

Esimerkki Takaisin alkuun ‑painikkeesta

Takaisin alkuun vievän back-to-the-top‑koodinpätkän luominen

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Anna koodinpätkäsi nimeksi back-to-the-top ja valitse sitten Luo koodinpätkä. Koodinpätkätiedostosi avautuu koodieditorissa.

  3. Liitä seuraava koodi uuteen, juuri luotuun back-to-the-top-tiedostoosi:

    ```html {% comment %} Pienennä arvoa, jos haluat, että Takaisin alkuun ‑painike näkyy sivulla korkeammalla. Tämä arvo on pikseleinä. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Selaimen alaosasta siirrytään pystysuunnassa painikkeen sijaintiin. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Takaisin alkuun {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Napauta Tallenna.

    Koodinpätkän sisällyttäminen

    1. Avaa Asettelut-kansiossa theme.liquid-tiedosto.

    2. Vieritä tiedoston alareunaan. Liitä tämä koodi heti </body>-lopputunnisteen yläpuolelle:

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

    Koodisi pitäisi näyttää tältä:

    Koodinpätkän sisällyttäminen Takaisin alkuun ‑painikkeeseen
    ]

    1. Napauta 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 %}

    Demokauppa

    Vieraile demokaupassa nähdäksesi esimerkin tästä mukautuksesta.

Oletko valmis aloittamaan myynnin Shopifyssa?

Kokeile ilmaiseksi