【クリエイターモード】テンプレートMinimumで、ヘッダーのカートのアイコンにカートの中身の点数の数字を表示させたいです。方法を教えてください。 – makeshop よくある質問

テンプレート【Minimum】では、買い物カゴに商品を追加すると、ヘッダーのカートのアイコンには赤い丸のアイコンが表示されるようにデザインされています。
このアイコンに、買い物カゴに入れた商品の点数の数字を表示させることが可能です。

以下の手順でHTMLとCSSを編集してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理「ヘッダー」
モジュールID：$module.header

ソース入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

cart-badge

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して、以下の記述を見つけてください。

<span class="cart-badge"></span>

カートの中身の点数（数字）を表示する変数タグを使用してソースを追記し、保存してください。

＜追記後＞

<span class="cart-badge"><{$cart.total_quantity}></span>

次に、数字が見えるようにCSSを変更してください。

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
CSS入力欄内に一度カーソルを置いた状態でキーボードのCtrlとFキーを同時に押し、表示される検索窓に

cart-badge

入力（コピー＆ペースト）し、キーボードのEnterキーを押して、カートの赤い点を指定しているCSSの記述を見つけてください。
2か所記述されています。

１か所目（PCでの表示）：

.cart-badge {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 15px;
  height: 15px;
  background: #b4123d;
  border-radius: 50%;
  border: 2px solid #f0f0f0; }

２か所目（スマホでの表示）：

  .cart-badge {
    border-color: #DDDBDB;
    right: 24px;
    bottom: 24px;
    width: 13px;
    height: 13px; }

上記の記述をそれぞれ下記のように変更（コピー＆ペースト）し保存してください。

１か所目（PCでの表示）：

.cart-badge { 
  position: absolute; 
  right: 10px; 
  bottom: 20px; 
  width: 20px; 
  height: 20px; 
  background: #b4123d; 
  border-radius: 50%; 
  font-size: 14px; 
  color: #fff; 
  text-indent: 0; 
  line-height: 20px; 
  font-family: Arial;
}

２か所目（スマホでの表示）：

  .cart-badge {
    right: 18px;
    bottom: 20px;
  }

関連記事