グローバルメニューの表記について

AI-generated summary

Shopifyのグローバルメニューで英語+日本語を併記する実装方法の相談。どのファイルをどう編集すべきかという問いに対し、テーマのナビゲーション表示箇所(Liquid)での出力ロジックの工夫が提案された。

主な提案(Liquid=Shopifyのテンプレート言語):

  • linklist(ナビゲーションオブジェクト)のtitleを変数にし、case/whenで表示を切り替える。
  • メニュー名を「ABOUT/私たちについて」のように設定し、link.title を split(‘/’) で分割して英語(first)と日本語(last)を取り出し、HTML/CSSで整形。
  • 代替案(追記):リンク先ページ側にメタフィールド(カスタムフィールド)で表示文言を持たせ、link.object 経由で取得して表示。ただし、全ページでメタフィールドが使えるわけではないため汎用性は限定的。

更新・訂正:当初提示された「リンク先ページのタイトル取得」関連の参照リンクは誤りとして取り下げ。代わりにメタフィールド案が補足。

進捗・結論:質問者は提案を試す意向を表明。具体的なファイル名の特定には至っていないが、ナビゲーション出力テンプレートの編集方針と実装手順は共有され、実装可能な方向性は示された。議論は事実上収束。

ABOUT

私たちについて

↑こんな感じの、英語と日本語が併記されたメニューにしたいのですが

どのファイルをどのように編集したらよろしいでしょうか。

静的サイトは作れますが、shopifyは初めてです。

いくつか作り方はあると思いますが、一つは以下のような者が考えられます。

  • linklist オブジェクトのtitleを変数として、case/whenで場合分けして出力

参考:

https://shopify.dev/api/liquid/tags/control-flow-tags#case-when

もう一つは、リンク先のページのタイトルが目的に語句である前提ですが、それを取得する方法です。
以下の公式のサンプルコードが参考になると思います。

https://help.shopify.com/en/manual/online-store/themes/os/customize/feature-a-subset-of-collections

上記の情報で難しい場合はさらに関連情報を探したり別方向の方法を探されるか、エキスパートやパートナーに依頼されることをお勧めします。

ありがとうございます!試してみます!

私がよく使う技して、こんな出力方法もあります。

メニュー名を「ABOUT/私たちについて」で設定

{{ link.title | split: ‘/’ | first }} → ABOUT
{{ link.title | split: ‘/’ | last }} → 私たちについて

あとは該当箇所のHTMLとCSSを設定するだけです。

ありがとうございます!

そのような方法もあるのですね・・!

とても助かります!!

もう一つは、リンク先のページのタイトルが目的に語句である前提ですが、それを取得する方法です。> 以下の公式のサンプルコードが参考になると思います。> > https://help.shopify.com/en/manual/online-store/themes/os/customize/feature-a-subset-of-collections

すみません、通知がきたのでたまたま見直しましたが、上記は誤字の上に内容間違ってますね…。
取り下げさせてただければと思います。

一応ですが、上記で記載予定だった方法と類似のものを追記させていただきます。

  • リンク設定対象ページのメタフィールドに必要な文言を設定
  • link.listのlinkオブジェクトのlink.objectを通して、リンク設定対象ページのメタフィールドの情報を取得して表示させる

参考:
https://help.shopify.com/ja/manual/metafields

https://shopify.dev/api/liquid/objects/link#link-object

まだ公式の機能として全てのページがメタフィールドの付与対象になっていないのと、mrtcさんのご回答の方がシンプルなので、上記はそれほどお勧めするものではありませんが。

ありがとうございます。

当方、初心者なもので様々な方法を提示してくださるのが

とても勉強になります!

気にかけてくださり、感謝いたします。