FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

aya9
訪問者
2 0 0

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

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

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

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

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

aya9_0-1627379195215.png

 

 

1件の返信1

株式会社ナレッジサービス
Shopify Partner
66 29 27

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、「保存」をクリックすれば、アイコンが表示されていると思います。