FROM CACHE - jp_header

【至急回答願います】テーマSimpleでログインアイコンを表示させる方法

aya9
訪問者
2 0 0

Simpleでカスタマイズをしているのですが、ログインアイコンが表示されず困っております。

Simpleではコードの編集等をしなければ表示は難しいでしょうか。

チェックアウトを設定したら、ログインと会員登録はできるようになったのですが

見た目が下記の添付画像のようになっております。

カートの横にログインアイコンとして表示をさせたいのですが、どうすれば良いでしょうか。

aya9_0-1627379195215.png

 

 

1件の返信1

株式会社ナレッジサービス
Shopify Partner
38 15 20

1、管理画面にログインして、「アクション」→「コードの編集」と進み、Sectionsフォルダ内のheader.liquidファイルを選択してください。

 

2、site-header__link site-header__cartというクラス名がついたaタグを探します。

 

3、上記aタグの直後にこちらのコードを追記します。

<a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>

 

追記すると、次のようなコードになると思います。

<a href="/cart" class="site-header__link site-header__cart">
 {% include 'icon-cart' %}
 <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
 <span class="site-header__cart-indicator {% if cart.item_count == 0 %}hide{% endif %}"></span>
</a>
          
<a href="/account/login" id="customer_login_link" class="site-header__link site-header__cart">
 <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-login" viewBox="0 0 28.33 37.68"><path d="M14.17 14.9a7.45 7.45 0 1 0-7.5-7.45 7.46 7.46 0 0 0 7.5 7.45zm0-10.91a3.45 3.45 0 1 1-3.5 3.46A3.46 3.46 0 0 1 14.17 4zM14.17 16.47A14.18 14.18 0 0 0 0 30.68c0 1.41.66 4 5.11 5.66a27.17 27.17 0 0 0 9.06 1.34c6.54 0 14.17-1.84 14.17-7a14.18 14.18 0 0 0-14.17-14.21zm0 17.21c-6.3 0-10.17-1.77-10.17-3a10.17 10.17 0 1 1 20.33 0c.01 1.23-3.86 3-10.16 3z"></path></svg>
</a>

 

4、「保存」をクリックすれば、アイコンが表示されていると思います。