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

Shopify Prestige BIY IT WITH 表示方法

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

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

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

Shopify Prestige BIY IT WITH 表示方法

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

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

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

表示させたい対象商品のハンドルを確認する

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

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

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

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

Shopify Prestige BIY IT WITH 表示方法

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

Shopify Prestige BIY IT WITH 表示方法

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

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

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

タグに__with:ハンドル名を追加する

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

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

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


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

Shopify Prestige BIY IT WITH 表示方法

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

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

おかしな日本語訳も直しておこう

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

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

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

Shopify Prestige BIY IT WITH 表示方法

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

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

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

Shopify Prestige BIY IT WITH 表示方法

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

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

以上、Shopifyの一緒に買う商品(BUY IT WITH)の表示方法でした!

参考になれば幸いです。

参考記事:
https://support.maestrooo.com/article/173-product-adding-an-associated-product

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

11 − 7 =