疑似属性でアイコンを出力する場合
編集ファイルを探す
テーマの編集画面より、アイコンを付けたいメニュー部分が出力されるファイルを探します。
Dawnの場合は「sections/header.liquid」が該当しますが、他テーマの場合はSnippetsから読み込まれている可能性もありますので、ヘッダーを出力するファイルのソースを解析し該当のHTMLを探してください。
ほとんどのテーマは「link_list」で出力されていますので、以下を参考に「for link in」等で検索するとすぐにわかります。
→ Linklist object
Dawnの場合、ヘッダー内に出力されるメニューとドロワー用のメニューが別で出力されますので、両方にアイコンを付けたい場合はそれぞれ編集する必要があります。
また、メニューに階層がある場合や、メニューの表示切り替え等で分岐で複雑になっている場合がありますので、ここで難しいと思った方は詳しい方に依頼されるのをお勧めします。
liquidを編集
編集箇所がわかったらForループ内に以下のLiquidコードを挿入します。
{% assign link-title = link.title | split: '/' %}スラッシュ区切りのメニュー名を分割するコードになります。
例えばメニュー名を「ホーム/home」とした場合、「link-title[0]」で「ホーム」、「link-title[1]」で「home」とそれぞれ分割して出力できるようになります。
例えばメニュー構造が以下の場合はこのように編集します。
<ul class="list-list">
{%- for link in section.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link">
<span>{{ link.title }}</span>
</a>
</li>
{%- endfor %}
</ul>↓↓↓↓↓
<ul class="list-list">
{%- for link in section.settings.menu.links -%}
{% assign link-title = link.title | split: '/' %}
<li>
<a href="{{ link.url }}" class="link {{ link-title[1] }}">
<span>{{ link-title[0] }}</span>
</a>
</li>
{%- endfor %}
</ul>これでクラスが付与された<a>タグを出力する準備ができました。
メニュー項目の名前を編集
2で設定した通り、「出力名/クラス名」になるよう、スラッシュ区切りでメニュー項目の名前を編集し保存します。
ここまでの作業だけでクラス付きのメニューが出力されます。
<ul class="list-list">
<li><a href="/" class="link home"><span>ホーム</span></a></li>
<li><a href="/catalog" class="link catalog"><span>カタログ</span></a></li>
<li><a href="/blog" class="link blog"><span>ブログ</span></a></li>
<li><a href="/contact" class="link contact"><span>お問い合わせ</span></a></li>
</ul>このテクニックを応用すれば、よくある英語と日本語を並べたデザインの出力も可能になります。
CSSファイルを編集
まずは編集するCSSファイルを開きます。
どのファイルでも構いませんが、メニュー部分は全ページに出力されるので、全体に反映されるファイルをお勧めします。Dawnの場合は「base.css」が該当します。
アイコン画像は予めアップロードしておいてください。
付与したクラスに対し、疑似属性（::before）でアイコンを付けるCSSの見本は以下になります。
テーマの構造によってクラス名や構造が異なりますので、ご利用のテーマやデザインに合わせて編集してください。
.link-list .link {
display: flex;
align-items: center;
}
.link-list .link::before {
content: "";
display: inline-block;
background: 0 0 / 100% no-repeat;
width: 1.5em;
height: 1.5em;
margin-right: .5em;
}
.link-list .link.home::before {
background-image: url(画像のパス);
}出力するメニューに応じ13〜15行目を複製して、アップロードした画像パスを挿入してください。
以上で、疑似属性を使ったアイコン付きメニューが実装されます。
SVGでアイコンを出力する場合
ShopifyのアイコンはSVGファイルで出力されているケースがほとんどです。
SVGであればキレイなラインで出力でき、オンマウス時の色変更やSVGアニメーションを使った演出も可能です。
SVGファイルの知識さえあれば、基本的には疑似属性のやり方とほぼ同様です。
アイコンは自身で制作したものでも構いませんし、フリー素材をダウンロードしても構いません。
SVGアイコンの作り方については省略させていただきます。
icons.liquidを作成
snippets内に「icons.liquid」を新規作成します。
個別にSVGアイコンを登録しても構いませんが、今回はShopifyならではのSVGスプライトで作成していきます。
{%- case icons -%}
{%- when 'home' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon">...</svg>
{%- when 'catalog' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon">...</svg>
{%- when 'blog' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon">...</svg>
{%- when 'contact' -%}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="icon">...</svg>
{%- endcase -%}
「case/when」を使って、上記見本のように出力するアイコンのSVGコードを全て貼り付け保存します。
「when」の値はメニューで登録するスラッシュの後の単語と同じにしてください。
liquidを編集
疑似属性のチュートリアルで編集したliquidファイルに、先程登録したアイコンを出力させるコード「{% render 'icons' with link-title[1] %}」を追記します。
<ul class="list-list">
{%- for link in section.settings.menu.links -%}
{% assign link-title = link.title | split: '/' %}
<li>
<a href="{{ link.url }}" class="link {{ link-title[1] }}">
{% render 'icons' with link-title[1] %}
<span>{{ link-title[0] }}</span>
</a>
</li>
{%- endfor %}
</ul>これで、SVGアイコン付きのメニューとして出力されます。
CSSを編集
最後にCSSで見た目を整えます。
.link-list .link {
display: flex;
align-items: center;
}
.link-list .link .icon {
display: inline-block;
fill: currentColor;
margin-right: .5rem;
}上記CSSはシンプルな見本なので、ホバーアクションを付けたりご自由に編集してください。
テンカのグローバルメニューも同様のカスタマイズをしております。