ログインアイコン・カートアイコンを変更したい

解決済
みかん
観光客
3 0 1

Brooklynテーマをカスタムしています。

ログインアイコン・カートアイコンを変更したいです。

 

・assets/icons.json

・assets/icons.svg

・assets/theme.scss.liquid

・sections/header.liquid

↑あたりを見てみましたが、うまくいきません…ご教示いただきたくよろしくお願いいたします。

スクリーンショット-2021-09-20-20.11.53(3).jpg

 

0 件の「いいね!」
みかん
観光客
3 0 1

やり方が合っているかわかりませんが、とりあえず自己解決できましたので下記します。
どなたかのご参考になれば幸いです…。

【やりたいこと】
ログインアイコン・カートアイコンを変更したい


上記アイコン2種類をsvgで用意。
設定→ファイルからアップロード+各svgのurlをコピー。


sections /header.liquid

◆<span class="icon icon-customer" aria-hidden="true"> </span>
◆<span class="icon icon-cart" aria-hidden="true"></span>
↑それぞれ<span>内に<img>で①svgファイルを読み込む

assets /timber.scss.liquid
◆.icon-cart:before { content:'\e600'; }
◆.icon-customer:before { content:'\e605'; }
 ↑コメント化して、非表示
 
新規cssを作成+layout /theme.liquidで新規cssを読み込ませる
【新規css記述】
span.icon.icon-customer,
span.icon.icon-cart {
width: 1em;
}
 
以上です。
合っているかどうかも自信がなく(汗)
ほかにスマートなやり方等ありましたら、引き続きご教示いただけますと幸いです。
 
テーマカスタム引き続き学習していきたいと思いますので、また不明な点があれば質問させてください。
よろしくお願いいたします。
 
0 件の「いいね!」
mrtc
遊覧客
37 16 17

成功

ほぼ完璧です。

好みもありますが、ShopifyではSVGアイコンはSnippetsにファイルを設けSVGコードを貼るのがスタンダードのようです。
case/whenを使えば、管理もしやすくディレクトリもスッキリするのでよく使っています。

Snippets/svg-icons.liquid

{%- case svg-icons -%}
    {%- when 'home' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'search' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'cart' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'login' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- endcase -%}

検索アイコンの場合は以下のコードで出力します。

{% render 'svg-icons' with 'search' %}

 参考になれば幸いです。

みかん
観光客
3 0 1

さま

お教えいただいたやり方でもアイコン変更ができました!

SnippetsでSVGコードを管理するやり方で進めていきたいと思います。
ありがとうございました!