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

日本語 ディスカッション Shopify テーマ

Topic summary

Brooklynテーマでログインアイコンとカートアイコンを変更する方法についての質問と解決策の共有。

質問者の解決方法:

  • SVGアイコンを用意し、設定→ファイルからアップロード
  • sections/header.liquidで<span>タグ内に<img>タグでSVGファイルを読み込む
  • 新規CSSファイルを作成し、layout/theme.liquidで読み込む
  • 元のCSSアイコン記述（:beforeのcontent）をコメントアウト

より良い方法の提案:
mrtcさんから、ShopifyではSVGアイコンをSnippetsにファイルを設け、SVGコードを直接貼るのがスタンダードとの助言。case/whenを使用することで管理しやすくディレクトリもスッキリする。具体的なコード例としてSnippets/svg-icons.liquidの作成方法が提示された。

注意点:
SVGファイルのURLを変更するのではなく、SVGタグ全体（<svg>～</svg>）のコードを差し替える必要がある。HTML/CSSの知識が必要で、難しい場合は外部委託や学習が推奨される。

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
3

ほぼ完璧です。

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

Snippets/svg-icons.liquid

{%- case svg-icons -%}
    {%- when 'home' -%}
        
    {%- when 'search' -%}
        
    {%- when 'cart' -%}
        
    {%- when 'login' -%}
        
{%- endcase -%}

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

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

参考になれば幸いです。

1 Like