# ヘッダーをカスタマイズ **URL:** \ **Category:** Shopify テーマ\ **Tags:** css, html\ **Created:** [October 29, 2023, 2:06pm UTC](https://community.shopify.com/t/topic/263567 "2023-10-29T14:06:47Z")\ **Posts on this page:** 8\ **Page:** 1 ## AI-generated summary PCヘッダーに他社モールへのリンク付きアイコンを複数設置したいという要望。テーマは Dawn、SPは非対応（PCのみ）。 対応方法: - header-group.json をバックアップのうえ、schema に custom-liquid セクションを追記。 - order 配列に custom-liquid を追加し、テーマカスタマイズからヘッダーに任意のコンテンツを配置。 - 位置や操作は添付画像・動画リンクで説明。コード断片と手順が提示された。 実装結果: 上記でPCヘッダーへの追加は問題なく反映された。 追加対応（SPで非表示）: - 追加したコンテンツに pc-only クラスを付与。 - カスタムCSSで max-width 768px のメディアクエリ内で pc-only を非表示に設定（display: none !important）。 - これによりスマホ表示ではアイコンが非表示になることを確認。 状況: 要望は実現し、解決済み。未解決の課題や異論はなし。
**Author:** ![yoshidesign](https://avatars.discourse-cdn.com/v4/letter/y/b5ac83/32.png) [@yoshidesign](https://community.shopify.com/u/yoshidesign)\ **Post date:** [October 29, 2023, 2:06pm UTC](https://community.shopify.com/t/topic/263567/1 "2023-10-29T14:06:47Z")
クライアント様からの要望で、添付の画像のようにヘッダーをカスタマイズ可能かどうかご存知でしたら教えてください。 ![スクリーンショット 2023-10-29 22.56.19.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/c/8/4c8cb1131263ca240f3d88e8791caf476236c5a9.png) ヘッダー内に複数のアイコン（他社モールサイトへのリンク付き）を設置したいと考えております。 header.liquidが複雑でどのようなコードを入力すれば良いかわからず困っております。 なお、今回使用するテーマはDAWNで、私自身はディレクターで簡単なコード編集はできますが、複雑なカスタマイズはできないレベルです。 ご確認何卒よろしくお願いいたします。 ---
**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\ **Post date:** [October 30, 2023, 12:01am UTC](https://community.shopify.com/t/topic/263567/2 "2023-10-30T00:01:57Z")
はじめまして。 株式会社ファイブビットの福水と申します。 > > クライアント様からの要望で、添付の画像のようにヘッダーを > > カスタマイズ可能かどうかご存知でしたら教えてください。 可能です。いただいているスクショはPCのみのようですが、スマホ版のヘッダーには画像は差し込まなくてよいのでしょうか？もしスマホ版にも画像を差し込む必要がある場合は、スマホ版のスクショもご共有いただけると、嬉しいです。 ---
**Author:** ![yoshidesign](https://avatars.discourse-cdn.com/v4/letter/y/b5ac83/32.png) [@yoshidesign](https://community.shopify.com/u/yoshidesign)\ **Post date:** [October 30, 2023, 12:06am UTC](https://community.shopify.com/t/topic/263567/3 "2023-10-30T00:06:57Z")
福永様 お世話になります。 ご回答いただきありがとうございます。 SPではアイコンを入れず、PCのヘッダーのみとなります。 ご確認何卒よろしくお願いいたします。 ---
**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\ **Post date:** [October 30, 2023, 1:13am UTC](https://community.shopify.com/t/topic/263567/4 "2023-10-30T01:13:41Z")
ありがとうございます。 やり方ですが、 まずは、header-group.json を編集するのでメモ帳かどこかに **必ずバックアップをとっておいてください。** ①header-group.json 内に下記コードを記述します。 ```javascript "custom-liquid": { "type": "custom-liquid", "settings": { } }, ``` 場所は、下記画像にて確認ください。 [https://gyazo.com/316790adf6c6d8abc2680416aebabad6](https://gyazo.com/316790adf6c6d8abc2680416aebabad6) ②同じくheader-group.json 内の下記コードに “custom-liquid”, を記述します。 ```javascript "order": [ "announcement-bar", "header" ] ``` 場所は、こちらも下記画像にて確認ください。 [https://gyazo.com/9397d9d4fc09096f96283d24f19766a1](https://gyazo.com/9397d9d4fc09096f96283d24f19766a1) ①②が完了したら、テーマのカスタマイズから、ヘッダーに新しくコンテンツを記述できるようになっているので、好きに使ってください。 動画：[https://gyazo.com/8850d85f269055509039f2d7b6d472b3](https://gyazo.com/8850d85f269055509039f2d7b6d472b3) ---
**Author:** ![yoshidesign](https://avatars.discourse-cdn.com/v4/letter/y/b5ac83/32.png) [@yoshidesign](https://community.shopify.com/u/yoshidesign)\ **Post date:** [October 30, 2023, 3:18am UTC](https://community.shopify.com/t/topic/263567/5 "2023-10-30T03:18:10Z")
ご説明誠にありがとうございます。 いただいたやり方で設定したところ、無事反映できました。 大変助かりました。 ---
**Author:** ![yoshidesign](https://avatars.discourse-cdn.com/v4/letter/y/b5ac83/32.png) [@yoshidesign](https://community.shopify.com/u/yoshidesign)\ **Post date:** [October 30, 2023, 4:08am UTC](https://community.shopify.com/t/topic/263567/6 "2023-10-30T04:08:42Z")
もう1点お尋ねしたいのですが、SPで非表示にする場合はどのようにコードを編集すればよろしいでしょうか？ お手数ですが、ご確認よろしくお願いいたします。 ---
**Author:** ![Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_3b9a8e857ec4e2560bc009f074375383/32/279353_2.png) [@Anonymous\_3b9a8e857ec4e2560bc009f074375383](https://community.shopify.com/u/Anonymous_3b9a8e857ec4e2560bc009f074375383)\ **Post date:** [October 30, 2023, 5:24am UTC](https://community.shopify.com/t/topic/263567/7 "2023-10-30T05:24:49Z")
下記の流れを試してみてください。 ① ヘッダーに追加したコンテンツに pc-only という名前のクラスを付与する （下記は例です） ```markup コンテンツ・コンテンツ・コンテンツ ``` 下記画像も参考にしてください。 [https://gyazo.com/4da8eee4cfbad4632d750f644250d46f](https://gyazo.com/4da8eee4cfbad4632d750f644250d46f) ②カスタムCSSにコードを付与する （これはそのままコピペしてください） ```css @media screen and (max-width: 768px) { .pc-only { display: none !important; } } ``` 下記画像も参考にしてください。 [https://gyazo.com/1faf2b0d41492e0280399b5eb71a0a6a](https://gyazo.com/1faf2b0d41492e0280399b5eb71a0a6a) ②のCSSは、画面幅768px以内の端末で閲覧した場合は、pc-onlyクラスが付与されたコンテンツは非表示になる、という内容になっています。 もし、上記の流れで意図通りの内容にならなかった場合は、実装した場所や画面のスクショを可能な限り具体的にご共有いただいければと思います。 ---
**Author:** ![yoshidesign](https://avatars.discourse-cdn.com/v4/letter/y/b5ac83/32.png) [@yoshidesign](https://community.shopify.com/u/yoshidesign)\ **Post date:** [October 30, 2023, 6:44am UTC](https://community.shopify.com/t/topic/263567/8 "2023-10-30T06:44:10Z")
再度ご説明いただきありがとうございます。 こちらのやり方でSPで非表示になりました。 重ねてお礼申し上げます。