おおよその流れ
出来上がりイメージ
１，SVGアイコンの準備
２，カートアイコンとアカウントアイコンの変更
３，虫眼鏡アイコンの変更
４，確認
SVGアイコンの準備
ヘッダーのアイコンは、SVG画像で作られています。
まずは、カートアイコン・アカウントアイコン・虫眼鏡アイコンに使うSVGファイルを準備しましょう。
フリーで商用利用可能なSVG画像は、以下のサイトなどから取得可能です。
ICON BOX
Ikonate
Icon-rainbow
INF FREE ICON
EXPERIENCE JAPAN PICTOGRAMS
FLAT ICON DESIGN
ICOOON MONO
※全て無料で商用利用可能ですが、一部加工が認められていないサイトもあるのでお気をつけください。
カートアイコンとアカウントアイコンの変更
カートアイコン
カートアイコンは、snippetsフォルダのicon-cart.liquid、icon-cart-empty.liquidを変更します。
icon-cart.liquidはカートに商品追加される前のアイコン、icon-cart-empty.liquidはカートに物が追加された後のアイコンになります。
カートに商品が追加された際には、アイコン右下にカートに入っている商品数量のバッジが出るので、どちらも同じアイコンにしても構いません。
snippetsフォルダのicon-cart.liquid、icon-cart-empty.liquidにもとから入っているコードはコメントアウトし、SVG画像のコードをそのまま貼り付けてください。
ここで一つポイントがあります。ヘッダーアイコンに使われているSVGは 20px × 20px なので、svgタグの中に「style="width: 20px; height: 20px;"」を入れてください。
style="width: 20px; height: 20px;"
これで、アイコンが変更できました。簡単ですね！
アカウントアイコン
アカウントアイコンは、snippetsフォルダのicon-account.liquidを変更します。
カートアイコンと全く同じ手順なので、ここでは割愛させていただきます。
虫眼鏡アイコンの変更
虫眼鏡アイコン
虫眼鏡アイコンは、sectionsフォルダ内のheader.liquidにコードの記述があるので、そちらを変更します。
ファイル内で「svg」で検索をすると、該当箇所がすぐに分かります。
元からあるsymbolタグより下のpathを、https://icooon-mono.com/ などから取ったSVGアイコンのpathに置き換えるだけです。
※要注意しなければいけなところは、元からあるコードの「viewbox="0 0 18 19"」だと小さすぎて見えないので、「viewbox="0 0 512 512"」に変更する必要があることです。
ここで一つポイントがあります。ヘッダーアイコンに使われているSVGは 20px × 20px なので、svgタグの中に「style="width: 20px; height: 20px;"」を入れてください。
確認
それぞれのアイコンが変わっているか、カートに商品追加した時にアイコンが変わるかを確認し、終了。
最後に
今回の記事、Shopifyサイト作成の参考になりましたでしょうか？もしよろしければ、Xでのシェアよろしくお願いいたします。
また、お仕事のご依頼もお待ちしております❗
