【クリエイターモード】テンプレートCompleteのヘッダーメニューを追加したいです。方法を教えてください。 – makeshop よくある質問

テンプレート【Complete】にてヘッダーメニューを「お気に入り」や「マイページ」などと同様の形式で追加したい場合は、
HTMLの追記とCSSにてアイコンフォントの指定で可能です。

例）追加１、追加２というメニューを既存メニューの両端に追加した例

＜PC表示例＞

＜スマホ表示例＞

手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ヘッダー」

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に

<ul class="gnav">

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

<ul class="gnav">
    <li class="gnav-menu header-favorite"><a href="<{$url.favorite}>">お気に入り</a></li>
    <li class="gnav-menu header-mypage"><a href="<{$url.mypage}>">マイページ</a></li>
    <li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
    <span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>
</ul>

該当の箇所に下記のように追記してください。（追加１の位置は赤文字、追加２の位置は青文字の部分）

追記例）

<ul class="gnav">
    <li class="gnav-menu header-add1"><a href="リンク先URL">追加１</a></li>
    <li class="gnav-menu header-favorite"><a href="<{$url.favorite}>">お気に入り</a></li>
    <li class="gnav-menu header-mypage"><a href="<{$url.mypage}>">マイページ</a></li>
    <li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
    <span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>
    <li class="gnav-menu header-add2"><a href="リンク先URL">追加２</a></li>
</ul>

上記は例のため、メニュー名とリンク先URLは変更してください。

手順2）
ヘッダーのメニューはアイコンフォントで表示されているため
アイコンを指定するCSSを追記する必要があります。

font-awesome5（外部サイト）
上記のサイトにアクセスし、Freeアイコンの表示させたいものを選択し、ポップアップされる画面右上のコードをCSSで使用します。
下図の場合は f04b です。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄の末尾に下記を追記してください。

追記例）

.header-add1 a:before {
 font-family: 'Font Awesome 5 Free';
 content: "\f04b";
 font-size: 16px;
 display: block;
 color: #707070;
}

.header-add2 a:before {
 font-family: 'Font Awesome 5 Free';
 content: "\f04e";
 font-size: 16px;
 display: block;
 color: #707070;
}

HTML追記例の追加１のクラス名がheader-add1、追加２のクラス名がheader-add2のため、
それぞれf04bとf04eのアイコンフォントを指定するCSSを記述しています。

各クラス名やアイコンフォントの指定などはショップ様のお好みで変更してください。

関連記事