Shopify商品ページでPrestigeテーマのBUY IT WITHの表示方法

「ShopifyのPrestigeテーマの商品ページで一緒に買う商品（BUY IT WITH）」の表示方法が分からない」

この記事では上記の悩みを解決します。

一緒に買う商品とはデモサイトで表示されている以下の部分です。

では早速表示方法を解説していきます。

Prestigeテーマの「一緒に買う商品（BUY IT WITH）」設定方法

以下順を追って解説していきますね。

まず「一緒に買う商品」で表示させたい商品のハンドルを確認します。

ハンドルとはURLの最後の部分ですね。

管理画面の商品管理から表示させたい商品の編集画面を開きます。

商品の編集画面の下にある検索結果のプレビュー欄までスクロールし、「ウェブサイトのSEOを編集する」をクリックします。

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

商品を作成しただけだと日本語になっているので、分かりやすい英単語にするのがおすすめです。

日本語のままであれば英単語に編集して保存しましょう。

そしてこのハンドルをコピーしておきます。

次に表示先の商品の商品編集画面を開きます。

「表示先の商品」とは、Bの商品をAの商品ページで「一緒に買う商品」として表示させたい時の、Aの商品の方のことです！

編集画面右側の「タグ」欄に、半角でアンダーバー2つとwith:と記載し、先ほどコピーしたハンドルをつなげます。

「__with:handlename」という感じですね。

入力したら右下の「保存する」をクリックして保存するのを忘れずに！

上記の設定で再度商品ページを確認してみると一緒に買う商品が表示されていると思います。

Prestigeテーマで用意されている「BUY IT WITH」のタイトルの日本語訳がちょっとおかしい。

ですのでこちらも合わせて直してしまいましょう！

管理画面左側のオンラインストア→テーマ→コードを編集するをクリックしてコードの編集画面を表示させます。

コードに慣れていないとぎょっとしてしまいそうですが、編集は簡単なので大丈夫！

コード編集画面の下にあるLocalesのフォルダを開き、ja.jsonをクリック

「buy_it_with」で検索すると”title”という欄があるので、その日本語訳を編集します。

私の場合は「一緒に購入」としていますが、ストアに合う名称に設定してください。

編集が終わったら忘れずに右上「保存する」をクリックして保存します。

以上、Shopifyの一緒に買う商品（BUY IT WITH）の表示方法でした！

参考になれば幸いです。