Shopifyでは、商品や記事に任意のタグを付与して整理・絞り込みに活用できます。しかし、標準機能だけでは、閲覧者の表示言語に合わせて「日本語タグだけ／英語タグだけ」といった形でタグ一覧を自動的に出し分けることはできません。
本記事では、Shopifyアプリ「RuffRuff タグ一覧」のアプリブロック機能と「Shopify Translate & Adapt」の翻訳設定を組み合わせ、コレクションページに表示されるタグ一覧をユーザーの言語に応じて出し分ける具体的な手順を解説します。なお、手順はアプリのレギュラープラン機能を前提にしています。 下記のブログ記事では、Shopifyでタグを活用するメリットを解説します。ご参考にしてください。
RuffRuff タグ一覧とは
「RuffRuff タグ一覧」は、商品やブログ記事に設定しているタグをオンラインストア上に一覧表示し、「商品やブログ記事など目的の情報へのアクセス性向上」や「サイト回遊率の向上」をサポートします。 ノーコード且つ3ステップで簡単に導入でき、オンラインストアのテーマデザインに併せてタグ一覧のデザインを自由にカスタマイズすることが可能です。
料金:無料〜
Shopify Translate & Adaptとは
Shopifyが開発したShopifyストアを翻訳するアプリです。アプリ内から1クリックでGoogle翻訳を利用した一括翻訳を行ってくれます。一括翻訳後に自身で修正することも可能です。
料金: 無料
※ただし、2言語までは自動翻訳が可能ですが、3言語目以降は手動翻訳です。
下記のブログ記事では、Shopify Translate & Adaptの特徴やその他翻訳アプリを紹介しています。ご参考にしてください。
アウトプット
本記事で紹介する設定を行うと、コレクションページに表示される商品のタグ一覧では、言語セレクタで日本語を選択した場合に日本語のタグのみが表示されます。英語を選択した場合は、英語のタグのみが表示されます。
下記のリンクから実際の動作を確認できますので、ご参考にしてください。
Shopifyでタグ一覧を言語ごとに出し分ける方法
事前準備：タグ一覧アプリをセットアップする
本記事で紹介する方法では、Shopifyアプリ「RuffRuff タグ一覧」を利用します。
本章では、RuffRuff タグ一覧のインストールから適切なプランの契約までを紹介します。
アプリをインストール
(1) Shopifyアプリストアより、「RuffRuff タグ一覧」のページにアクセス
こちらのリンクからもインストールできます：https://apps.shopify.com/ruffruff-tags
(2) 「インストール」をクリック
レギュラープランに契約する
本手順はレギュラー プランで利用できるアプリ ブロック機能を用いるため、レギュラー プランの契約が必要です。
(1) アプリの左メニューにある「料金プラン」をクリック
(2) レギュラープランの「3日間の無料トライアル」をクリック
(3) プランの内容を確認し、「承認する」をクリック
今回はレギュラープランの年払い（年額99.6ドル）の契約画面になります。レギュラープランには月払い（月額9.99ドル）もあります。
ステップ1：商品に日本語と英語のタグをそれぞれ設定する
(1) 商品管理より、対象商品にアクセスする
(2) タグの入力フォームに日本語のタグと英語のタグをそれぞれ追記
今回は、日本語のタグとして「個数制限」と英語のタグとして「Quantity Limits」を設定しています。
(3) 「保存」をクリック
(4) 他の商品にも同様の手順でタグを設定
ステップ2：アプリブロックを追加する
(1) 「オンラインストア > テーマ」の順にアクセス
(2) タグ一覧を表示したいテーマの「カスタマイズ」をクリック
(3) テーマカスタマイズ画面より、コレクションページを開く
(4) 「セクションを追加」をクリック
(5) 「アプリ」タブを選択
(6) 「タグ一覧（Regularプラン）」という名称のアプリブロックを選ぶ
(7) タグ一覧を表示させたい場所へアプリブロックをドラッグ・アンド・ドロップ
ステップ3：日本語選択時に英語のタグを非表示にする
ここでは、オンラインストア上で、日本語を選択したお客様に対して英語のタグを非表示にする設定方法を紹介します。
(1) ステップ2で挿入したアプリブロックの設定ページを開く
(2) 除外タグにステップ1で設定した「英語のタグ」を追記
複数のタグが存在する場合は、改行で追記してください。
(3) 保存をクリック
ステップ4：英語選択時に日本語のタグを非表示にする
ここでは、オンラインストア上で、英語を選択したお客様に対して日本語のタグを非表示にする設定方法を紹介します。
(1) Shopify Translate & Adaptをクリック
(2) 英語を選択
(3) 「テーマ > テンプレート」をクリック
(4) 左のテンプレート一覧より、「Collection」テンプレートを選択
(5) ステップ3にて除外タグに設定した「英語のタグ」が表示されているリファレンスの英語訳に、ステップ1で設定した「日本語のタグ」を追記
複数のタグが存在する場合は、改行で追記してください。
(6) 「保存」をクリック
以上で設定は完了です。
最後に
本記事では、Shopify標準では対応できないタグ一覧の言語別出し分けを、RuffRuff タグ一覧アプリ（レギュラー プラン）と翻訳設定の組み合わせで実現する手順を解説しました。
実装の要点は、コレクション ページにアプリブロックを配置し、除外タグを言語ごとに適切に設定することです。
導入後は言語切替時の表示確認と、タグ命名のルール化による表記ゆれ防止を行うと、運用が安定します。
最後に、下記のブログ記事では、Shopifyでタグ一覧やタグ絞り込み機能を導入する方法を紹介しています。ご参考にしてください。
