# Shopifyのグローバルメニューを並列出力する方法

**URL:** <https://community.shopify.com/t/shopify/192000>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [February 15, 2023, 3:19am UTC](https://community.shopify.com/t/shopify/192000 "2023-02-15T03:19:06Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Shopifyのグローバルメニューを2列表示（例：「HOME/ホーム」）にする実装方法についての質問です。

**提案された解決策：**
- メニュー項目を「/」で区切って登録
- Liquidテンプレートで `{{ link.title | split: '/' | first }}` と `{{ link.title | split: '/' | last }}` を使用して分割表示

**経過：**
- 質問者は当初、具体的な実装箇所（header.liquid内のどこに記述すべきか）について追加質問
- 最終的に無事解決したと報告

技術的にはLiquidのsplitフィルターを活用した文字列分割による並列表示の実装例が提示されました。

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [February 15, 2023, 3:19am UTC](https://community.shopify.com/t/shopify/192000/1 "2023-02-15T03:19:06Z")

</div>

はじめまして。

グローバルメニューの表記を下記画像のように２列で表示させたいです。

メニューを「HOME/ホーム」のように/で分けて登録し、

{{ link.title | split: ‘/’ | first }}

を使って表示させたいです。

しかし細かい方法がわかりません。

 ![スクリーンショット 2023-02-15 12.16.32.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/0/70c990b62671781c7ab54db33157cd16b3844c99.png)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 15, 2023, 8:50am UTC](https://community.shopify.com/t/shopify/192000/2 "2023-02-15T08:50:30Z")

</div>

Mongorian346様

フルバランスの園畑です。  
ご質問を確認いたしました。

いただいている形で実装は可能かと存じます。

一例ですが以下のような書き方はいかがでしょうか？(html,cssは調整くださいませ。)

```markup
- {{ link.title | split: '/' | first }} 
  {{ link.title | split: '/' | last }}

```

ご参考までに。

---

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [February 15, 2023, 11:40am UTC](https://community.shopify.com/t/shopify/192000/3 "2023-02-15T11:40:21Z")

</div>

ご回答ありがとうございます。

ど素人で申し訳ございません。header.liquid内のどの部分を送っていただいたコードに書き換える必要がありますか？

教えていただけると幸いです。

---

<div class="post-metadata">

**Author:** ![mongorian346](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/mongorian346/32/111736_2.png) [@mongorian346](https://community.shopify.com/u/mongorian346)\
**Post date:** [February 17, 2023, 6:25am UTC](https://community.shopify.com/t/shopify/192000/4 "2023-02-17T06:25:53Z")

</div>

無事解決しました。ありがとうございました。