Shopify商品購入ボタンを作成し、ブログ記事や固定ページに追加する方法

Shopifyのブログ記事や固定ページを作成していて、この商品を埋め込みたいって時ありませんか。

例えば、新商品のコラボTシャツを販売して、ブログやLPを作成し、宣伝を開始した。でもそのブログやLPに直接商品を埋め込めたりしないのかな。と思う時がありました。

今回は、そんな悩みを解決できる1記事になっています。

おおまかなステップはこんな感じです。

1. Shopify購入ボタンの埋め込みコードを作成する
2. ブログ記事や固定ページに埋め込む

それではさっそく解説していきます！

購入ボタンコードを作成する

まず最初に、ブログ記事や固定ページに埋め込むための購入ボタンコードを作成する必要があります。

そのために購入ボタン用の販売チャネルを追加します。

管理画面→設定→販売チャネル

をクリックしていきます。

すると、販売チャネルの追加で、購入ボタンがでてきました。この購入ボタンの横にある青いプラスを押して、販売チャネルを追加しましょう。

すると、このように「購入ボタン」用のページがオンラインストア直下に出来上がります。さっそく購入ボタンを作成するをクリックしてみましょう。

商品かコレクションを選択できます。今回は1つの商品のみの購入ボタンを作成したいので、「商品」を選択し、進むとこのようなページプレビューになります。

 レイアウトスタイルや、ボタンのスタイル、クリック時のアクションなど、色々直感的にカスタマイズできるのはShopifyの良いところですね！

私はサイトのデザインに合わせたかったのでこんな感じにしました。

これで次に進むと、購入ボタンのコードが生成されます。

ブログ記事や固定ページに購入ボタンを埋め込む

次にShopifyのブログ記事や固定ページに埋め込む際の方法です。

管理画面から、該当のページ、ブログ記事に移動します。すると、その中に<>こんな感じのボタンがあります。そこをクリックするとHTML要素に変換されたものに表示が変わります。

あとは埋め込みたい場所に、先ほど生成した購入ボタンコードをペーストするだけです。ちなみに埋め込むとこんな感じになります↓↓↓

結構ちゃんと埋め込まれていますね。

 上の購入ボタンを押すとちゃんと機能するはずです。

ちなみに、これでカート画面に遷移すると、、、

ちゃんとカート画面にも商品が入っていますね。

これで無事、購入ボタンの埋め込みが完了しました！

応用: 購入ボタンの動作をモーダルに変更する

最後に、ちょっと応用で購入ボタンを押した際の動作をモーダルに変更する方法をお伝えします。

先ほどの購入ボタンはAdd to cartボタンを押すと右側に簡易的なカートがでてきて、すぐチェックアウトできます。しかし、一度商品詳細のモーダルを開いて、商品を確認後、カートに入れたいものです。

そこで調べていると、Add to cartボタンを押した後に商品詳細をモーダルで開ける方法があるようでした。

購入ボタン作成時に"クリック時のアクション"部分で、「商品の詳細を開く」を選択するだけです。

こんな感じ↓↓↓

Shopifyのブログ記事や固定ページに商品購入ボタンを追加する方法 まとめ

以上いかがだったでしょうか。

埋め込みコードを作成できるということは、ブログ記事や固定ページだけでなく、基本的にどこにでも購入ボタンを設置できるということです。

Wordpressでブログをやっている人も、そちらのサイトに埋め込めるんですね。

どこにでも設置できる購入ボタン。Shopifyの大きな強みの一つで、とっても便利なのでぜひ活用してみてください！