テーマ「Brooklyn」のヘッダーに言語セレクターを設置したい

Topic summary

Brooklynテーマのヘッダーに言語セレクターを設置しようとしているが、参考記事の手順通りに進めてもうまく動作しない問題が発生している。

試した手順:

  • スニペットフォルダに「lang-switch.liquid」ファイルを新規作成
  • HTML・JavaScriptコードを記載
  • header.liquid内のschemaに設定箇所を追加
  • ヘッダーメニューにコードを埋め込み

発生している問題:

  • ヘッダーメニュー箇所にコードを埋め込むと、ハンバーガーメニューに変わってしまう
  • 参考記事で言及されている「icon-caret.liquid」ファイルがBrooklynテーマには存在しない(Dawnテーマには存在)
  • Liquidエラーが発生:「snippets/icon-caret.liquid が見つかりませんでした」

質問内容:

  • ハンバーガーメニューに変わってしまう原因
  • Brooklynテーマでの適切な実装方法
  • Brooklynテーマに詳しい人からの回答を求めている

現在、解決策は見つかっておらず、テーマ固有のファイル構造の違いが主な障害となっている状況。

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

実現したいこと

・テーマ「Brooklyn」のヘッダーに言語セレクターをシンプルに設置したい

問題

・参考記事通りにうまいこといかない。(テーマ「Brooklyn」用の参考記事ではない)

・ヘッダーメニュー箇所にコードを埋め込むと、何故かハンバーガーメニューに変わってしまう。原因が知りたい。

・Brooklynに強い人がいましたらご回答お願いします。

Brooklynテーマのカスタマイズではデフォルトでヘッダーには言語セレクターのチェックボックスが存在しない。

なので、

参考記事の通りに以下試しました。

・スニペットフォルダにて新規ファイルの作成

・新規ファイルにHTML、JSコード記載

・header.liquid内のschemaにて設定箇所を設ける

・header.liquid内にヘッダーメニューにコード設置

順番に(参考記事通りに)

・スニペットフォルダにて新規ファイル「lang-switch.liquid」を作成

G_A_A_0-1712713578328.png

・新規ファイルにHTML、JSコード記載

<HTML>

G_A_A_2-1712713956669.png

<JS>

・header.liquid内のschemaにて設定

・header.liquid内にヘッダーメニューにコード設置

カスタマイズの設定箇所には表示されています。

ヘッダーメニューが勝手にハンバーガーメニューになってしまいます。

「header.liquid」のヘッダーメニュー内に記述したコードがおかしいのでしょうか?

G_A_A_13-1712715771498.png

あとエラー出ています

G_A_A_10-1712714789534.png

Google翻訳「英語の Liquid エラー (スニペット/lang-switch 行 19): アセット スニペット/icon-caret.liquid が見つかりませんでした」

「lang-switch.liquid」の19行目

G_A_A_11-1712714868987.png

テーマが違うから「icon-caret.liquid」 が見つかるはずもなく・・・

※テーマ「Dawn」ならそのファイルがあるの確認できました。

参考にした記事内容も

「そして、header.liquid内の

の最後の子要素に、以下のコードを追加します。」

と記載しており、icon-caret.liquidがある前提の設置方法みたいです。

テーマ「Dawn」から「icon-caret.liquid」ファイルを新規スニペットにてファイルコピペで作ってみました。

G_A_A_12-1712715700809.png

これは・・・CSSで調整したら問題解決な気がしますが。。。

他の記事も試してみたんですが同じく、

ヘッダーメニューに追加しようとすると、勝手にハンバーガーメニューになりました。

ヘッダーメニューのコードです。

・312行目、カートの後ろに言語セレクターを設置したい

・言語セレクターを設置コードを追加すると何故かハンバーガーメニューになる。その原因もわかりません。

・Brooklynに強い人がいましたらご回答お願いします。

別にこの方法じゃなくても、言語セレクターをヘッダーに設置できたらいいので、

もし他の方法があればご教示よろしくお願いいたします。