テーマ【dawn】カゴアイコンの●デザインについて

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

Topic summary

Shopifyの「Dawn」テーマで、カートアイコンに表示される商品数の●デザインを変更する方法についての質問と解決。

質問内容:

  • カートに入れた時に表示される数字の●デザインを、参考画像のように「CART [1]」という形式に変更したい
  • 添付画像で具体的なデザインイメージを提示

解決方法:

  1. header.liquidの273-275行目を編集し、{{ cart.item_count }}を[{{ cart.item_count }}]のように角括弧で囲む
  2. component-cart-notification.cssの最下部に以下のCSSを追加:
.cart-count-bubble {
  background: white;
  color: black;
  font-weight: bold;
}

結果:

  • cart-count-bubbleクラスのデザインをCSSで変更することで実装可能
  • 質問者は無事に実装完了し、ベストソリューションとして承認
  • Dawnの最新版での実装例が提供され、バージョンによって適宜調整が必要
Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
6

こちらこそベストソリューションありがとうございます！

また何か問題ありましたらぜひご連絡ください！