FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

556
遊覧客
16 0 3

テーマdawnでカゴに入れた時に表示される数字の●デザインを変更したいです。
どうすれば良いでしょうか?

最終的には参考画像のようにしたいと考えております。

 

お手数おかけしますが、どうかご教授お願いいたします。

 

スクリーンショット 2024-09-28 16.10.13.png

スクリーンショット 2024-09-28 16.10.43.png

  

1 件の受理された解決策
nakano_thesense
Shopify Partner
30 7 9

成功

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

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

 

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

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

 

nakano_thesense_0-1727772093619.png

 

 

実装手順

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

<div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>

// 変更後

<div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">[{{ cart.item_count }}]</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>

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

 

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

/* 追加css */

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

 

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

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo

元の投稿で解決策を見る

5件の返信5

nakano_thesense
Shopify Partner
30 7 9

こちら質問拝見させていただきました。

 

CART [1]と記載されている画像が添付されているかと思うのですが、こちらカートアイコンに重ねて[1]と表示したいという意図であっていますでしょうか?

デザイン変更する場合、コーディングが必要になりますが以下関連するコード箇所になりますので参考になれば幸いです。

 

header.liquid 273行目 - 275行目

<div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>

 

こちらのコードに記載されているcart-count-bubbleというクラスがご指摘いただいている箇所のデザインになりますので、こちらのクラスに対してcssをテーマ編集で編集する形になるかと思います。

 

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

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo
556
遊覧客
16 0 3

ご確認ありがとうございます。
認識の通りでございます。箇所を確認できました。
大変素人な質問であれば申し訳ございません。
cart-count-bubbleのデザインを変更するには新たにCSSを作成して該当する[]のデザインになるようコードを組んでいくということでしょうか?
どのCSSをどのように修正すれば良いかが理解できておらず、的外れな質問であれば申し訳ございません。

大変お手数おかけしますが、またお手隙の際にご確認をいただけますと幸いです。

nakano_thesense
Shopify Partner
30 7 9

成功

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

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

 

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

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

 

nakano_thesense_0-1727772093619.png

 

 

実装手順

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

<div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">{{ cart.item_count }}</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>

// 変更後

<div class="cart-count-bubble">
            {%- if cart.item_count < 100 -%}
              <span aria-hidden="true">[{{ cart.item_count }}]</span>
            {%- endif -%}
            <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
</div>

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

 

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

/* 追加css */

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

 

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

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo
556
遊覧客
16 0 3

ご丁寧な解説ありがとうございます!
無事に実装することができました。
非常にわかりやすくて大変助かりました。ベストソリューションを押させていただきましたので、またご不明点が出た際は是非よろしくお願いいたします。

nakano_thesense
Shopify Partner
30 7 9

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

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

株式会社thesenseはアパレルの輸入代行サービスやクーポン保有アプリなど様々なEC運営サービスの提供、自社ブランドの運営を行っている会社です。
わたしたちについて: https://biz.thesense.tokyo