カートアイコンを変更したい。

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

ユーザーはShopifyの無料テーマ「Dawn」で、現在のポーチ型カートアイコンをAmazonのようなショッピングカート型に変更したいと質問しています。

提案された解決方法:

  • Font AwesomeなどからSVG形式のアイコンを用意
  • Shopifyテーマエディタで新しいスニペットファイル(icon-custom-cart.liquid)を作成
  • SVGコードにclass="icon icon-cart"とstyle="height: 2rem; width: 2rem;"を追加
  • header.liquidファイルでアイコンの参照部分を変更

現在の課題:
ユーザーはHTML/コードの知識がなく、SVGコードのどの部分に具体的にclass属性やstyle属性を追加すればよいかわからない状態です。Font AwesomeのSVGコードは用意できているものの、タグへの属性追加方法について具体的な記入場所の説明を求めています。

ステータス: 解決待ち - 技術的な実装の詳細説明が必要

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

現在無料テーマのDAWNを利用しております。

利用しているカートアイコンがポーチのような形ですが、

amazonのようなショッピングカートに変更したいと思っております。

変更方法をご享受いただけましたら幸いです。

宜しくお願い致します。

1 Like
2

ご質問拝見しました。

以下手順に従って編集していただければと思います！

Shopifyの無料テーマ「Dawn」で、ヘッダーのカートアイコンをAmazonのようなショッピングカートの形状に変更するには、以下の手順をお試しください。

  1. 新しいアイコンの準備:

    • 希望するショッピングカートのアイコンをSVG形式で用意します。
    • Font Awesomeなどのアイコンライブラリから適切なアイコンをダウンロードできます。

  2. スニペットファイルの作成:

    • Shopify管理画面で「オンラインストア」 > 「テーマ」 > 「アクション」 > 「コードを編集する」を選択します。
    • 「スニペット」フォルダ内で「新しいスニペット」をクリックし、ファイル名をicon-custom-cartとします。
    • 作成したicon-custom-cart.liquidファイルに、用意したSVGコードを貼り付けます。
    • SVGタグにclass="icon icon-cart"を追加し、サイズを調整するためにstyle="height: 2rem; width: 2rem;"を指定します。

  3. ヘッダーファイルの編集:

    • 「セクション」フォルダ内のheader.liquidファイルを開きます。
    • カートアイコンを表示している部分を検索し、{% render ‘icon-cart’ %}となっている箇所を{% render ‘icon-custom-cart’ %}に変更します。

  4. 変更の保存と確認:

    • すべての変更を保存し、ストアのフロントエンドで新しいカートアイコンが正しく表示されているか確認します。

この手順により、Dawnテーマのカートアイコンを希望のデザインに変更できます。 詳細な手順や注意点については、以下の参考記事もご覧ください。

下記記事もわかりやすいのでご参考にしていただければと思います！

https://zenn.dev/kosuke_shopify/articles/dd3910aa60f427

ご参考にしていただければと思います！

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

1 Like
3

この度はご回答を頂きましてありがとうございます。

早速ためそうとしたところ、当方HTMLやコードを全くさわれない為に、SVGのコードまでは用意できたのですが、

SVGコードのどの部分に

  • SVGタグにclass="icon icon-cart"を追加し、サイズを調整するためにstyle="height: 2rem; width: 2rem;"を指定します。

このコードをどの部分に追加するのかがわかりません。

<のようなものも追加すると聞いたことがあるのですが、あまり理解しておりません。

ご享受いただいたURLを見ても上手くいきませんでした。

そこを解決できれば他の部分は自力でできるかと思います。

もし可能であれば具体的に記入場所などあれば教えて頂ければと存じます。

念の為いれようとしている元のSVGコードはこちらです。

宜しくお願い申し上げます。