Shopify Buy Button: Jak proměnit jakýkoli web na online obchod

Shopify můžete použít k prodeji online, i když nechcete vytvořit kompletní internetový obchod. Každý, kdo hledá způsob, jak monetizovat svůj projekt⁠ - bloggeři, umělci, spisovatelé, designéři, podcasteři, influenceři⁠, mohou využít Shopify k prodeji online.

Pro ty, kteří nechtějí nastavovat plnohodnotný online obchod nebo ztěžovat svému publiku přechod na externí stránku, je Shopify Buy Button pohodlným řešením.

Co je Shopify Buy Button?

Shopify Buy Button vám umožňuje vytvořit a vložit možnost platby na jakýkoli typ webové stránky, takže zákazníci mohou nakupovat vaše produkty přímo ze stránky, kterou právě navštěvují.

Shopify generuje kód potřebný k vložení a zobrazení vašich produktů, díky čemuž je tlačítko jednoduché nastavit a je přizpůsobené pro mobilní zařízení a bezpečné. Můžete také přizpůsobit barevné schéma, detaily produktu a obrázky produktu zobrazené s Shopify Buy Button, aby odpovídaly stylu vaší stránky.

Zjistěte více o Shopify Buy Button.

Jak nastavit Shopify Buy Button ve třech krocích

1. Přidejte Shopify Buy Button do svého Shopify obchodu
2. Vytvořte Shopify Buy Button
3. Přidejte kód pro vložení Shopify Buy Button do HTML kódu svého webu

1. Přidejte Shopify Buy Button do svého Shopify obchodu

Začněte tím, že se přihlásíte do Shopify. Pokud vidíte Shopify Buy Button uvedený pod vašimi prodejními kanály v levém menu, můžete přejít přímo na krok 2.

Na desktopu

1. Jděte na stránku prodejního kanálu Buy Button v Shopify App Store.
   
   
   
   
2. Nainstalujte aplikaci
3. Připněte aplikaci do navigace administrace (volitelné)
   
   

Pokud Buy Button nepřipnete, můžete jej znovu najít kliknutím na „Prodejní kanály“ a poté „Buy Button“ pod vašimi nainstalovanými kanály.

Na mobilu

Otevřete aplikaci Shopify na svém mobilním zařízení a vyberte „Obchod“ z dolního menu. Vedle „Prodejní kanály“ vyberte „Přidat kanál“ na iPhonu nebo „+“ na Androidu. Vyberte „Buy Button“ a poté klepněte na „Přidat Buy Button.“ 

2. Vytvořte Shopify Buy Button

Jakmile přidáte prodejní kanál Buy Button, jste připraveni vytvořit svůj Shopify Buy Button.

Na záložce Buy Button klikněte na „Vytvořit Buy Button“.

Můžete vytvořit Buy Buttons pro jednotlivé produkty nebo celou kolekci produktů. Na další obrazovce budete vyzváni k výběru, kterou možnost preferujete.

Vyberte možnost a poté vyberte, pro které z vašich produktů chcete vytvořit Shopify Buy Button.

Po výběru se dostanete do editoru Shopify Buy Button, kde můžete přizpůsobit vzhled tlačítka.

Jak přizpůsobit svůj Shopify Buy Button

V editoru tlačítka Buy Button uvidíte na levé straně řadu možností pro přizpůsobení vzhledu a chování tlačítka Buy Button. Na pravé straně uvidíte náhled toho, jak bude Shopify Buy Button vypadat.

Upravte možnosti vlevo podle svých představ. Náhled se automaticky aktualizuje, takže můžete vidět, jak bude Shopify Buy Button vypadat během úprav. Kliknutím na ikony pro stolní počítače nebo mobilní zařízení uprostřed horní části editoru můžete také zobrazit, jak bude Shopify Buy Button vypadat na obrazovkách stolních počítačů a mobilních zařízení.

Zde je přehled možností, které můžete přizpůsobit:

• Variant produktu: Vyberte varianty produktu, které chcete prostřednictvím Shopify Buy Button nabídnout k prodeji. Ve výchozím nastavení jsou vybrány všechny varianty.
• Rozložení: Vyberte možnost „Základní“, „Klasické“ nebo „Úplné zobrazení“. Po výběru možnosti z rozevíracího seznamu „Rozložení“ se vpravo zobrazí náhled každého rozložení.
• Akce při kliknutí: Vyberte možnost „Přidat produkt do košíku“, „Přejít přímo k pokladně“ nebo „Otevřít podrobnosti produktu“. Možnost „Přidat produkt do košíku“ vytvoří widget košíku na pravé straně obrazovky. Možnost „Přejít přímo k pokladně“ vytvoří tlačítko Buy Button, které uživatele přesměruje přímo k pokladně (pozn.: pomocí této možnosti nemohou zákazníci přidat do košíku více než jeden produkt). Možnost „Otevřít podrobnosti o produktu“ vytvoří tlačítko Zobrazit produkt, které otevře vyskakovací okno s informacemi o produktu a tlačítkem Přidat do košíku.
• Styl tlačítka: Zde můžete upravit barvy, písmo, velikost a tvar rohů vašeho Shopify Buy Button.
• Rozložení: Menu Rozložení vám umožní provést jemnější úpravy rozložení vašeho tlačítka. Můžete přizpůsobit barvy písma, text tlačítka a nastavení typografie.
• Nákupní košík: Zde můžete upravit nastavení widgetu nákupního košíku, včetně textu a barev. Upozorňujeme, že tato možnost bude šedá, pokud použijete rozložení „Přejít přímo k pokladně“, protože v tomto případě není k dispozici widget košíku.
• Podrobné vyskakovací okno: Pokud v části „Akce po kliknutí“ vyberete možnost „Otevřít podrobnosti o produktu“, můžete v této části přizpůsobit text, barvy a typografii vyskakovacího okna.
• Pokročilá nastavení: Zde můžete upravit, jak se uživatelům zobrazí pokladna. Můžete vybrat buď „Otevřít vyskakovací okno“ (vytvoří se vyskakovací pokladna, která se zavře po dokončení objednávky), nebo „Přesměrovat ve stejné záložce“ (uživatel bude přesměrován na stránku pokladny Shopify a po dokončení transakce se vrátí na vaši stránku).

Nezapomeňte, že úpravou těchto nastavení se nezmění Buy Button, který byl již vložen.

Když budete spokojeni se svým designem, klikněte na tlačítko „Další“ v pravém horním rohu.

3. Přidejte kód pro vložení Shopify Buy Button do HTML kódu svého webu

Když kliknete na „Další,“ kód pro vložení vašeho tlačítka bude automaticky vygenerován. Pokud jste připraveni kód vložit na webovou stránku, klikněte na tlačítko „Kopírovat kód“.

Zkopírovaný kód můžete vložit do HTML kódu libovolné webové stránky. Vytvoří se tlačítko Buy a košík, které se přímo propojí s vaší administrací Shopify, kde budete moci spravovat a zpracovávat objednávky z jakékoli webové stránky.

Proces přidání kódu pro vložení se liší v závislosti na tom, jak chcete, aby tlačítko vypadalo, a jakého tvůrce webových stránek a téma používáte.

Zde jsou kroky, které musíte dodržovat, abyste vložili Shopify Buy Button na vstupní stránku nebo blogový příspěvek vašeho Shopify obchodu, webovou stránku Squarespace nebo blog WordPress:

Přidání kódu pro vložení na vstupní stránku nebo blogový příspěvek vašeho Shopify obchodu

Váš Shopify obchod již bude mít produktové stránky a košík zabudované, ale občas mohou nastat situace, kdy byste chtěli přidat Shopify Buy Button přímo na stránku nebo blogový příspěvek pro větší pohodlí.

Například, pokud byste psali blogový příspěvek o nově vydaném produktu, možná byste chtěli poskytnout čtenářům snadný způsob, jak zakoupit produkt přímo z příspěvku, místo abyste je odkazovali na samostatnou stránku.

V takovém případě postupujte podle těchto kroků:

1. Nejprve následujte výše uvedené kroky pro zkopírování kódu pro vložení tlačítka Buy
2. Z vaší administrace Shopify přejděte na „Online obchod“ > „Blogové příspěvky“ nebo „Online obchod“ > „Stránky,“ v závislosti na tom, zda jej přidáváte do blogového příspěvku nebo stránky.
3. Vyberte blogový příspěvek nebo stránku, do které chcete přidat Buy Button.
4. V okně „Obsah“ vyberte tlačítko „<>“, abyste přešli z režimu úprav do HTML režimu.
   
   
5. Vložte kód pro vložení, který jste zkopírovali dříve, do HTML editoru, kamkoli chcete, aby se objevil. Klikněte na „Uložit.“

Jakmile uložíte svou stránku nebo blogový příspěvek, váš Buy Button bude přidán na stránku. Pokud chcete vidět, jak vypadá bez publikování, vyberte „Náhled“ (nebo „Zobrazit stránku“, pokud jej přidáváte na stránku) v pravém horním rohu editoru stránky.

Přidání Shopify Buy Button na webovou stránku Squarespace

Na Squarespace budete moci přidat svůj Buy Button do jednotlivých příspěvků nebo do menu na vaší domovské stránce. Chcete-li přidat Buy Button na svůj web Squarespace:

1. Nejprve následujte výše uvedené kroky pro zkopírování kódu pro vložení Buy Button.
2. Přihlaste se do svého Squarespace dashboardu a otevřete stránku, na kterou chcete přidat Shopify Buy Button.
3. Na stránce, kde chcete, aby se Buy Button objevil, najeďte myší na oblast „Obsah stránky“ a klikněte na „Upravit.“
4. Vyberte místo pro vložení, kde chcete přidat kód pro vložení.
5. V menu „Obsahové bloky“ v sekci „Více“ vyberte „Kód.“
6. Ujistěte se, že je vybráno „HTML“ z rozbalovacího menu v pravém horním rohu, a poté vložte kód pro vložení Buy Button do pole „Kód“.
7. Klikněte na „Použít.“

Mějte na paměti, že některé vlastní šablony Squarespace mohou vyžadovat pokročilejší znalosti HTML pro přizpůsobení. V takových případech je nejlepší obrátit se přímo na vývojáře, který vám pomůže přidat vlastní kód na váš web.

Přidání Shopify Buy Button na blog WordPress

Chcete-li přidat Shopify Buy Button do příspěvku na svém webu WordPress.org:

1. Nejprve následujte výše uvedené kroky pro zkopírování kódu pro vložení Buy Button.
2. Z vaší administrace WordPress přejděte na své příspěvky a vyberte ten, do kterého chcete přidat Buy Button.
3. V závislosti na verzi editoru WordPress, kterou používáte, dokončete jeden z následujících kroků:
   1. Pokud používáte klasický editor pro svůj WordPress web, klikněte na záložku „Text“ v editoru, abyste přešli z vizuálního zobrazení do textového zobrazení.
   2. Pokud používáte blokový editor pro svůj WordPress web, klikněte na tlačítko „+“, poté vyhledejte a vyberte „Vlastní HTML.“
4. Vložte kód pro vložení Buy Button do prostoru, kde chcete, aby se objevil.
5. Klikněte na „Uložit koncept,“ „Náhled“ nebo „Publikovat,“ v závislosti na tom, jaký krok chcete provést.

Kód pro vložení můžete také přidat do menu WordPress následujícími kroky:

1. Nejprve následujte výše uvedené kroky pro zkopírování kódu pro vložení Buy Button.
2. Z vaší administrace WordPress klikněte na „vzhled.“
3. Vyberte „Přizpůsobit,“ abyste otevřeli editor šablon, a poté vyberte „Widgety.“
4. Vyberte oblast, kde chcete přidat svůj Shopify Buy Button.
5. Klikněte na „Přidat widget,“ poté „Text.“
6. Vložte kód pro vložení Buy Button.
7. Klikněte na „Uložit a publikovat.“

Poznamenejte si, že Shopify Buy Buttons jsou kompatibilní s platformou WordPress.org, ale ne s WordPress.com, kvůli omezením přizpůsobení HTML.

Přidání Shopify Buy Button na Wix

Chcete-li přidat Shopify Buy Button na svůj web Wix, postupujte podle těchto kroků:

1. Nejprve následujte výše uvedené kroky pro zkopírování kódu pro vložení Shopify Buy Button.
2. Z vaší administrace Wix vyberte web z stránky „Moje weby“, na který chcete přidat Buy Button, a poté vyberte „Upravit web.“
3. V editoru webových stránek Wix klikněte na „+“, poté „Více.“ Vyberte „HTML kód.“ Tím se na vaši stránku přidá widget HTML kódu.
4. Klikněte na „Zadat kód.“ Vyskakovací okno „Nastavení HTML“ se otevře, vložte svůj kód pro vložení Buy Button do pole „Přidat kód“.
5. Klikněte na „Použít.“
6. Upravte velikost widgetu HTML kódu podle svých představ. Nezapomeňte zajistit, aby byl viditelný panel košíku, pokud jste vložili Buy Button s košíkem.
7. Když budete hotovi s úpravami, klikněte na „Uložit.“

Je dobré poznamenat, že pokud chcete vložit Buy Buttons pro více produktů, je nejlepší vložit tlačítko kolekce, spíše než Buy Button pro jednotlivé produkty. Pokud vložíte více Buy Buttons pro jednotlivé produkty, návštěvníci uvidí samostatný košík pro každý produkt.

Přidání skriptových tagů Shopify Buy Button

V některých případech budou tvůrci webových stránek (například Unbounce) vyžadovat, abyste vložili script tagy odděleně do vaší hlavičky, zatímco zbytek kódu vložíte do těla vaší stránky, kamkoli chcete, aby se Shopify Buy Button objevil.

Abychom to udělali, musíte oddělit script element od div elementu ve vašem kódu pro vložení Shopify Buy Button. Uvidíte div element na začátku kódu. Vypadá to nějak takto:

<div></div>

Element skriptu (který je mnohem delší) tvoří zbytek kódu pro vložení, začínající script type="text/javascript" a končící /script.

Jakmile máte tyto elementy oddělené, zde jsou kroky, které je třeba provést:

1. Otevřete hlavičku stránky pro web, na kterém chcete vložit svůj Shopify Buy Button.
2. Zkopírujte a vložte script element v celém rozsahu do hlavičky vaší webové stránky.
3. Uložte své změny.
4. Teď otevřete editor stránky pro stránku, na které chcete přidat svůj Shopify Buy Button.
5. Zkopírujte a vložte div element na stránku, kamkoli chcete, aby se váš Shopify Buy Button objevil.
6. Uložte své změny.

Přidejte e-commerce na jakoukoli webovou stránku pomocí Shopify Buy Button

Shopify Buy Buttons pomáhají prodejcům setkat se se zákazníky tam, kde jsou⁠—bez ohledu na stránku nebo platformu. Pohodlí prodeje přímo zákazníkům, aniž byste je museli posílat na jinou stránku, snižuje tření a může pomoci zvýšit prodeje.

Pro blogery, umělce, spisovatele, designéry, podcastery, influencery a všechny ostatní, kteří chtějí zpeněžit svou práci, je tlačítko Shopify Buy Button snadným způsobem, jak používat Shopify bez nutnosti vytvářet nový web.

S přizpůsobitelnými styly, barvami a funkcemi umožňuje Shopify Buy Button proměnit jakoukoli stránku nebo webovou stránku na plnohodnotný online obchod.