# Wordpressで商品一覧を表示させたい

**URL:** <https://community.shopify.com/t/wordpress/30474>\
**Category:** 総合的なディスカッション\
**Created:** [January 5, 2021, 7:26am UTC](https://community.shopify.com/t/wordpress/30474 "2021-01-05T07:26:45Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

WordPressで構築するブランドサイトの一部ページに、Shopifyの最新商品をリアルタイムで一覧表示できるかが主題。要件は、EC決済は不要で、商品画像を並べて表示し、クリック時はShopify上の商品詳細ページへ遷移させること。\n\n- 提案された方法は、Shopifyの「Buy Button」の利用。\n- Buy Buttonは商品単位・コレクション単位で作成でき、コレクション単位なら商品一覧表示用のコードを生成可能。\n\n懸念点は、Buy Buttonが標準ではチェックアウト導線やモーダル表示を含むのではないか、という点。これに対して、プレビュー設定で遷移先や表示形式（チェックアウト、商品ページ、モーダル、同一画面での遷移など）は調整できると説明された。\n\nさらに、標準設定で足りない部分も、BuyButton.js（Buy Button用のJavaScript）の仕様を見ながらカスタマイズで対応可能との見解。結論として、技術的には実現可能という方向で、具体的な実装は設定確認と必要に応じたJS調整が次のアクション。

<div class="post-metadata">

**Author:** ![T-shop](https://avatars.discourse-cdn.com/v4/letter/t/5f9b8f/32.png) [@T-shop](https://community.shopify.com/u/T-shop)\
**Post date:** [January 5, 2021, 7:26am UTC](https://community.shopify.com/t/wordpress/30474/1 "2021-01-05T07:26:45Z")

</div>

WordPressでの構築で、EC機能の持たないブランドサイトを構築予定なのですが、  
一部ページにShopifyの最新の商品情報をリアルタイムで一覧表示したいという要望があります。  
決済の必要はなく、純粋に画像が表示され、リンクは実ページへ遷移をしたいと思っているのですが、  
こちら技術的に可能でしょうか。

ご確認お願いいたします。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [January 12, 2021, 6:00pm UTC](https://community.shopify.com/t/wordpress/30474/2 "2021-01-12T18:00:00Z")

</div>

WordPressに連携するにはBuy Buttonが便利です。

[https://help.shopify.com/ja/manual/online-sales-channels/buy-button/setup](https://help.shopify.com/ja/manual/online-sales-channels/buy-button/setup)

Buy Buttonは、商品単位とコレクション単位で作成可能なので、コレクション単位のボタンを１つ作れば、コレクション内の商品一覧を表示するコードが生成されます。

---

<div class="post-metadata">

**Author:** ![T-shop](https://avatars.discourse-cdn.com/v4/letter/t/5f9b8f/32.png) [@T-shop](https://community.shopify.com/u/T-shop)\
**Post date:** [January 14, 2021, 12:48am UTC](https://community.shopify.com/t/wordpress/30474/3 "2021-01-14T00:48:45Z")

</div>

ご返信ありがとうございます。

Buy Buttonですと、そのままチェックアウトボタンもしくはモーダルで商品詳細が出る仕様かと思います。

今回は画像をクリックするとshopifyの商品詳細ページに遷移するという仕様にしたく、、

Buy Buttonでもshopifyの商品詳細ページに遷移する仕様は可能でしょうか？？

ご確認お願いいたします。

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [January 14, 2021, 4:26pm UTC](https://community.shopify.com/t/wordpress/30474/4 "2021-01-14T16:26:07Z")

</div>

ご指摘の事項は、Buy Buttonのコレクション購入ボタンの作成のプレビューの設定で調整可能ですし、そこでできないことも、BuyButton.js の仕様をみながらJSコードをカスタマイズすることで可能かと思います。

> 今回は画像をクリックするとshopifyの商品詳細ページに遷移するという仕様にしたく、、

ボタンを押した後にチェックアウトにいくのか、商品ページにいくのか、モーダルポップアップか、同一画面での遷移か、などは全てプレビューの設定で変更できるので試してみてください。
