Shopify Vásárlás gomb – csinálj weboldalból boltot

A Shopify segítségével online értékesíthetsz, még akkor is, ha nem szeretnél teljes webáruházat létrehozni.

A Vásárlás gomb lehetővé teszi bármely weboldal monetizálását, legyen az blog, portfólió vagy közösségi média fiók.

Az alábbiakban megtudhatod, hogyan ágyazhatod be a Vásárlás gombot bármilyen típusú weboldalba, hogy a látogatók számára lehetővé tedd a termékek vásárlását.

Mi az a Vásárlás gomb?

A Vásárlás gomb segítségével létrehozhatod és beágyazhatod a pénztárfunkciót bármilyen típusú weboldalba, így az ügyfelek közvetlenül a meglátogatott oldalról vásárolhatják meg termékeidet.

A Shopify automatikusan generálja a termékek beágyazásához és megjelenítéséhez szükséges kódot, így a gomb egyszerűen beállítható, mobilbarát és biztonságos.

A Vásárlás gomb színsémáját, termékinformációit és termékképeit is testreszbahatod, hogy illeszkedjen az oldalad stílusához.

Tudj meg többet a Shopify Vásárlás gombról.

Kezdő lépések a Vásárlás gombbal: 3 lépés

1. Add hozzá a Vásárlás gomb értékesítési csatornát a Shopify áruházadhoz
2. Hozz létre egy Vásárlás gombot
3. Add hozzá a Vásárlás gomb beágyazási kódját a weboldalad HTML-jéhez

1. Add hozzá a Vásárlás gomb értékesítési csatornát a Shopify áruházadhoz

Kezdésként jelentkezz be a Shopify-ba. Ha a bal oldali menüben az értékesítési csatornák között látod a Vásárlás gombot, akkor ugorj a 2. lépésre.

Asztali gépen

1. Látogasd meg a Vásárlás gomb értékesítési csatorna oldalát a Shopify App Store-ban.

2. Telepítsd az alkalmazást

3. Rögzítsd az alkalmazást az admin navigációhoz (opcionális)

Ha nem rögzíted a Vásárlás gombot, később is megtalálhatod az „Értékesítési csatornák" menüpontra, majd a telepített csatornák alatt a „Vásárlás gomb" opcióra kattintva.

Mobilon

• Nyisd meg a Shopify alkalmazást a mobileszközödön, és válaszd az „Áruház" menüpontot az alsó menüből.
• Az „Értékesítési csatornák" mellett válaszd a „Csatorna hozzáadása" opciót iPhone-on vagy a „+" jelet Androidon.
• Válaszd a „Vásárlás gomb" lehetőséget, majd érintsd meg a „Vásárlás gomb hozzáadása" gombot.

2. Hozz létre egy Vásárlás gombot

Miután hozzáadtad a Vásárlás gomb értékesítési csatornát, készen állsz a Vásárlás gomb létrehozására.

A Vásárlás gomb fülön kattints a „Vásárlás gomb létrehozása" opcióra.

Létrehozhatsz Vásárlás gombokat egyetlen termékhez vagy termékek teljes kollekcióihoz. A következő képernyőn ki kell választanod, melyik lehetőséget részesíted előnyben.

Válassz egy opciót, majd jelöld ki, mely termékeidhez szeretnél Vásárlás gombokat létrehozni.

A kiválasztás után a Vásárlás gomb szerkesztőbe kerülsz, ahol testreszabhatod a gomb megjelenését.

Hogyan szabd testre a Vásárlás gombot

A Vásárlás gomb szerkesztőben a baloldalon számos beállítási lehetőséget látsz a gomb kinézetének és működésének testreszabásához. A jobb oldalon pedig előnézetet kapsz arról, hogyan fog kinézni a Vásárlás gombod.

Állítsd be a bal oldali opciókat ízlésed szerint. Az előnézet automatikusan frissül, így láthatod, hogyan néz ki a Vásárlás gombod a módosítások során. Azt is megnézheted, hogyan jelenik meg a gomb asztali és mobil képernyőkön, ha a szerkesztő tetején középen található asztali vagy mobil ikonokra kattintasz.

Íme a testreszabható opciók részletezése:

• Termékváltozat: válaszd ki, mely termékváltozatokat szeretnéd elérhetővé tenni a Vásárlás gombon keresztül. Alapértelmezés szerint minden változat ki lesz választva.

• Elrendezés: válassz az „Alap", „Klasszikus" és „Teljes nézet" között. A jobb oldalon minden elrendezés előnézetét láthatod, amikor kiválasztod az „Elrendezés" legördülő menüből.

• Művelet kattintáskor: válassz a „Termék hozzáadása a kosárhoz", „Közvetlen pénztárhoz" vagy „Termékadatok megnyitása" között. A „Termék hozzáadása a kosárhoz" opció egy kosár widgetet hoz létre a képernyő jobb oldalán. A „Közvetlen pénztárhoz" opció egy Vásárlás most gombot hoz létre, amely közvetlenül a pénztárhoz viszi a felhasználót (vedd figyelembe, hogy ezzel az opcióval az ügyfelek nem tudnak egynél több terméket hozzáadni a kosarukhoz). 

A „Termékadatok megnyitása" opció egy „Termék megtekintése" gombot hoz létre, ami egy felugró ablakot nyit meg a termékinformációkkal és egy Kosárba helyezés gombbal.

• Gomb stílusa: itt módosíthatod a Vásárlás gomb színeit, betűtípusát, méretét és sarkainak alakját.

• Elrendezés: az Elrendezés menü lehetővé teszi az elrendezés finomhangolását. Testreszabhatod a betűszíneket, a gomb szövegét és a tipográfiai beállításokat.

• Bevásárlókosár: Itt módosíthatod a bevásárlókosár widget beállításait, beleértve a szöveget és a színeket. Vedd figyelembe, hogy ez az opció szürkén jelenik meg, ha a "Közvetlen pénztárhoz" elrendezést használod, mivel ebben az esetben nincs kosár widget.

• Részletes felugró ablak: ha a „Termékadatok megnyitása" opciót választod a „Művelet kattintáskor" alatt, ebben a részben testreszabhatod a felugró ablak szövegét, színeit és tipográfiai beállításait.

• Speciális beállítások: itt módosíthatod, hogyan jelenjen meg a pénztár a felhasználó számára. Választhatod a „Felugró ablak megnyitása" opciót (amely egy felugró pénztárat hoz létre, ami a rendelés befejezésekor bezárul), vagy az „Átirányítás ugyanabban a fülben" opciót (ami a felhasználót a Shopify pénztár oldalára küldi, és a tranzakció befejezése után visszairányítja az oldaladra).

Ne feledd, hogy ezeknek a beállításoknak a módosítása nem változtatja meg a már beágyazott Vásárlás gombokat.

Ha elégedett vagy a dizájnnal, kattints a jobb felső sarokban található „Következő" gombra.

3. Add hozzá a Vásárlás gomb beágyazási kódját a weboldalad HTML-jéhez

Amikor a „Következő" gombra kattintasz, a Vásárlás gomb beágyazási kódja automatikusan generálódik. Kattints a „Kód másolása" gombra, ha készen állsz a beágyazásra egy weboldalon.

A másolt kód beilleszthető bármely weboldal HTML-jébe. Létrehoz egy Vásárlás gombot és kosarat, amely közvetlenül kapcsolódik a Shopify adminodhoz, lehetővé téve a rendelések kezelését és feldolgozását bármely weboldalról.

A beágyazási kód hozzáadásának folyamata attól függ, hogyan szeretnéd, hogy a gomb kinézzen, és melyik weboldal-építőt és témát használod.

Vásárlás gomb script címkék hozzáadása

Egyes weboldal-építők megkövetelik, hogy a script címkéket külön illeszd be a fejlécbe, míg a kód többi részét az oldal törzsébe, oda, ahol szeretnéd, hogy a Vásárlás gomb megjelenjen.

Ehhez el kell különítened a script elemet a div elemtől a Vásárlás gomb beágyazási kódjában.

A div elemet a kód tetején találod. Valahogy így néz ki:

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

A script elem a beágyazási kód hátralévő részét alkotja, a script type="text/javascript" kezdettel és a /script véggel.

Másold és illeszd be a script elemet teljes egészében a weboldal fejlécébe.

Ezután nyisd meg az oldalszerkesztőt annál az oldalnál, ahová a Vásárlás gombot szeretnéd hozzáadni. Illeszd be a div elemet az oldalba oda, ahol szeretnéd, hogy a Vásárlás gomb megjelenjen.

E-kereskedelmi lehetőség hozzáadása bármely weboldalhoz a Vásárlás gombbal

A Vásárlás gombok lehetővé teszik az eladók számára, hogy ott találkozzanak az ügyfelekkel, ahol azok vannak. A közvetlen értékesítés az ügyfeleknek anélkül, hogy másik oldalra küldenéd őket, csökkenti a súrlódást és növelheti az eladásokat.

Bloggerek, művészek, írók, tervezők, podcastosok, influenszerek és mindenki más számára, aki monetizálni szeretné munkáját, a Vásárlás gombok egyszerű módot kínálnak a Shopify használatára új weboldal építése nélkül.