← inaro.devShopify学習ツール
13-03

言語・通貨セレクタの実装

ヘッダーやフッターに言語・国(通貨)セレクタを実装できる

最終確認: 2026-09

解説

受託の現場でなぜ必要か: この回では、言語と国(通貨)のセレクタを、form 'localization'で作れるようになります。
受託では、自作の<select>とJSで作ると切替が壊れるので、Shopifyのフォームに任せた形で納品します。

form 'localization'とは、切替をShopifyに任せるフォーム

セレクタは、必ずこのフォームで作ります。
language_codecountry_codeを送ると、Shopifyがロケール(言語の設定)と通貨を切り替え、URLも変わります。
自作の<select>とJSでは、URLとロケールの切替がShopify側と噛み合わず壊れます。
_method=putのhidden inputとreturn_toは、自動で入ります。

選択肢のデータはどこから取るか

localization.available_languageslocalization.available_countriesから取ります。
各国はcountry.currency.iso_codecountry.currency.symbolを持ちます。
現在の値は、localization.languagelocalization.countryです。

切り替えた後はどこに戻るか

return_torequest.pathを渡すと、同じページに戻ります。
JSでchangeイベントを拾って、フォームを自動送信するUIが一般的です。

発展:セレクタに出ないときと旧方式

有効な市場に含まれる国・言語しか出てきません。
「セレクタに出ない」は、Markets設定側の問題であることが多いです。
旧方式のform 'currency'は非推奨なので、localizationに置き換えます。

ステップ1 / 2

ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。