Osta-painikkeen luominen

Kun olet lisännyt Osta-painikkeen myyntikanavan Shopifyn ohjausnäkymääsi, voit luoda Osta-painikkeen tuotteelle tai kokoelmalle.

Kun olet luonut Osta-painikkeen, kopioit automaattisesti luodun koodin ja lisäät sen sitten verkkosivulle tai blogipostaukseen, jossa haluat painikkeen näkyvän. Voit esimerkiksi haluta lisätä Osta-painikkeen Wordpress-blogiisi tai Squarespace-verkkosivullesi.

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

Tällä sivulla

Osta-painikkeiden mukauttaminen

Voit mukauttaa Osta-painikkeen ulkoasua ja toimintaa:

sen väriä
sen kokoa
sen fonttia
toimintoa, joka tapahtuu, kun painiketta napsautetaan
sitä, avautuuko kassa uuteen selainikkunaan

Kun mukautat painiketta, voit esikatsella muutoksiasi. Voit testata Osta-painikkeen toimintaa napsauttamalla esikatselua.

Pohjan tyyli

Voit valita Osta-painikkeen pohjan.

Kuvaukset Osta-painikkeiden saatavilla olevista Perus-, Klassinen- ja Laaja näkymä -pohjista.
Perus	Valitse tämä pohja, jos haluat lisätä Osta-painikkeen ilman tuotekuvaa. Voit haluta tehdä näin, jos tuotteesi ovat jo näkyvillä muualla verkossa ja haluat vain lisätä painikkeen ostamista varten.
Klassinen	Valitse tämä pohja, jos haluat näyttää tuotekuvan ja hinnan Osta-painikkeen vieressä. Tämä pohja on hyödyllinen tuotteen nopeassa esikatselussa, kuten blogipostauksessa.
Laaja näkymä	Valitse tämä pohja, jos haluat näyttää tuotekuvan, hinnan ja kuvauksen Osta-painikkeen vieressä. Tämä pohja jäljittelee verkkokauppasi tuotetietosivua.

Osta-painikkeen toiminnot

Kun luot Osta-painikkeen, voit valita, mitä tapahtuu, kun painiketta klikataan.

Jos Osta-painike on tarkoitettu kokoelmalle, toiminto koskee jokaista kokoelman tuotetta.

Lisää tuote ostoskoriin lisää tuotteen ostoskoriin. Asiakkaat voivat jatkaa ostosten tekemistä ja lisätä ostoskoriin muita tuotteita.
Suoraan kassalle ohjaa asiakkaan suoraan kassalle, jossa hän voi ostaa tuotteen. Asiakkaat eivät voi lisätä tilaukseensa muita tuotteita.
Avaa tuotetiedot näyttää Tarkastele tuotetta -painikkeen. Kun asiakas klikkaa painiketta, hän näkee tuotteen kuvauksen, voi valita saatavilla olevia tuoteversioita ja lisätä tuotteen ostoskoriin. Jos tuotteella on useita tuotekuvia, myös ne näytetään.
- Tämä vaihtoehto ei ole käytettävissä, kun valitset Täysi näkymä -pohjan, koska Täysi näkymä -pohja näyttää jo kaikki tuotetiedot.

Voit myös valita, avautuuko kassa uuteen selainikkunaan vai samalle välilehdelle verkkosivusi kanssa. Oletusarvoisesti kassa avautuu uuteen ikkunaan.

Osta-painikkeen ulkoasu

Painikkeen tyyli sisältää Osta-painikkeen painikkeen muodon, värin ja typografian.
Pohja: valitsemastasi pohjan tyylistä riippuen voit mukauttaa asetuksia, kuten painikkeen tasausta, kuvan kokoa, painikkeen tekstiä, fonttia, väriä ja kokoa.
Ostoskori sisältää sulautetun ostoskorin teksti- ja värivaihtoehdot. Voit myös ottaa käyttöön ja mukauttaa kentän merkintää Tilausviesti -kentän. Tilausviesteillä voit kerätä asiakkailta erityisohjeita tilauksen valmistelua ja toimitusta varten. Lisätiedot -kentän avulla voit välittää viestin asiakkaillesi.
- Voit muokata ostoskorin asetuksia vain, jos olet valinnut painikkeen toiminnoksi joko asetuksen Lisää tuote ostoskoriin tai Avaa tuotetiedot.
Yksityiskohtainen ponnahdusikkuna sisältää tuotetietojen ponnahdusikkunan asetukset. Voit mukauttaa painikkeen tekstiä, määräkentän sisällyttämistä, taustan ja merkintöjen värejä sekä merkintöjen fonttia ja fonttikokoa. Voit muokata näitä asetuksia vain, jos olet valinnut painikkeen toiminnoksi asetuksen Avaa tuotetiedot.

Osta-painikkeen luominen yksittäiselle tuotteelle

Voit luoda Osta-painikkeen yksittäiselle tuotteelle. Osta-painike voi sisältää yhden tai kaikki tuotteen versiot. Kun luot Osta-painikkeen, valitset sille pohjan tyylin ja mukautat painikkeen väriä, tekstiä ja ulkoasua sekä toiminnon, joka tapahtuu, kun asiakas klikkaa sitä. Lue lisää Osta-painikkeiden mukauttamisesta.

Ennen kuin luot Osta-painikkeen tuotteelle, sinun on täytynyt lisätä tuote Shopifyn ohjausnäkymään ja asettaa se saataville Osta-painike-myyntikanavassa.

Vaiheet:

Tietokone

Siirry Shopifyn ohjausnäkymässä kohtaan Myyntikanavat > Osta-painike.
Klikkaa Luo Osta-painike.
Klikkaa Tuotteen Osta-painike.
Valitse tuote luettelosta tai etsi tuote haun avulla. Klikkaa Valitse.
Valinnainen: mukauta Osta-painiketta.
1. Jos tuotteellasi on versioita, valitse Kaikki versiot tai valitse versio, jonka haluat sisällyttää.
2. Valitse pohjan tyyli ja toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
3. Oletusarvoisesti kassa avautuu uuteen ikkunaan, mutta voit valita kassan avautuvan samalle selainvälilehdelle verkkosivusi kanssa. Klikkaa Lisäasetukset > Uudelleenohjaa samalla välilehdellä.
Klikkaa Seuraava.
Klikkaa Kopioi koodi.
Avaa sen verkkosivun HTML-editori, jolla haluat näyttää Osta-painikkeen. Katso lisätietoja kohdasta Osta-painikkeen koodin lisääminen HTML-koodiin.
Liitä koodi HTML-koodiin siihen kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Mobiili

Napauta Shopify-sovelluksessa -kuvaketta.
Napauta **Myyntikanavat**-osiossa **Ostopainike**.
Napauta Luo Osta-painike.
Napauta Tuotteen Osta-painike.
Valitse tuote luettelosta tai etsi tuote haun avulla ja napauta sitten Valitse.
Valinnainen: Napauta **Mukauta**.
1. Jos tuotteellasi on useita versioita, valitse Kaikki versiot tai valitse versio pudotusluettelosta.
2. Valitse pohjan tyyli ja toiminto, joka tapahtuu, kun asiakas klikkaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
3. Oletusarvoisesti kassa avautuu uuteen ikkunaan, mutta voit valita kassan avautuvan samalle selainvälilehdelle verkkosivusi kanssa. Napauta Lisäasetukset > Uudelleenohjaa samalla välilehdellä.
Napauta Valmis.
Napauta Kopioi koodi.
Avaa sen verkkosivun HTML-editori, jolla haluat näyttää Osta-painikkeen. Katso lisätietoja kohdasta Osta-painikkeen koodin lisääminen HTML-koodiin.
Liitä koodi HTML-koodiin siihen kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Osta-painikkeen luominen kokoelmalle

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

Kun luot Osta-painikkeen, valitset sille pohjan tyylin ja mukautat painikkeen väriä, tekstiä ja ulkoasua sekä toiminnon, joka tapahtuu, kun asiakas klikkaa sitä. Lue lisää Osta-painikkeiden mukauttamisesta.

Ennen kuin luot Osta-painikkeen kokoelmalle, sinun on täytynyt:

Vaiheet:

Tietokone

Siirry Shopifyn ohjausnäkymässä kohtaan Myyntikanavat > Osta-painike.
Klikkaa Luo Osta-painike.
Napsauta Kokoelman osta-painike.
Valitse kokoelma tai etsi se haun avulla. Napsauta Valitse.
Valinnainen: mukauta Osta-painiketta.
1. Valitse toiminto, joka tapahtuu, kun asiakas napsauttaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
2. Oletusarvoisesti kassa avautuu uuteen ikkunaan, mutta voit valita kassan avautuvan samalle selainvälilehdelle verkkosivusi kanssa. Klikkaa Lisäasetukset > Uudelleenohjaa samalla välilehdellä.
Klikkaa Seuraava.
Klikkaa Kopioi koodi.
Avaa sen verkkosivun HTML-editori, jolla haluat näyttää Osta-painikkeen. Katso lisätietoja kohdasta Osta-painikkeen koodin lisääminen HTML-koodiin.
Liitä koodi HTML-koodiin siihen kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.

Mobiili

Napauta Shopify-sovelluksessa -kuvaketta.
Napauta **Myyntikanavat**-osiossa **Ostopainike**.
Napauta Luo Osta-painike.
Napauta Kokoelman osta-painike.
Valitse kokoelma tai etsi se haun avulla ja napauta sitten Valitse.
Valinnainen: Napauta **Mukauta**.
1. Valitse toiminto, joka tapahtuu, kun asiakas napsauttaa painiketta. Voit myös mukauttaa painikkeen ulkoasua.
2. Oletusarvoisesti kassa avautuu uuteen ikkunaan, mutta voit valita kassan avautuvan samalle selainvälilehdelle verkkosivusi kanssa. Napauta Lisäasetukset > Uudelleenohjaa samalla välilehdellä.
Napauta Valmis.
Napauta Kopioi koodi.
Avaa sen verkkosivun HTML-editori, jolla haluat näyttää Osta-painikkeen. Katso lisätietoja kohdasta Osta-painikkeen koodin lisääminen HTML-koodiin.
Liitä koodi HTML-koodiin siihen kohtaan, jossa haluat Osta-painikkeen näkyvän, ja tallenna sitten muutokset.