Osta-painikkeen luominen

Huomaa

Sinulta veloitetaan kolmannen osapuolen tapahtumamaksuja aina, kun asiakas tekee ostoksen Osta-painiketta käyttämällä, ellet ota käyttöön myös Shopify Payments -palvelua.

Kun olet lisännyt Osta-painikkeen myyntikanavan Shopify Adminissa, voit luoda Osta-painikkeen tuotteelle tai kokoelmalle.

Kun olet luonut Osta-painikkeen, kopioi automaattisesti luotu koodin ja lisää koodi sitten verkkosivulle tai blogipostaukseen, jossa haluat painikkeen näkyvän. Voit esimerkiksi haluta lisätä osta-painikkeen WordPress-blogiin tai Squarespace-sivustoon.

Osta-painikkeen ulkoasua ei voi muuttaa, kun olet sulauttanut sen verkkosivullesi. Jos haluat muuttaa painikkeen ulkoasua, sinun on luotava kanavaan uusi painike ja korvattava alkuperäinen koodi uudella koodilla.

Osta-painikkeiden mukauttaminen

Voit muokata seuraavia seikkoja Osta-painikkeen ulkoasusta ja sen toimintatavasta:

• väri
• koko
• fontti
• painiketta klikkaamalla tapahtuva toimenpide
• sitä, avautuuko kassa uudessa selainikkunassa

Kun mukautat painiketta, voit esikatsella muutoksia. Voit kokeilla Osta-painikkeen toimintaa klikkaamalla esikatselua.

Asettelutyyli

Voit valita Osta-painikkeen asettelun.

Osta-painikkeiden asettelut

Basic	Valitse tämä asettelu, jos haluat lisätä Osta-painikkeen ilman tuotekuvaa. Voit haluta tehdä näin, jos tuotteet ovat jo nähtävillä muualla verkossa, mutta haluat vain lisätä painikkeen ostoksen tekemiseen.
Perinteinen	Valitse tämä asettelu, jos haluat näyttää tuotekuvan ja hinnan Osta-painikkeen vieressä. Tämä asettelu on kätevä tuotteiden nopeassa esikatselussa, esimerkiksi blogipostauksessa.
Kokonäkymä	Valitse tämä asettelu, jos haluat näyttää tuotekuvan, hinnan ja kuvauksen Osta-painikkeen vieressä. Tämä asettelu jäljittelee verkkokaupasi tuotetietosivua.

Osta-painikkeen toiminnot

Kun luot Osta-painikkeen, voit valita toiminnon, joka suoritetaan, kun painiketta napautetaan.

Huomaa

Jos sivulla on useampi kuin yksi Osta-painike, sinun on määritettävä kaikille niille sama toiminto.

Jos Osta-painike koskee kokoelmaa, toimenpide koskee kokoelman jokaista tuotetta.

• Lisää tuote ostoskoriin lisää tuotteen ostoskoriin. Asiakkaat voivat jatkaa ostoksia ja lisätä tuotteita ostoskoriin.
• Suoraan kassalle vie asiakkaan suoraan kassalle, jossa hän voi ostaa tuotteen. Asiakkaat eivät pysty lisäämään tuotteita tilauksiinsa.
• Avaa tuotetiedot näyttää Näytä tuote -painikkeen. Kun asiakas klikkaa painiketta, hän näkee tuotteen kuvauksen, voi valita jonkin käytettävissä olevista tuoteversioista ja lisätä tuotteen ostoskoriin. Jos tuotteesta on useita tuotekuvia, ne näkyvät myös.
  • Tämä vaihtoehto ei ole käytettävissä, kun valitset laajan pohjan, koska laaja pohja näyttää jo kaikki tuotetiedot.

Voit myös valita, avautuuko kassa uudessa selainikkunassa vai samassa välilehdessä kuin verkkosivusi. Oletusarvoisesti kassa avautuu uudessa ikkunassa.

Osta-painikkeen ulkoasu

• Painikkeen tyyli sisältää Osta-painikkeen painikeosan muodon, värin ja typografian.
• Asettelu – valitsemastasi asettelutyylistä riippuen voit mukauttaa asetuksia, kuten painikkeen kohdistamista, kuvan kokoa, painikkeen tekstiä, fonttia, väriä ja kokoa.

• Ostoskori sisältää sulautetun ostoskorin teksti- ja väriasetukset. Voit ottaa käyttöön ja mukauttaa myös Tilausviesti-kentän tunnuksen. Voit käyttää tilausviestejä, kun haluat kerätä asiakkailta erityisiä ohjeita tilauksen valmistelua ja toimittamista varten. Lisätietoja-kentän avulla voit viestiä asiakkaillesi.

  • Voit muokata ostoskorin asetuksia vain, jos olet valinnut painikkeen toiminnoksi Lisää tuote ostoskoriin tai Avaa tuotetiedot.

• Yksityiskohtainen ponnahdusikkuna sisältää tuotetietojen ponnahdusikkunan asetukset. Voit muokata painikkeen tekstiä, valita näytetäänkö määräkenttä, valita taustan ja selitteiden värit sekä selitteiden fontin ja fonttikoon. Voit muokata näitä asetuksia vain, jos olet valinnut painikkeen toiminnoksi Avaa tuotetiedot.

Osta-painikkeen luominen yhdelle tuotteelle

Voit luoda Osta-painikkeen yksittäiselle tuotteelle. Osta-painike voi sisältää yhden variantin tai kaikki tuotteen variantit. Kun luot Osta-painikkeen, valitset asettelutyylin ja mukautat painikkeen värin, tekstin, ulkoasun sekä tapahtumavaiheet asiakkaan klikattua painiketta. Katso lisätietoja Osta-painikkeiden mukauttamisesta.

Ennen kuin luot tuotteelle Osta-painikkeen, lisää tuote Shopify Adminissa ja tuo se Osta-painikkeen myyntikanavan käytettäväksi.

Tee näin:

Tietokone

1. Valitse Shopify Adminissa Asetukset > Sovellukset ja myyntikanavat.

2. Klikkaa Sovellukset ja myyntikanavat -sivulla Buy Button.

3. Klikkaa Avaa myyntikanava.

4. Klikkaa kohtaa Luo Osta-painike.

5. Valitse Tuotteen Osta-painike.

6. Valitse tuote luettelosta tai etsi tuote käyttämällä hakua. Klikkaa kohtaa Valitse.

7. Valinnainen: mukauta Osta-painiketta.

   1. Jos tuotteesta on tuoteversioita, valitse Kaikki versiottai valitse haluamasi versio.
   2. Valitse pohjan tyyli ja toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   3. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

8. Klikkaa Seuraava.

9. Klikkaa kohtaa Kopioi koodi.

10. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

11. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

iPhone

Vinkki

Jos haluat nähdä, miltä painike näyttää, napauta Esikatselu-valintaa.

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Myyntikanava-osiossa Osta-painiketta.
3. Klikkaa kohtaa Luo Osta-painike.
4. Valitse Tuotteen Osta-painike.
5. Valitse tuote luettelosta tai etsi tuote käyttämällä hakua. Klikkaa kohtaa Valitse.

6. Valinnainen: klikkaa kohtaa Mukauta.

   1. Jos tuotteesta on useita versioita, valitse Kaikki versiottai valitse haluamasi versio avattavasta luettelosta.
   2. Valitse pohjan tyyli ja toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   3. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

7. Klikkaa Valmis.

8. Klikkaa kohtaa Kopioi koodi.

9. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

10. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Android

Vinkki

Jos haluat nähdä, miltä painike näyttää, napauta Esikatselu-valintaa.

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Myyntikanava-osiossa Osta-painiketta.
3. Klikkaa kohtaa Luo Osta-painike.
4. Valitse Tuotteen Osta-painike.
5. Valitse tuote luettelosta tai etsi tuote käyttämällä hakua. Klikkaa kohtaa Valitse.

6. Valinnainen: klikkaa kohtaa Mukauta.

   1. Jos tuotteesta on useita versioita, valitse Kaikki versiottai valitse haluamasi versio avattavasta luettelosta.
   2. Valitse pohjan tyyli ja toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   3. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

7. Klikkaa Valmis.

8. Klikkaa kohtaa Kopioi koodi.

9. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

10. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Osta-painikkeen luominen kokoelmalle

Kun luot kokoelmalle Osta-painikkeen, luot itse asiassa painikkeen kokoelman jokaiselle tuotteelle.

Kun luot Osta-painikkeen, valitset asettelutyylin ja mukautat painikkeen värin, tekstin, ulkoasun sekä tapahtumavaiheet asiakkaan klikattua painiketta. Lue lisätietoja Osta-painikkeiden mukauttamisesta.

Ennen kuin luot kokoelman Osta-painikkeen, varmista, että olet

• lisännyt tuotteet Shopify Adminissa
• asettanut tuotteet saataville Osta-painikkeen myyntikanavaan
• luonut kokoelman.

Tee näin:

Tietokone

1. Valitse Shopify Adminissa Asetukset > Sovellukset ja myyntikanavat.

2. Klikkaa Sovellukset ja myyntikanavat -sivulla Buy Button.

3. Klikkaa Avaa myyntikanava.

4. Klikkaa kohtaa Luo Osta-painike.

5. Klikkaa kokoelman Osta-painiketta.

6. Valitse kokoelma tai etsi kokoelma käyttämällä hakua. Klikkaa kohtaa Valitse.

7. Valinnainen: mukauta Osta-painiketta.

   1. Valitse toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   2. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

8. Klikkaa Seuraava.

9. Klikkaa kohtaa Kopioi koodi.

10. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

11. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

iPhone

Vinkki

Jos haluat nähdä, miltä painike näyttää, napauta Esikatselu-valintaa.

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Myyntikanava-osiossa Osta-painiketta.
3. Klikkaa kohtaa Luo Osta-painike.
4. Klikkaa kokoelman Osta-painiketta.
5. Valitse kokoelma tai etsi kokoelma käyttämällä hakua. Klikkaa kohtaa Valitse.

6. Valinnainen: klikkaa kohtaa Mukauta.

   1. Valitse toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   2. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

7. Klikkaa Valmis.

8. Klikkaa kohtaa Kopioi koodi.

9. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

10. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Android

Vinkki

Jos haluat nähdä, miltä painike näyttää, napauta Esikatselu-valintaa.

1. Napauta Shopify-sovelluksessa …-painiketta.
2. Napauta Myyntikanava-osiossa Osta-painiketta.
3. Klikkaa kohtaa Luo Osta-painike.
4. Klikkaa kokoelman Osta-painiketta.
5. Valitse kokoelma tai etsi kokoelma käyttämällä hakua. Klikkaa kohtaa Valitse.

6. Valinnainen: klikkaa kohtaa Mukauta.

   1. Valitse toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
   2. Maksutapahtuma avaa oletusarvoisesti uuden ikkunan, mutta voit myös valita kassan avautumaan verkkosivun kanssa samaan välilehteen. Klikkaa Lisäasetukset >Uudelleenohjaus samaan välilehteen.

7. Klikkaa Valmis.

8. Klikkaa kohtaa Kopioi koodi.

9. Avaa sen verkkosivun HTML-editori, jossa haluat näyttää Osta-painikkeen. Lue lisää kohdasta Osta-painikkeen koodin lisääminen HTML:ään.

10. Liitä koodi HTML:ään kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.