現在無料テーマのDAWNを利用しております。
利用しているカートアイコンがポーチのような形ですが、
amazonのようなショッピングカートに変更したいと思っております。
変更方法をご享受いただけましたら幸いです。
宜しくお願い致します。
1 Like
ご質問拝見しました。
以下手順に従って編集していただければと思います！
Shopifyの無料テーマ「Dawn」で、ヘッダーのカートアイコンをAmazonのようなショッピングカートの形状に変更するには、以下の手順をお試しください。
-
新しいアイコンの準備:
- 希望するショッピングカートのアイコンをSVG形式で用意します。
- Font Awesomeなどのアイコンライブラリから適切なアイコンをダウンロードできます。
-
スニペットファイルの作成:
- Shopify管理画面で「オンラインストア」 > 「テーマ」 > 「アクション」 > 「コードを編集する」を選択します。
- 「スニペット」フォルダ内で「新しいスニペット」をクリックし、ファイル名をicon-custom-cartとします。
- 作成したicon-custom-cart.liquidファイルに、用意したSVGコードを貼り付けます。
- SVGタグにclass="icon icon-cart"を追加し、サイズを調整するためにstyle="height: 2rem; width: 2rem;"を指定します。
-
ヘッダーファイルの編集:
- 「セクション」フォルダ内のheader.liquidファイルを開きます。
- カートアイコンを表示している部分を検索し、{% render ‘icon-cart’ %}となっている箇所を{% render ‘icon-custom-cart’ %}に変更します。
-
変更の保存と確認:
- すべての変更を保存し、ストアのフロントエンドで新しいカートアイコンが正しく表示されているか確認します。
この手順により、Dawnテーマのカートアイコンを希望のデザインに変更できます。 詳細な手順や注意点については、以下の参考記事もご覧ください。
下記記事もわかりやすいのでご参考にしていただければと思います！
https://zenn.dev/kosuke_shopify/articles/dd3910aa60f427
ご参考にしていただければと思います！
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
1 Like
この度はご回答を頂きましてありがとうございます。
早速ためそうとしたところ、当方HTMLやコードを全くさわれない為に、SVGのコードまでは用意できたのですが、
SVGコードのどの部分に
- SVGタグにclass="icon icon-cart"を追加し、サイズを調整するためにstyle="height: 2rem; width: 2rem;"を指定します。
このコードをどの部分に追加するのかがわかりません。
<のようなものも追加すると聞いたことがあるのですが、あまり理解しておりません。
ご享受いただいたURLを見ても上手くいきませんでした。
そこを解決できれば他の部分は自力でできるかと思います。
もし可能であれば具体的に記入場所などあれば教えて頂ければと存じます。
念の為いれようとしている元のSVGコードはこちらです。
宜しくお願い申し上げます。