Miten tehdä verkkosivustosta verkkokauppa Shopifyn Osta-painikkeen avulla

Voit käyttää Shopifytä verkkomyyntiin, vaikka et haluaisikaan rakentaa kokonaista verkkokauppaa.

Voit ansaita rahaa Osta-painikkeen avulla millä tahansa verkkosivulla, kuten blogissa, portfoliossa tai sosiaalisen median tilillä. Se lisää sivulle tuotetiedot, upotetun ostoskorin ja turvallisen kassan, jotta kävijät voivat ostaa tuotteita poistumatta sivulta.

Jos blogiisi, portfolioosi tai omalle verkkosivustollesi ohjautuu jo kävijöitä, tämä liikenne on arvokasta. Ilman suoraa ostomahdollisuutta kävijän täytyy kuitenkin siirtyä erikseen verkkokauppaan, jos hän haluaa ostaa sivulla näkyvän tuotteen. Osta-painike poistaa tämän vaiheen ja tuo kassan sinne, missä yleisö jo viettää aikaansa.

Alta löydät ohjeet Osta-painikkeen käyttökohteisiin ja sen 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 tarvitsematta siirtyä erilliseen verkkokauppaan.

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 lisätä Osta-painikkeen yksittäiselle tuotteelle tai kokonaiselle tuotemallistolle. Painike voi näyttää tuotetietoja, kuvia, hintoja ja kassavaihtoehdon millä tahansa sivulla, joka tukee mukautettua HTML-koodia.

Voit myös mukauttaa Osta-painikkeen yhteydessä näkyvää väriteemaa, kokoa, fonttia, tuotteiden tietoja ja tuotekuvia vastaamaan sivusi tyyliä. Voit esimerkiksi näyttää hinnan suoraan painikkeessa, piilottaa tuotekuvauksen tai valita, avautuuko kassa uuteen selainikkunaan.

Vinkki: Osta-painike toimii suoraan Shopify Adminin kautta. Voit hallita tilauksia, seurata varastoa ja tarkastella asiakastietoja yhdestä paikasta, vaikka tuotteitasi olisi esillä useilla eri verkkosivustoilla.

Lue lisää Shopifyn Osta-painikkeesta.

Missä Shopifyn Osta-painiketta voi käyttää?

Osta-painike on suunniteltu tavoittamaan asiakkaat siellä, missä he jo viettävät aikaansa. Se tuo ostoskorin ja kassan suoraan sisällön yhteyteen, mikä lyhentää matkaa kiinnostuksesta ostoon.

Blogikirjoitukset ja sisältösivut

Osta-painikkeen upottaminen blogikirjoitukseen yhdistää lukemisen ja ostamisen. Lukijat voivat ostaa tuotteen samassa yhteydessä joutumatta avaamaan uutta välilehteä tai etsimään tuotetta verkkokaupasta.

Hyödyt: Ostomahdollisuus näkyy sisällön vieressä juuri silloin, kun lukijan kiinnostus tuotteeseen rakentuu. Jos julkaiset esimerkiksi kynttilänvalmistusohjeen, Osta-painikkeen avulla lukijat voivat ostaa siihen liittyvät tarvikkeet suoraan artikkelista.

Erilliset laskeutumissivut

Tuotelanseerauksiin, kausikampanjoihin ja mainosliikenteeseen rakennetut laskeutumissivut sopivat hyvin Osta-painikkeille. Sivu on jo suunniteltu ohjaamaan kävijä tiettyyn toimintaan, ja Osta-painike toimii suorana reittinä kassalle.

Hyödyt: Mitä vähemmän vaiheita mainoksen klikkauksen ja kassan välissä on, sitä vähemmän syitä asiakkaalla on keskeyttää ostaminen. Osta-painike pitää ostotapahtuman samalla sivulla.

Kumppani- ja kumppanuusmarkkinointisivustot

Jos vaikuttajat, kumppanuusmarkkinoijat tai mediakumppanit esittelevät tuotteitasi omilla sivustoillaan, Osta-painikkeen avulla kassa näkyy suoraan kumppanin sivulla.

Hyödyt: Tuotteesi voivat tuottaa myyntiä kumppanisivustoilta, mutta tilausten hallinta pysyy Shopify Adminissa. Kumppanien ei tarvitse käsitellä maksuja tai toimituksia.

Portfoliot ja henkilökohtaiset verkkosivustot

Osta-painikkeet sopivat esimerkiksi bloggaajille, taiteilijoille, kirjailijoille, suunnittelijoille, podcastien tekijöille, muusikoille, vaikuttajille ja kaikille muille, jotka haluavat ansaita rahaa työstään ilman erillisen verkkokaupan rakentamista.

Hyödyt: Sivuston nykyinen ulkoasu ja rakenne säilyvät, mutta mukaan lisätään verkkokauppatoimintoja. Sisältöä ei tarvitse siirtää uuteen paikkaan eikä ylläpitää toista verkkosivustoa.

Sähköpostikampanjat, uutiskirjeet ja sosiaalinen media

Jotkin sähköpostityökalut tukevat upotettua HTML-koodia, jolloin Osta-painikkeen voi lisätä suoraan sähköpostimarkkinointikampanjaan. Voit myös jakaa esimerkiksi yksityisviestissä tai sosiaalisen median julkaisussa linkin sivulle, jossa Osta-painike on käytössä.

Hyödyt: ostomahdollisuus sähköpostiviestissä, julkaisussa tai kampanjasivulla vähentää ylimääräisiä vaiheita ja lyhentää matkaa kiinnostuksesta kassalle.

Ponnahdusikkunat ja kampanjabannerit

Osta-painikkeita voi upottaa verkkosivujen ponnahdusikkunoihin tai kampanjabannereihin. Näin esillä oleva tuote tai määräaikainen tarjous voidaan yhdistää välittömään ostomahdollisuuteen.

Hyödyt: Ponnahdusikkuna kiinnittää huomion tietyllä hetkellä, kuten sivua selattaessa, poistumisaikeen yhteydessä tai ajastetun viiveen jälkeen. Osta-painike auttaa kävijää toimimaan heti.

Vinkki: Osta-painikkeita kannattaa käyttää ensisijaisesti ulkoisilla verkkosivustoilla ja blogeissa. Jos niitä lisätään sivuille, jotka ovat jo osa Shopify-verkkokauppaa, ne voivat häiritä verkkokaupan omaa kassaprosessia.

Aloita Shopifyn Osta-painikkeen käyttö kolmessa vaiheessa

Näiden vaiheiden avulla voit lisätä Osta-painikkeen Shopify-kauppaan, luoda ensimmäisen painikkeen ja upottaa koodin verkkosivustollesi.

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 nopeaa käyttöä varten (valinnainen).

Jos et kiinnitä Osta-painiketta, löydät sen myöhemmin klikkaamalla Myyntikanavat-kohtaa ja valitsemalla asennetuista 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, kumman vaihtoehdon haluat valita.

Valitse vaihtoehto ja sitten tuotteet, joille haluat luoda Osta-painikkeet. Jos luot painikkeen mallistolle, voit näyttää kokonaisen tuotemalliston yhdessä upotuksessa.

Kun olet tehnyt valintasi, pääset Osta-painikkeen muokkaustyökaluun, jossa voit mukauttaa Osta-painikkeen ulkoasua ja toimintaa ennen upotuskoodin luomista.

Osta-painikkeen mukauttaminen

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

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

Tässä on erittely mukautettavista vaihtoehdoista:

• Tuoteversio: Valitse, mitkä tuotteen versiot haluat tarjota ostettaviksi 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. Eri asettelut vaikuttavat siihen, kuinka paljon tuotetietoja painikkeen vieressä näytetään.
• 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, jolloin kävijä voi jatkaa selaamista ja lisätä tuotteita ennen kassalle siirtymistä. Suoraan kassalle -vaihtoehto luo Osta nyt -painikkeen, joka vie käyttäjän suoraan kassalle. Huomaa, että asiakkaat voivat ostaa vain yhden tuotteen kerrallaan tämän vaihtoehdon avulla. Avaa tuotteen tiedot -vaihtoehto luo Näytä tuote -painikkeen, joka avaa ponnahdusikkunan. Se sisältää tuotetietoja, versioita, kuvia ja Lisää ostoskoriin -painikkeen.
• Painikkeen tyyli: tässä kohdassa voit mukauttaa Osta-painikkeen värejä, fonttia, kokoa ja kulmien muotoa, jotta painike sopii brändiisi.
• Asetteluasetukset: Tässä kohdassa painikkeen asettelua voi muokata tarkemmin. Voit mukauttaa esimerkiksi kohdistusta, fonttivärejä, painikkeen tekstiä ja typografiaa.
• Ostoskori: Tässä kohdassa voit säätää ostoskori-widgetin asetuksia, kuten sen tekstiä ja värejä. Voit myös lisätä tilausviestikentän, jolla asiakkaat voivat antaa erityisohjeita. Huomaa, että ostoskorin muokkaus on käytettävissä vain, jos olet valinnut vaihtoehdon Lisää tuote ostoskoriin tai Avaa tuotteen tiedot.
• Yksityiskohtainen ponnahdusikkuna: jos valitset Toiminta, kun painiketta klikataan -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 toimii käyttäjälle. Voit valita joko Avaa ponnahdusikkuna, joka luo kassaa varten ponnahdusikkunan ja 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 alkuperäiselle sivulle, kun maksutapahtuma on valmis.

Ota huomioon, että näiden asetusten mukauttaminen ei muuta jo upotettuja Osta-painikkeita. Muutokset koskevat vain uusia Osta-painikkeita, jotka luot jatkossa. Jos haluat päivittää sivustolla jo näkyvän painikkeen, luo uusi koodi ja korvaa vanha upotus.

Kun olet tyytyväinen painikkeen ulkoasuun, klikkaa oikeassa yläkulmassa näkyvää Seuraava-painiketta.

3. Lisää Osta-painikkeen upotuskoodi verkkosivustosi HTML-koodiin

Kun klikkaat Seuraava-kohtaa, Shopify luo Osta-painikkeen upotuskoodin automaattisesti. Klikkaa Kopioi koodi -painiketta, kun olet valmis upottamaan sen verkkosivulle.

Kopioimasi koodi voidaan liittää minkä tahansa verkkosivun HTML-koodiin. Se luo Osta-painikkeen ja valintojesi mukaan myös upotetun ostoskorin, jotka yhdistyvät suoraan Shopify Adminiin. Näin voit hallita ja käsitellä tilauksia Shopify-kaupastasi riippumatta siitä, millä verkkosivulla painike näkyy.

Upotuskoodin lisääminen vaihtelee sen mukaan, miltä haluat painikkeen näyttävän ja mitä verkkosivuston rakennustyökalua ja teemaa käytät. Joissakin alustoissa on erillinen HTML-lohko tai koodiwidget, kun taas toisissa sivun lähdekoodia täytyy muokata suoraan.

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 Osta-painikkeen upotuskoodin skriptielementti on erotettava 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/javascript"> ja päättyy kohtaan </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.

Tallenna muutokset ja esikatsele sivu varmistaaksesi, että Osta-painike näkyy oikein.

Tee mistä tahansa verkkosivustosta verkkokauppa Shopifyn Osta-painikkeen avulla

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

Jos verkkosivustosi tai blogisi houkuttelee jo kävijöitä, Osta-painike luo suoran reitin kassalle sillä sivulla, jolle kävijä on jo saapunut. Erillistä kauppaa ei tarvitse rakentaa eikä erillistä uudelleenohjausta hallita. Asiakas näkee tuotteen, klikkaa painiketta ja siirtyy kassalle.

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

Kaikki Osta-painikkeen kautta tulevat tilaukset voidaan hallita samasta Shopify Administa ilman erillisiä työkaluja. Tämä helpottaa tilausten, varaston ja asiakastietojen hallintaa myös silloin, kun tuotteita myydään useilla eri sivustoilla.