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

日本語 ディスカッション 技術的なQ＆A
,
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