【Shopify】アイコン付きメニューを実装

グローバルメニューやトグルメニューにアイコンを付けられます。

ShopifyのメニューにはWordPressと違いクラスを付ける機能が備わっていないため、アイコン付きメニューを実装するのは難しいです。

「クラスさえ付けられれば、CSSの疑似属性でアイコンを付けられるのに…」と諦めている方も多いはず。

このカスタマイズをすることで、メニューリンクそれぞれにクラス付与はもちろん、CSSの疑似属性を使わずにSVGアイコンを個別に出力することが可能です。

実装自体は簡単ですが、見た目を整える為にCSSの知識が若干必要になります。