今回は

・WordPress独自テーマのカルーセルの中に「Shopify商品画像だけ」を埋め込みたい

というケース。

クライアント様より要望があった為、ShopifyとWordPressの商品連携について。

よくShopifyの「共有ボタン」でやればOK〜！みたいな記事を見かけるが、

余計なボタン類や思うような挙動が得られなかった為、WordPress側で商品連携を行い表示するに到りました。

完全な動的では無いですがボタン設置よりもユーザーストレスは格段に少ない方法です。

※Shopifyでショップを作成している前提です。（トライアルでもOK）

作業内容

簡潔にお話すると

①Shopify側でAPIキー生成

②WordPressに「WP Shopify」のプラグインにAPIキーを入れる

③WP Shopifyにあるショートコード、cssをいじる

だけです。

①Shopify側でAPIキー生成

アプリ管理→プライベートアプリを管理

新しいプライベートアプリを作成

必要情報を記入

・アプリ名

・メール

・商品管理を読み取り/書き込みに変更

・ストアフロントAPI権限は全てチェックでもどちらでもOK

保存したらWordPressで「WP Shopify」をインストールし、「Conected」部分に

Shopifyで生成されたAPIキー関連を埋めていきます。

一番下のドメインは〇〇.comまで入れます。

以上で連携完了。

※どうやらShopを作成してすぐは反映時間がかかるせいか、何度かfelseになりました。

１日空けたらsuccsessしたので失敗された場合は時間を空けるのが最良。

下処理が終わったら、固定ページに

/product

/collection

が作成されています。

こちらに、ショートコードの[wps_products]を記載すれば商品一覧が表示されます。

他のショートコードと併用して画像だけにすることも可能ですが

（https://docs.wpshop.io/#/shortcodes/wps_products?id=excludes）

デフォルトだと3カラムのCssGrid生成されたものの中に入れ込まれてしまうので、product_idを抽出して画像だけ抜き出します。

今回は独自のテンプレートに埋め込むのでショートコードをphp側に記入します。

<?php echo do_shortcode(‘[wps_products product_id=”◯◯”]’); ?>

product_idはShopifyの管理画面商品詳細URL「https://ドメイン.myshopify.com/admin/products/◯◯」部分に記載されています。

あとはcssでdisplay:none;とproduct_idをカスタムフィールドで簡易動的化してあげれば終了。