この記事には2024年の操作画像と当時の条件が含まれます。購入ボタンの埋め込み手順は下記の公式資料と照合していますが、旧プラグイン連携と決済の再現検証は未完了です。埋め込み用の生成コードと管理用の秘密情報を混同せず、Admin APIトークンやアプリのシークレットを公開HTMLに貼り付けないでください。
SWELLのページにShopifyの購入ボタンを埋め込み、商品・注文・決済をShopify側で管理する方法を紹介します。WooCommerceをWordPress内で運用する構成とは、管理する場所が異なります。
WooCommerceを使った過去の検証例は、次の記事にまとめています。
WooCommerceとの対応範囲はテーマの現行サポート情報で確認してください。過去のフォーラム回答だけから将来の対応を断定することはできません。
WooCommerceを使う場合は、商品一覧・カート・チェックアウトの表示と必要な機能を、自分の構成で確認します。
Shopifyを組み合わせると、WordPressに販売ページを置きながら、チェックアウトをShopify側へ任せられます。最安・安全性を一律に保証する構成ではなく、必要な機能と運用費用を比較して選びます。
2026年10月21日に確認したShopify公式のStarterプラン案内では、新規ストアはStarterを利用できません。この記事の月額5ドルだった当時の条件を、新規導入の予算に使わないでください。
参考サイト
下記は当社の販売ページの参考例です。掲載例の存在だけで、現在の決済・商品配信が検証済みとは扱いません。
SWELL + Shopifyで決済するまでの設定方法
以下では購入ボタンを埋め込む手順を説明します。商品・決済・配送またはデジタル配信の設定と、購入後までの確認が別途必要です。
- 購入ボタンの埋め込みコードをカスタムHTMLに追加する
- 専用プラグインを使う方法は別案です。購入ボタンのHTML埋め込みと両方を必須にする手順ではありません。
新規導入ではShopify公式のWordPress埋め込み手順を基準にします。Shopifyで生成したコード全体を、投稿・固定ページのカスタムHTMLブロックへ貼り付けます。PHPのfunctions.phpや通常のコード表示ブロックは貼付先ではありません。
Shopifyのアカウント登録
まずはShopifyのアカウントを登録しましょう。
無料体験の期間や対象条件は登録時の案内で確認してください。以下の2024年の画像から現在の体験期間を判断しないでください。
商品の設定
仮で良いのでShopifyに商品を1つ登録しておきます。
検証用の商品名・価格・商品種別などを入力し、保存します。販売前には、商品説明・在庫・配送の要否と、購入ボタンの販売対象になっているかも確認してください。
購入ボタンを作成
ウェブサイトに購入ボタンを追加します。
そのためには「Buy Button channel」という拡張機能をインストールします。
インストールボタンを押せばOKです。
購入ボタンを作成するをクリック
商品購入ボタンを選びます。
先ほど登録した商品にチェックをいれましょう。
カスタマイズ画面では購入ボタンの見た目を変更できます。
レイアウトスタイルはフルビューにして、ボタンの文言や色などを変更します。
試しにボタンを押すと右側からカートのメニューが出ることも確認できます。
デザインが決まったら、画面右上の次へのボタンを押します。
最後にコードが表示されますのでコピーしましょう。
再びボタンを作成するときは、Shopify管理画面の購入ボタン販売チャネルを開きます。下の画像は2024年のメニューです。
WordPressにボタンを設置する
先ほどのコードをカスタムHTMLのブロックにコピペしましょう。
プレビューすると、以下の表示になります。
ちなみに後から画像を追加したものはこちら
基本的な商品設定は以上です。
応用│デジタル商品の販売設定
デジタル商品は、購入後にファイルを受け取れるよう配信方法を設定します。
当時はDigital Downloadsというアプリを使いました。現在の公式資料ではDigital Productsとして案内されています。現行アプリでファイルの登録先・配信方法を確認してください。
デジタルファイルを追加するをクリック。
デジタルデータをアップロードして、最後に保存ボタンを押します。
チェックアウト画面を表示する
購入ボタンの表示だけでは販売開始の準備が整ったとは限りません。ストアのプラン・チェックアウト・決済サービスの設定を確認します。
ですので、ストアの設定をしていきましょう。
Shopify管理画面から設定を開きます。メニュー位置は現在の画面で確認してください。
まずはプロフィールを編集してストア名をつけます。
あとは決済の項目に移動して、必要な情報を入力しましょう。
もう一点重要なのが、プランの選択です。
Shopifyの利用料金を支払う方法と、お客様の代金を受け取る決済サービスは別の設定です。カード登録だけで両方が完了したとは判断しないでください。
公式案内の要点：販売開始時は、ストアの状態に応じてプライベートモードの解除や有料プランの選択でチェックアウトを有効にし、決済サービスも設定します。
詳細はShopify公式の無料体験と開店準備の案内を参照してください。
https://help.shopify.com/ja/manual/intro-to-shopify/pricing-plans/free-trial
下の画像は2024年にStarterを選択して進めた際の記録です。現在の新規ストアでは、利用できるプランと必要な設定を確認してチェックアウトを有効にしてください。
テストする
販売前にShopifyペイメントのテストモードで注文を確認します。公式手順では有料プランが必要です。テストモードでは実際の決済が確定しません。営業中のストアで有効にせず、販売開始前の検証用ストアで試してください。テスト注文の金額は1米ドル相当額を超える必要があります。
設定の決済からShopifyペイメントの管理画面を開き、テストモードを有効にして保存します。以下の画像は旧画面です。
テストモードが有効な状態で、公式資料に掲載されたテスト用カード番号を使います。実際のカード情報は使いません。
正常な取引を試す場合、有効期限は未来の日付、セキュリティコードはAmerican Expressなら4桁、その他のカードなら3桁の数字を入力します。名義は2単語以上とし、利用するテスト番号は公式資料で選んでください。
住所等も入力して決済します。
下の画像は2024年にテスト注文とダウンロードを確認した記録です。現在の構成で再検証した結果ではありません。
デジタル配信は、注文の支払状況・配信設定・通知メール・ダウンロードリンクを確認します。ストアを公開するだけで配信が完了するとは限りません。受取人としてファイルを開けるところまで試してください。
確認後はテストモードを解除して保存し、通常販売に必要な決済設定へ戻っているか確認します。
ここまでが購入ボタンの設置からテスト注文までの流れです。商品・注文・通知・配信を自分のストアで確認してから販売を開始してください。
あとはサイトや商品を拡充してECサイトらしく見た目を整えましょう。
過去の参考例│WP Shopifyを使った連携
現在はShopify公式のSell on WordPressとWordPress用Shopifyプラグインが案内されています。以下の旧WP Shopifyとは別の連携方法です。公式連携のSWELLでの動作はこの記事では未検証です。
以下はFahad Mahmood氏のプラグインを用いた2024年の記録です。現在の配布名はExternal Store for Shopifyです。旧画面を新規設定の手順としてそのまま使用しないでください。
旧WP Shopifyで商品を表示した際の画面とショートコードを参考資料として残します。現行版の認証・同期・決済は未検証です。
当時はWordPress管理画面の設定からWP Shopifyを開きました。
当時のドメイン欄にはストアのドメイン（例：hogehoge.myshopify.com）を入力しました。
当時はShopifyの設定からアプリと販売チャネルを開く方式でした。
この旧画面から新しいカスタムアプリを作る手順は、2026年1月1日以降は使えません。公式変更案内では、新規作成にDev Dashboardを使うとされています。
下の一覧と画像は、旧連携で参照していた資格情報の項目です。現行連携で必要な権限や発行方法を示すものではありません。
- Storefront APIのアクセストークン（アクセストークンのアプリのインストール後、発行されます。）
- APIキー
- シークレットキー
以下は当時使ったショートコードです。現在のプラグイン説明・認証方式と照合してから利用してください。
ショートコード
| ショートコード | 備考 |
|---|---|
| [[wp-shopify]] | 商品一覧の旧設定例。件数を指定する例は[[wp-shopify type=”products” limit=”100″]]。 |
| [[wp-shopify-product]] | 商品詳細表示用。現行配布ページでは専用ページのスラッグをproductにする構成が案内されています。 |
編集画面
実際の表示
motoki見た目は頑張ってCSSを書く必要がありそうです。
購入ボタンのカスタマイズ
購入ボタンのiframe内部には、WordPress側の追加CSSは直接届きません。BuyButton.jsのoptions内のstylesなど、コンポーネントが提供する設定を使います。
しかし、専用のコードを書くことでカスタマイズができます。
例えばカルーセル表示から通常の画像表示ができます。
さらにボタンの上に警告文を掲載することもできます。
公式ドキュメント
ではさっそくカスタマイズ方法を紹介します。
カルーセルの非表示（単体画像表示）
まずカルーセルから通常の画像の表示です。
以下は生成済みコードのoptions.product.contentsに入れる差分です。独立した完成コードではありません。元のコードを保存してから該当箇所だけ変更し、同じcontentsを重複追加しないでください。
imgをtrueに、imgWithCarouselをfalseに変更しています。
"contents": {
"img": true,
"imgWithCarousel": false,
"description": true
},警告文の記載
以下は生成済みコードのoptions.cartにまとめる差分です。単独で動くコードではありません。既存のcart設定を控えてから、classes・styles・textを統合し、cartを二重に追加しないでください。
CSSだけ追加しても反映されないので注意しましょう。
クラスの定義も必要です。
"cart": {
"classes": {
"notice": "shopify-buy__cart__notice"
},
"styles": {
"button": {
"font-weight": "bold",
"font-size": "16px",
"padding-top": "16px",
"padding-bottom": "16px",
":hover": {
"background-color": "#9f8032"
},
"background-color": "#b18e37",
":focus": {
"background-color": "#9f8032"
}
},
"notice": {
"font-weight": "bold",
"color": "red",
"font-size": "1em"
}
},
"text": {
"title": "カート",
"total": "小計",
"empty": "カートは空です。",
"notice": "重複購入にはご注意くださいませ!",
"button": "購入へ進む"
}
},変更後は保存した公開ページで、PC・スマホのボタン表示、Tab・Enter、カートの開閉を確認してください。見た目の確認だけで購入完了とは扱わず、決済テストはShopify公式のテスト手順に従います。元へ戻すにはバックアップした埋め込みコードへ戻し、表示自体を外す場合は該当するカスタムHTMLブロックを削除します。
まとめ
この記事では、SWELLのページにShopifyの購入ボタンを設置する方法と、2024年の導入例を紹介しました。
当時のStarter料金・手数料は、新規導入の現行条件ではありません。必要な販売機能を満たすプランと決済方法で費用を見積もります。
WordPress側の表示調整とShopify側の商品・注文管理を分けて考え、
購入者が商品選択から受け取りまで進めるか確認してください。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
よくある質問：SWELLとShopifyでECサイトを作るとき
SWELLでECサイトを作るとき、なぜShopifyを組み合わせるのですか？
WordPressに販売ページを置き、商品・注文・チェックアウトをShopify側で管理するためです。最安や安全性を一律に保証する方法ではありません。WooCommerceを使う構成とも、必要な機能・管理方法・費用を比較してください。
費用は、どのくらいかかりますか？
現在の公式案内ではStarterは新規ストアで利用できません。利用可能なプランの月額料金、決済方法別の手数料、追加アプリとWordPress側の維持費を合計してください。旧記事の月額5ドル・手数料5%を新規導入の予算に使わないでください。
購入ボタンは、どうやって設置しますか？
記事では、ShopifyにBuy Button channelという拡張機能をインストールし、購入ボタンを作成して商品にチェックを入れ、見た目を調整します。最後に表示されるコードをコピーし、WordPressのカスタムHTMLブロックに貼り付けます。
ボタンを設置すれば、すぐに決済できますか？
ボタンの表示だけでは決済の準備が整ったとは限りません。ストアの状態に応じたチェックアウトの有効化と決済サービスの設定が必要です。デジタル商品は通知や配信まで確認します。
Shopify公式のWordPressプラグインはありますか？
あります。Shopify公式はSell on WordPress販売チャネルとWordPress用Shopifyプラグインを案内しています。この記事の旧WP Shopifyとは別の製品です。公式連携の利用条件を確認し、SWELLでの互換性は導入環境で検証してください。
管理用のトークンやシークレットは、公開HTMLに貼ってよいですか？
貼らないでください。記事では、埋め込み用の生成コードと管理用の秘密情報を混同せず、Admin APIトークンやアプリのシークレットを公開HTMLに貼り付けないよう注意しています。
購入ボタンの見た目は、追加CSSで変えられますか？
そのままでは変えられません。記事では、購入ボタンのiframe内部にはWordPress側の追加CSSは直接届かないため、BuyButton.jsのoptions内のstylesなど、コンポーネントが提供する設定を使います。記事では、カルーセルを通常の画像表示に変える方法や、ボタンの上に警告文を掲載する方法も紹介しています。
記事の内容は、今も同じですか？
記事では、この記事には2024年の操作画像と当時の条件が含まれます。購入ボタンの埋め込み手順は公式資料と照合していますが、旧プラグイン連携と決済の再現検証は未完了です。画面や条件は変わっている可能性があるため、最新は公式で確認してください。変更後は、公開ページで購入ボタンの表示、Tab・Enter、カートの開閉を確認し、決済テストはShopify公式のテスト手順に従います。
