FROM CACHE - jp_header

ヘッダーアイコンのカスタマイズについて

8910
遊覧客
41 0 2

ヘッダーの下記の要素を自分で用意したロゴにカスタマイズすることは可能でしょうか?

テーマはDawnを使用しています。
・買い物カゴ
・検索虫眼鏡ロゴ

・アカウントロゴ
・ハンバーガーメニューロゴ

スクリーンショット 2023-01-27 12.32.16.png

もし可能でしたら、具体的な手順をご教示頂けると嬉しいです。
よろしくお願いします。

2件の返信2

株式会社フルバランス
Shopify Partner
1470 519 651

8910 様

 

お世話になっております。

フルバランスの道家と申します。

 

ご質問確認いたしました。

自由に変更できると嬉しいですよね。

 

コード編集することにより、カスタマイズが可能かと思います。

それぞれの定義場所ですが、

・買い物かご → スニペット/icon-cart.liquid

・検索虫眼鏡ロゴ → セクション/header.liquidの添付画像の行

・アカウントロゴ → スニペット/icon-account.liquid
・ハンバーガーメニューロゴ →  スニペット/icon-hamburger.liquid

スクリーンショット 2023-01-27 17.44.31.png

検索虫眼鏡ロゴだけ、symbolタグで定義し、useタグで呼び出しています。

https://qiita.com/mzzzk/items/8bb2623d78c8444bbbef

こちらの記事をご参考ください。

 

symbol、useがややこしい場合は、header.liquid内で「<use href="#icon-search">」を探していただき、該当箇所のsvgタグから書き換えればいけるかと思います。(ご参考までに画像添付します。)スクリーンショット 2023-01-27 17.49.20.png

 

なにかヒントになれば幸いです。

 

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

 

フルバランス 道家

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
8910
遊覧客
41 0 2

フルバランス 道家様

 

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

 

大変参考になる情報をありがとうございます。

早速自分のアカウントでコード編集画面に入ってみたのですが、実際にどこをどう書き換えればいいか分からず。(勉強不足で恐縮です)

 

例えばアカウントロゴを変更したい時、どこを書き換えればいいのでしょうか

shopifyの「ファイル」に自分で用意したSVGファイルを登録し、そのリンクを挿入すればいいのか?と思っているのですが、合ってますでしょうか。

 

スクリーンショット 2023-01-27 20.02.40.png

Liquidの知識が少なく、もう少し詳しい説明を頂けると大変助かります。

 

お忙しいとは思いますが、返信お待ちしております!よろしくお願いします。