Miten tehdä verkkosivustosta verkkokauppa Shopifyn Osta-painikkeen avulla

Voit käyttää Shopifyta verkkomyyntiin, vaikka et haluaisikaan rakentaa kaikenkattavaa verkkokauppaa.

Osta-painikkeen avulla voit ansaita rahaa millä tahansa verkkosivulla, kuten blogissa, portfoliossa tai sosiaalisen median tilillä.

Alta löydät ohjeet Osta-painikkeen upottamiseen minkä tahansa tyyppiseen verkkosivustoon, jotta kävijät voivat ostaa tuotteita sen avulla.

Mikä on Osta-painike?

Shopifyn Osta-painikkeen avulla voit rakentaa ja upottaa kassavaihtoehdon mihin tahansa verkkosivustoon, jotta asiakkaat voivat ostaa tuotteitasi suoraan vierailemansa sivun kautta.

Shopify luo koodin, jonka avulla voit upottaa sivustollesi helposti asennettavan, mobiililaitteille optimoidun ja turvallisen painikkeen. Näin voit esitellä myytäviä tuotteitasi itsellesi luontevimmalla tavalla. 

Voit myös mukauttaa Osta-painikkeen yhteydesä näkyviä väriteemaa, tuotteiden tietoja ja tuotekuvia vastaamaan sivusi tyyliä.

Lue lisää Shopifyn Osta-painikkeesta.

Aloita Shopifyn Osta-painikkeen käyttö kolmessa vaiheessa

1. Lisää Osta-painike myyntikanavaksi Shopify-kauppaasi

Aloita kirjautumalla Shopifyhin. Jos Osta-painike näkyy jo lueteltuna vasemmanpuoleisen valikon myyntikanavissasi, voit siirtyä suoraan vaiheeseen 2.

Työpöydällä

1. Siirry Shopify App Storen Buy Button -myyntikanavasivulle.

1. Asenna sovellus
2. Kiinnitä sovellus hallintavalikkoon (valinnainen)

Jos et kiinnitä Osta-painiketta, löydät sen taas napsauttamalla Myyntikanavat ja sitten aennetuista kanavista Osta-painike.

Mobiililaitteella

• Avaa Shopify-sovellus mobiililaitteellasi ja valitse alavalikosta Kauppa.
• Valitse Myyntikanavat-kohdan vieressä Lisää kanava iPhonessa tai +-symboli Androidissa.
• Valitse Osta painike ja napauta Lisää Osta-painike.

2. Luo Osta-painike

Kun olet lisännyt Osta-painikkeen myyntikanavaksi, olet valmis luomaan Osta-painikkeen.

Napauta Osta-painike-välilehdellä kohtaa Luo Osta-painike.

Voit luoda Osta-painikkeen yhdelle tuotteelle tai koko tuotemallistolle. Seuraavalla näytöllä sinua pyydetään valitsemaan, kummanko vaihtoehdon haluat valita.

Valitse vaihtoehto ja sitten tuotteet, joille haluat luoda Osta-painikkeet.

Kun olet tehnyt valintasi, pääset Osta-painikkeen muokkaustyökaluun, jossa voit mukauttaa Osta-painikkeen ulkoasua.

Osta-painikkeen mukauttaminen

Osta-painikkeen mukautustyökalun vasemmalla puolella näkyy useita vaihtoehtoja, joilla voit mukauttaa Osta-painikkeen ulkoasua. Oikealla puolella näkyy esikatselun siitä, miltä Osta-painike näyttää.

Säädä vasemmalla olevia vaihtoehtoja mieleiseksesi. Esikatselu päivittyy automaattisesti, joten voit nähdä, miltä Osta-painike näyttää mukautusten aikana. Voit myös tarkastella, miltä Osta-painike näyttää työpöydällä ja mobiililaitteilla napsauttamalla muokkaustyökalun yläosassa olevaa työpöytä- tai mobiilikuvaketta.

Tässä on erittely mukautettavista vaihtoehdoista:

• Tuoteversio: Valitse, mitkä tuotteen versiot haluat olevan ostettavissa Osta-painikkeen kautta. Oletuksena kaikki versiot ovat valittuina.
• Asettelu: valitse Perusmalli, Klassinen tai Koko näkymä. Oikealla näet esikatselun kustakin asettelusta, kun valitset sen Asettelu-pudotusvalikosta.
• Toiminta, kun painiketta klikataan: Valitse Lisää tuote ostoskoriin, Suoraan kassalle tai Avaa tuotteen tiedot. Lisää tuote ostoskoriin -vaihtoehto luo ostoskori-widgetin näytön oikealle puolelle. Suoraan kassalle -vaihtoehto luo Osta nyt -painikkeen, joka vie käyttäjän suoraan kassalle (huomaa, että asiakkaat voivat lisätä ostoskoriin vain yhden tuotteen tämän vaihtoehdon avulla). Avaa tuotteen tiedot -vaihtoehto luo Näytä tuote -painikkeen, joka avaa ponnahdusikkunan, joka sisältää tietoa tuotteesta ja Lisää ostoskoriin -painikkeen.
• Painikkeen tyyli: tässä kohdassa voit mukauttaa Osta-painikkeen värejä, fonttia, kokoa ja kulmien muotoa.
• Asettelu: Asettelu-valikossa painikkeen asettelua voi muokata tarkemmin. Voit mukauttaa fonttivärejä, painikkeen tekstiä ja typografiaa.
• Ostoskori: Tässä kohdassa voit säätää ostoskori-widgetin asetuksia, kuten sen tekstiä ja värejä. Huomaa, että tämä vaihtoehto on harmaana, jos käytät Suoraan kassalle -asettelua, koska tässä vaihtoehdossa ei ole ostoskori-widgetiä.
• Yksityiskohtainen ponnahdusikkuna: jos valitset Toiminta, kun painiketta painetaan -kohdassa Avaa tuotteen tiedot -vaihtoehdon, voit mukauttaa tämän ponnahdusikkunan tekstiä, värejä ja typografiaa tässä osiossa.
• Lisäasetukset: Tässä kohdassa voit mukauttaa tapaa, jolla kassa palvelee käyttäjää. Voit valita joko Avaa ponnahdusikkuna (joka luo kassaa varten ponnahdusikkunan, joka sulkeutuu, kun tilaus on valmis) tai Ohjaa samalle välilehdelle (joka vie käyttäjän Shopify-kauppasi kassasivulle ja palauttaa käyttäjän sivullesi, kun maksutapahtuma on valmis).

Ota huomioon, että näiden asetusten mukauttaminen ei muuta jo upotettuja Osta-painikkeita. 

Kun olet tyytyväinen painikkeen ulkoasuun, napsauta oikeassa yläkulmassa olevaa Seuraava -painiketta.

3. Lisää Osta-painikkeen upotuskoodi verkkosivustosi HTML:ään

Kun klikkaat Seuraava, Osta-painikkeen upotuskoodi luodaan automaattisesti. Napsauta Kopioi koodi -painiketta, kun olet valmis upottamaan sen verkkosivulle.

Kopioimasi koodi voidaan liittää minkä tahansa verkkosivun HTML-koodiin. Se luo Osta-painikkeen ja ostoskorin, jotka yhdistyvät suoraan Shopify-hallintapaneeliin, jolloin voit hallita ja käsitellä tilauksia mistä tahansa verkkosivulta käsin.

Upotuskoodin lisääminen vaihtelee sen mukaan, miltä haluat painikkeen näyttävän ja mitä verkkosivun rakennustyökalua ja teemaa käytät.

Osta-painikkeen skriptitunnisteiden lisääminen

Jotkin verkkosivujen rakennustyökalut edellyttävät skriptitunnisteiden liittämistä erikseen sivun otsikkoon ja loput koodista sivun muuhun tekstiin kohtaan, jossa Osta-painikkeen halutaan näkyvän.

Tätä varten sinun on erotettava Osta-painikkeen upotuskoodin skriptielementti div-elementistä.

Div-elementti näkyy koodin yläosassa. Se näyttää suunnilleen tältä:

<div id="product-component-1655929612938"></div>

Skriptielementti muodostaa loput upotuskoodista. Se alkaa kohdasta script type="text/javascriptM ja päättyy /script.

Kopioi ja liitä skriptielementti kokonaisuudessaan verkkosivustosi sivun otsikkoon.

Avaa sitten sivun muokkausohjelma sivulle, johon haluat lisätä Osta-painikkeen. Liitä div-elementti sivulle kohtaan, jossa haluat Osta-painikkeen näkyvän.

Tee mistä tahansa verkkosivustosta verkkokauppa Shopifyn Osta-painikkeen avulla

Osta-painikkeiden avulla myyjät voivat kohdata asiakkaita siellä, missä he ovat. Suora myynti asiakkaille ilman ohjaamista toiselle sivulle vähentää kitkaa ja voi auttaa lisäämään myyntiä.

Osta-painikkeet ovat helppo tapa käyttää Shopifyta ilman uuden verkkosivuston rakentamista. Ne sopivat esimerkiksi bloggaajille, taiteilijoille, kirjailijoille, suunnittelijoille, podcastajn tekijöille, vaikuttajille ja kaikille muille, jotka haluavat ansaita rahaa työstään.