もっと詳しく

こんにちは、 Gaji-Labo 横田です。今日は Shopify の購入ボタン（Buy Button）機能の設置について簡単に紹介します。

Shopify の 購入ボタン（Buy Button） とは

外部のウェブサイトやブログ記事に、Shopify の購入ボタンを設置することができる機能です。公式ヘルプセンターに機能が詳しく掲載されていますが、購入ボタンだけでなく、商品画像や商品説明、カートなども表示できて、その見た目も Shopify の管理画面でカスタマイズすることができます。

管理画面でのカスタマイズの様子

購入ボタン（Buy Button） を追加するには

Shopify の管理画面、販売チャネルの「追加」で開くダイアログで「購入ボタン」を選ぶと、販売チャネルに「Buy Button」が追加され、購入ボタンを作成することができます。画面の選択にしたがい、 任意の見た目にカスタマイズができたら、購入ボタン用のコードをコピーすることができるので、 発行されたコードを任意の外部サイトやブログのページに埋め込むだけです。
ヘルプセンターに手順が詳しく掲載されています。

販売チャネルを追加するダイアログ
購入ボタンを作成する

購入ボタン（Buy Button） のカスタマイズ

購入ボタン（Buy Button）の見た目を Shopify の管理画面でカスタマイズできるのですが

  • レイアウト
  • クリック時のアクション
  • ボタンのスタイル
  • ボタンテキストの文言（初期値は Add to cart）
  • 商品説明の色やサイズ、フォント
  • カート内のテキストの装飾や文言
  • チェックアウトの動作

基本的な見た目や動作のカスタマイズをノーコードでできるので分かりやすく、PC / SP / レスポンシブの見た目もライブプレビューで確認できるので使い勝手よく感じました。
たいていのカスタマイズはこの管理画面でのカスタマイズで完結できそうです。

レイアウトでは画像サイズ、テキストの位置、数量の表示有無などもカスタマイズできる

さらに高度なカスタマイズ

上記の管理画面でできること以上に購入ボタン（Buy Button）をカスタマイズしたい場合には、Shopify BuyButton.js ライブラリを使用するようです。こちらはまだ触ったことないのですが、Shopify BuyButton.js には [product] [collection] [productSet] [cart] の4種類のコンポーネントが用意され、スタイルやイベントもカスタマイズ可能のようです。

ui.createComponent(‘product’, {
　id: 1234567,
　options: {
　　product: {
　　　buttonDestination: ‘modal’
　　},
　　cart: {
　　　startOpen: true
　　}
　}
});

https://shopify.github.io/buy-button-js/customization/

こんな風に書くらしい。

コンポーネントをカスタマイズするオプションで使用可能なキーは以下のようです。

options = {
　product: {},
　cart: {},
　modal: {}, // configure the modal created by a product embed
　productSet: {}, // configure a collection or set of products
　toggle: {}, // configure the tab that toggles the cart open
　modalProduct: {}, // configure the product within the modal
　option: {}, // configure the variant option selectors within a product
　lineItem: {}, // configure the individual line items within a cart
}

https://shopify.github.io/buy-button-js/customization/

以下公式ドキュメントで、各コンポーネントの属性など解説があります。

Shopify BuyButton.js

チェックアウトリンク

SNS やメールでの購入向けには、チェックアウトリンクを発行することもできます。

商品管理から商品の詳細に入り「その他の操作」>「Create checkout link」でチェックアウトリンクを発行できます。

おわりに

Shopify の購入ボタン（Buy Button）はノーコードでもある程度自由にカスタマイズができますし、さらに高度なカスタマイズ用にはライブラリが用意されている。SNS やメールでの購入向けにリンクを発行することもできる。カスタマイズに幅があるのがいいですね。

サイトやブログなどに、まずは Shopify のカート機能だけ導入してみたいと検討している方の参考になれば幸いです。