ストアの商品をWordPressで販売!購入ボタンを作ってみよう

ストアの商品をWordPressで販売!購入ボタンを作ってみよう

皆さまは、WordPress.orgで製作したウェブサイトやブログにShopifyストアの商品を掲載できることをご存知でしょうか?

Shopifyで「購入ボタン」(Buy Button)を作成し、コードをWordPressに貼り付けるだけ。なんと、これだけであなたのサイトから商品販売が可能になるのです。

本日は、WordPressにShopifyの購入ボタンを追加する方法をご紹介します。

*WordPress.comで作成されたサイトには購入ボタンは使用できないので、ご注意ください。

はじめる前に

購入ボタンはShopifyのすべてのプランに搭載されている機能です。

まだ、Shopifyに登録がお済みでない方はこちらから登録して無料トライアルを始めましょう!

無料トライアルはこちら

Step 1

管理画面左側サイドバーの販売チャネルの「+」をクリック。続けて、Buy Buttonの「Add」を選択します。

ShopifyとWordPressを統合

Step 2

「Select Product」をクリックし、購入ボタンを作成したい商品を選択して、再び「Select Product」をクリックします。

商品を選択。

Step 3

購入ボタンのデザイン・機能などの詳細設定を行います。

①Template

購入ボタンの表示の方法を変更できます。

②Action on click

ボタンをクリックした後の行動を以下の3つから選べます。

・直接チェックアウト(Direct checkout)

・カートに追加(Add to cart)

・商品詳細ページを確認(Show product details)

③Size

購入ボタンのサイズを選択できます。

④Alignment

文字とボタンの位置を左・中・右から選択できます。

⑤Product variants

販売するバリエーションを選択できます。

⑥Button style and text

ボタンのサイズや色、文面を変更できます。

⑦Typography

文字のフォントと大きさを変更できます。

⑧Shopping cart

②で「Add to cart」または「Show product details」を選択したときに表示されます。カートの内容や文字・背景の色を変更できます。また、②で「Show product details」を選ぶと、「Product details」欄が表示され、文字の色やサイズ、ボタンの文言を変更できます。

Buy Buttonの説明

購入ボタンのデザインを決めたら、右上の「Generate code」をクリックしましょう。

Step 4

WordPressに貼り付けることができるコードが表示されます。

「Copy embed code to clipboard」をクリックして、

コードをWordPressのブログや、メニューに貼り付けましょう!

Buy Buttonのコードが表示される

これで、サイトから商品を販売できるようになりました!

また、Step 4で作成したコードを使えば、 WordPressだけではなく、

ShopifyのブログやTumblrなどにも購入ボタンを設置することができます。

 

あなたがお持ちのウェブサイトやブログをネットショップへと変えてみませんか?

 

ビジネスアイデアをさっそく実現!

クレジットカード要らず!14日間のShopify無料トライアルを試してみよう!


Which method is right for you?

Shopify コンテンツクリエイター 豊田亮太

学生時代からShopifyのローカライゼーションに携わり、現在はコンテンツ担当として多くの人にShopifyの素晴らしさと素敵なストーリーを伝えるために奮闘中。

Shopifyについて、何かお困りのことはございませんか?

サポートチームが日本語であなたのご質問にお答えいたします。

support-jp@shopify.com

Shopifyの14日間無料トライアルを始める