テーマ【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.
4

ご確認ありがとうございます！

とんでもございません、おっしゃる通りでcart-count-bubbleという箇所のデザインを変更していく形になります。

こちらで以下の画像のように実装をしてみましたので、記載している実装手順踏んでいただけますと同様に実装できるかと思われます。

(Dawnの最新版で実装していますのでお使いのバージョンによって適宜変更が必要になります)

nakano_thesense_0-1727772093619.png
nakano_thesense_0-1727772093619.png784×266 4.64 KB

実装手順

  1. header.liquid 273行目 - 275行目を変更する

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}

// 変更後

            {%- if cart.item_count < 100 -%}
              [{{ cart.item_count }}]
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}

{{ cart.item_count }}と記載されている箇所をで囲んでいます

  1. 以下のcssをcomponent-cart-notification.cssの最下部に追加する
/* 追加css */

.cart-count-bubble {
  background: white;
  color: black;
  font-weight: bold;
}

ご参考になれば幸いです。

1 Like