「ShopifyのPrestigeテーマの商品ページで一緒に買う商品(BUY IT WITH)」の表示方法が分からない」
この記事では上記の悩みを解決します。
一緒に買う商品とはデモサイトで表示されている以下の部分です。

では早速表示方法を解説していきます。
Prestigeテーマの「一緒に買う商品(BUY IT WITH)」設定方法
以下順を追って解説していきますね。
表示させたい対象商品のハンドルを確認する
まず「一緒に買う商品」で表示させたい商品のハンドルを確認します。
ハンドルとはURLの最後の部分ですね。
管理画面の商品管理から表示させたい商品の編集画面を開きます。
商品の編集画面の下にある検索結果のプレビュー欄までスクロールし、「ウェブサイトのSEOを編集する」をクリックします。

クリックした後、「URLとハンドル」の欄にある、商品ごとに編集できるハンドル部分を確認します。

商品を作成しただけだと日本語になっているので、分かりやすい英単語にするのがおすすめです。
日本語のままであれば英単語に編集して保存しましょう。
そしてこのハンドルをコピーしておきます。
タグに__with:ハンドル名を追加する
次に表示先の商品の商品編集画面を開きます。
「表示先の商品」とは、Bの商品をAの商品ページで「一緒に買う商品」として表示させたい時の、Aの商品の方のことです!
編集画面右側の「タグ」欄に、半角でアンダーバー2つとwith:と記載し、先ほどコピーしたハンドルをつなげます。
「__with:handlename」という感じですね。

入力したら右下の「保存する」をクリックして保存するのを忘れずに!
上記の設定で再度商品ページを確認してみると一緒に買う商品が表示されていると思います。
おかしな日本語訳も直しておこう
Prestigeテーマで用意されている「BUY IT WITH」のタイトルの日本語訳がちょっとおかしい。
ですのでこちらも合わせて直してしまいましょう!
管理画面左側のオンラインストア→テーマ→コードを編集するをクリックしてコードの編集画面を表示させます。

コードに慣れていないとぎょっとしてしまいそうですが、編集は簡単なので大丈夫!
コード編集画面の下にあるLocalesのフォルダを開き、ja.jsonをクリック
「buy_it_with」で検索すると”title”という欄があるので、その日本語訳を編集します。

私の場合は「一緒に購入」としていますが、ストアに合う名称に設定してください。
編集が終わったら忘れずに右上「保存する」をクリックして保存します。
以上、Shopifyの一緒に買う商品(BUY IT WITH)の表示方法でした!
参考になれば幸いです。
参考記事:
https://support.maestrooo.com/article/173-product-adding-an-associated-product
コメントを残す