カートボタンのデザイン変更は出来ますか？

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

AI-generated summary

DAWNテーマのヘッダーのカートアイコンを白いバッグから一般的な黒いショッピングカートへ変更したいという相談。

  • 回答：ShopifyのDAWNではicon-cart.liquidとicon-cart-empty.liquid（空カート）でアイコンを制御。希望のSVGアイコンにファイル内のコードを置き換えれば変更可能。
  • 手順：紹介された素材サイトからSVGをダウンロードし、該当ファイルにドラッグ＆ドロップするとSVGコードが自動挿入。参考スクリーンショットとリンクが提示。
  • 用語補足：LiquidはShopifyのテンプレートファイル形式、SVGは拡大縮小に強いベクター画像形式のアイコン。
  • 結果：質問者は案内通りに実施して無事に変更完了。議論は解決済みで追加アクションや未解決点はなし。
1

ヘッダーのカートボタンですが、

このデザインを変更することは出来ますか？

今使用しているDAWNテーマのボタンが、白いバッグのようなデザインで少しわかりづらいので、よくある黒いショッピングカートのようなボタンに出来ればと思っています。

コードなどもあまり詳しくありませんが、どなたかご教授いただければ幸いです。

2

Curry313さま

フルバランス株式会社の園畑です。

カートデザインの変更って出来るのかよくわからなくて難しそうに感じますよね。

DAWNの場合、icon-cart.liquidとicon-cart-empty.liquid(カートが空の時)の2ファイルでカートのデザインを設定しているため、ファイル内のコードを変更したいカートデザインのものに変更すれば対応が可能です。

スクリーンショット 0004-06-28 9.26.36.png
スクリーンショット 0004-06-28 9.26.36.png3024×1392 464 KB

具体的には、以下のようなサイトからSVGファイルをダウンロードし、
icon-cart.liquidとicon-cart-empty.liquidにドラッグ&ドロップしていただけましたら、svgのコードが自動的に表示されますので一度お試しくださいませ。

https://icooon-mono.com/00120-%E3%82%AB%E3%83%BC%E3%83%88%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E7%B4%A0%E6%9D%90/

また、お困りのことがあれば是非ご質問くださいね。

3

フルバランス株式会社

園畑様

お世話になります。

ご丁寧な解説ありがとうございます。

ご案内の通りで無事に変更が出来ました。

いつも本当にありがとうございます。