Lisää ostoskoriisi Jatka ostoksia ‑linkki

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

Voit lisätä ostoskorisivullesi Jatka ostoksia ‑linkin, jonka avulla asiakkaat voivat nopeasti palata selailemaan tuotteita, sen jälkeen kun he ovat lisänneet jotakin ostoskoriinsa. Voit valita, mihin lisättävä linkki palauttaa asiakkaat: tuoteluettelosivullesi, etusivullesi vai kokoelmasivulle, jota he katselivat viimeksi ennen ostoskoriin siirtymistä.

Jatka ostoksia ‑linkin lisääminen ostoskorisivullesi

Tietokone

1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
3. Klikkaa Osat-hakemistossa kohtaa cart-template.liquid. Jos teemassasi ei ole tätä tiedostoa, valitse silloin Mallit-hakemistosta cart.liquid.
4. Etsi Kassa-painikkeen koodi hakemalla tiedostosta kohta name="checkout". Kassapainikkeen koodirivi vaihtelee teeman mukaan, mutta se näyttää suurin piirtein tältä:

<button type="submit" id="checkout" name="checkout" class="btn">
   {{ 'cart.general.checkout' | t }}
</button>

 5. Seuraava vaihe on liittää uusi koodirivi, jotta voit luoda Jatka ostamista -linkin. Liitettävä koodi riippuu siitä, mihin sivuun haluat linkin osoittavan: * Jos haluat lisätä tuoteluettelosivullesi osoittavan linkin, liitä alla oleva koodi uudelle riville joko ennen Kassa-painikkeen koodia tai sen jälkeen:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Lisää etusivullesi vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a href="/" title="Continue shopping">Continue shopping</a>

• Lisää viimeksi katsottuun kokoelmaan vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

 6. Klikkaa Tallenna. Jos lisäsit tuoteluettelosivullesi tai etusivullesi vievän linkin, olet valmis.Jos lisäsit viimeksi katsottuun kokoelmaan vievän linkin, sinun on lisättävä teemasi koodiin JavaScriptiä. Jatka noudattamalla ohjeita.

 7. Klikkaa Ulkoasu-hakemistossa theme.liquid.

 8. Etsi tiedoston alareunassa oleva </body>-lopputunniste. Liitä seuraava koodi lopputunnisteen </body> yläpuolelle:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

 9. Klikkaa Tallenna.

iPhone

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Hallitse teemoja.
4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
5. Klikkaa Osat-hakemistossa kohtaa cart-template.liquid. Jos teemassasi ei ole tätä tiedostoa, valitse silloin Mallit-hakemistosta cart.liquid.
6. Etsi Kassa-painikkeen koodi hakemalla tiedostosta kohta name="checkout". Kassapainikkeen koodirivi vaihtelee teeman mukaan, mutta se näyttää suurin piirtein tältä:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

1. Seuraava vaihe on liittää uusi koodirivi Jatka ostoksia ‑linkin luomiseksi. Liitettävä koodi riippuu siitä, mihin sivuun haluat linkin vievän:
   • Lisää tuoteluettelosivullesi vievä linkki liittämällä seuraava koodi uudelle riville joko ennen **Kassa*-painikkeen koodia tai sen jälkeen:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Lisää etusivullesi vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a href="/" title="Continue shopping">Continue shopping</a>

• Lisää viimeksi katsottuun kokoelmaan vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

1. Valitse Tallenna. Jos lisäsit tuoteluettelosivullesi tai etusivullesi vievän linkin, olet valmis. Jos lisäsit viimeksi katsottuun kokoelmaan vievän linkin, sinun on lisättävä teemasi koodiin JavaScriptiä. Jatka seuraavien vaiheiden mukaisesti.
2. Valitse Ulkoasu-luettelosta theme.liquid.
3. Etsi lähellä tiedoston alareunaa oleva lopputunniste </body>. Liitä seuraava koodi lopputunnisteen </body> alle:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

1. Klikkaa Tallenna.

Android

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta myyntikanavat -osiossa Verkkokauppa.
3. Napauta Hallitse teemoja.
4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
5. Klikkaa Osat-hakemistossa kohtaa cart-template.liquid. Jos teemassasi ei ole tätä tiedostoa, valitse silloin Mallit-hakemistosta cart.liquid.
6. Etsi Kassa-painikkeen koodi hakemalla tiedostosta kohta name="checkout". Kassapainikkeen koodirivi vaihtelee teeman mukaan, mutta se näyttää suurin piirtein tältä:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

1. Seuraava vaihe on liittää uusi koodirivi Jatka ostoksia ‑linkin luomiseksi. Liitettävä koodi riippuu siitä, mihin sivuun haluat linkin vievän:
   • Lisää tuoteluettelosivullesi vievä linkki liittämällä seuraava koodi uudelle riville joko ennen **Kassa*-painikkeen koodia tai sen jälkeen:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Lisää etusivullesi vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a href="/" title="Continue shopping">Continue shopping</a>

• Lisää viimeksi katsottuun kokoelmaan vievä linkki liittämällä seuraava koodi uudelle riville joko ennen Kassapainikkeen koodia tai sen jälkeen:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

1. Valitse Tallenna. Jos lisäsit tuoteluettelosivullesi tai etusivullesi vievän linkin, olet valmis. Jos lisäsit viimeksi katsottuun kokoelmaan vievän linkin, sinun on lisättävä teemasi koodiin JavaScriptiä. Jatka seuraavien vaiheiden mukaisesti.
2. Valitse Ulkoasu-luettelosta theme.liquid.
3. Etsi lähellä tiedoston alareunaa oleva lopputunniste </body>. Liitä seuraava koodi lopputunnisteen </body> alle:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

1. Klikkaa Tallenna.

Painikkeen muotoilun lisääminen (valinnainen)

Jos käytät ilmaista Shopify-teemaa, voit lisätä Jatka ostoksia ‑linkkiisi muotoilun, jotta se näyttää painikkeelta. Jos lisäät painikelinkkisi koodiin luokkamääritteen, voit tehdä painikkeesta teemasi muiden painikkeiden tyylisen. Kaikissa ilmaisissa Shopify-teemoissa käytetään samaa luokkanimeä ensisijaisissa painiketyyleissä, ja useimmissa käytetään samaa luokkanimeä toissijaisissa painiketyyleissä.

Näin voit lisätä ensisijaisen painikkeen tyylin Jatka ostoksia ‑linkkiisi:

Lisää määrite class="btn" liittämällesi koodiriville, jotta voit lisätä Jatka ostoksia ‑linkin. Koodisi pitäisi näyttää tältä:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Näin voit lisätä toissijaisen painikkeen tyylin Jatka ostoksia ‑linkkiisi:

Huomaa

Tämän luokan lisääminen ei vaikuta Boundless-teemaan.

Jos käytät muuta ilmaisteemaa kuin Supply-teemaa, lisää määrite class="btn--secondary" liittämällesi koodiriville lisätäksesi Jatka ostoksia ‑linkin. Koodisi pitäisi näyttää tältä:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Jos käytät Supply-teemaa, lisää määrite class="btn-secondary" liittämällesi koodiriville lisätäksesi Jatka ostoksia ‑linkin. Koodisi pitäisi näyttää tältä:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>