言語・通貨セレクタの実装
ヘッダーやフッターに言語・国(通貨)セレクタを実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か: この回では、言語と国(通貨)のセレクタを、form 'localization'で作れるようになります。
受託では、自作の<select>とJSで作ると切替が壊れるので、Shopifyのフォームに任せた形で納品します。
form 'localization'とは、切替をShopifyに任せるフォーム
セレクタは、必ずこのフォームで作ります。language_codeとcountry_codeを送ると、Shopifyがロケール(言語の設定)と通貨を切り替え、URLも変わります。
自作の<select>とJSでは、URLとロケールの切替がShopify側と噛み合わず壊れます。_method=putのhidden inputとreturn_toは、自動で入ります。
選択肢のデータはどこから取るか
localization.available_languagesとlocalization.available_countriesから取ります。
各国はcountry.currency.iso_codeとcountry.currency.symbolを持ちます。
現在の値は、localization.languageとlocalization.countryです。
切り替えた後はどこに戻るか
return_toにrequest.pathを渡すと、同じページに戻ります。
JSでchangeイベントを拾って、フォームを自動送信するUIが一般的です。
発展:セレクタに出ないときと旧方式
有効な市場に含まれる国・言語しか出てきません。
「セレクタに出ない」は、Markets設定側の問題であることが多いです。
旧方式のform 'currency'は非推奨なので、localizationに置き換えます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。