🐥

【Shopify基礎構築①】ヘッダーアイコンの変更方法

2022/12/02に公開

この記事について

この記事では、ヘッダーアイコンの変更方法についてまとめます。

無料テーマのDawnを変更していきます。

デフォルトのアイコンは、このようにシンプルすぎるデザインアイコンです。
このアイコンを変更したいと思います。

このヘッダーを設定しているファイルは、sectionのheader.liquidになります。

今回は、アカウントアイコンのみを変更しようと思います。
アカウントアイコンは、header.liquidの594行目から605行目で設定されています。

595行目のLiquidコードでsnippetファイルのヘッダーアイコンを呼び出していますね。

{% render 'icon-account' %}

snippetに新しいファイルを作成します。
ファイル名は、icon-new-accountとします。
今回は、こちらのアイコンに変更しようと思います。

Download SVG fileをクリックします。

ファイルを開き、右クリックでページのソースを表示をクリックします。

このコードをコピーし、icon-new-accountファイルに貼り付けします。

下のコードをsvgタグに追加します。

style="height: 2rem; width: 2rem;"

こちらの赤枠になります。

これでファイルは完成です。

あとは、読み込みファイルを変更するだけです。

header.liquidの595行目を

{% render 'icon-new-account' %}

にします。

ストアを確認してみると、変更が確認できるかと思います。

変更の前後を比較すると、このようになっています。

アイコンの色やサイズもHTML/CSSで変更可能です。

カートに商品を追加すると、カートアイコンがデフォルトのアイコンに戻ります。
これは、cart-icon-bubble.liquidのコードを同じように変更すれば解消できます！

以上です！