カートアイコンにカートに入っている商品数を表示する

BASEのアップデートにて、カートアイコンにカートに入っている商品数を表示することができるようになりました!

既存のデザイナーズテーマの場合、自動反映されませんが、CSSを追加することで表示できます。

追加するCSSコード

.cart {
  position: relative;
}
.cart-badge {
  display: block!important;
}
.cart-qty {
  position: absolute;
  top: 4px; /* 縦方向の位置を調整 */
  right: 5px; /* 横方向の位置を調整 */
  padding: 0 1px;
  min-width: 14px;
  background: #fa5171; /* 色を変更 */
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

デザイン設定項目にCSSを追加できる機能がある場合、その欄に上記のコードをコピーペーストすることで、表示されるようになります。

数字バッヂの位置がずれている場合、「top」「right」の数値変更することで調整できます。

デザイン設定項目にCSSを追加できる機能がない場合、HTML編集Appにて自分でコード内にCSSを追加することができます。テーマデザイナーさんの方でアップデート対応される場合もあります。

  • カートに商品が入っていない場合、カートバッジは表示されません
  • デザインを適用後に、実際に商品をカートに入れて、カートバッジの表示を確認してください