【クリエイターモード】ヘッダーなどにマウスオーバーでカートの中身を表示させることはできますか。

「全ページ共通：買い物かご」の変数タグを使用してHTMLを記述することで、カートの中身を表示させることができます。

作り方の一例をご紹介します。

＜テンプレート【Complete】に追加する場合＞

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

ソースの末尾付近の

<li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span></li>

の閉じの</li>を改行し

<li class="gnav-menu header-cart"><a href="<{$url.cart}>">カート</a>
<span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span>
★
</li>

★の位置に、カートの中身を表示するリストのHTMLを追記し保存してください。

＜追記例＞

<!-- カートの中身表示 -->
<{if $cart.has_item}>
	<div id="header-cart-list">
    <table>
        <{section name=i loop=$cart.list}>
            <tr>
                <td class="hd-cart-image">
                <!--商品画像-->
                    <a href="<{$cart.list[i].url}>">
                        <{if $cart.list[i].selected_option.image_S}>
                        <img src="<{$cart.list[i].selected_option.image_S}>" alt="<{$cart.list[i].name}>">
                        <{else}>
                        <img src="<{$cart.list[i].image_S}>" alt="<{$cart.list[i].name}>">
                        <{/if}>
                    </a>
               </td>
               <td class="hd-cart-info">
               <!--商品情報-->
                   <p><a href="<{$cart.list[i].url}>"><{$cart.list[i].name}></a></p>
                   <!--商品オプション-->
                   <{if $cart.list[i].selected_option.has_item}>
                   <div class="cart-list-option">
                       <{section name=j loop=$cart.list[i].selected_option.list}>
                       <p><{$cart.list[i].selected_option.list[j].option_name}></p>
                       <{/section}>
                   </div>
                   <{/if}>
                   <!--名入れ-->
                   <{if $cart.list[i].name_print.has_item}>
                   <div class="hd-cart-nameprint">
                       <{section name=j loop=$cart.list[i].name_print.list}>
                       <p class="nameprint-tilte">[<{$cart.list[i].name_print.list[j].name|escape|nl2br}>]</p>
                       <{/section}>
                   </div>
                   <{/if}>
                </td>
                <td class="hd-cart-quantity">
                   <{$cart.list[i].quantity}>点
                </td>
                <td class="hd-cart-subtotal">
                    ￥<{$cart.list[i].total_price|number_format}>
                </td>
            </tr>
        <{/section}>
            <tr class="cart-total">
                <!--商品合計金額-->
                <td colspan="4">
                    <span class="hd-cart-point"><{$cart.total_point|number_format}>ポイント / </span>
                    合計<span class="hd-cart-price">￥<{$cart.total_price|number_format}></span>
                    <!--まとめ買い割引額-->
                    <{if $cart.bulk.has_item}>
                        <{section name=i loop=$cart.bulk.list}>
                            <p class="hd-cart-bulk"><{$cart.bulk.list[i].name}> まとめ買い割引額：￥<{$cart.bulk.list[i].discount_price}></p>
                        <{/section}>
                    <{/if}>
                </td>
            </tr>
    </table>
	</div>
<{/if}>

ソースは一例です。個別のカスタマイズについてはサポートの対象外です。

• 名入れ、まとめ買い割引、ポイントなどが不要である場合は削除してください。
• 数量変更・削除ボタンの設置も可能です。複雑になるため上記では省略しています。

(2)マウスオーバー（hover）で表示/非表示にするためのCSSを
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」
に追記し保存してください。

記述する位置は管理しやすい場所か、特に決まらなければ末尾に追記（コピー＆ペースト）してください。

＜追記例＞

/* -----------------------------------------------------------------
   header-cart-list
   ヘッダーのカートボタンhoverでカートの中身を表示
----------------------------------------------------------------- */
#header-cart-list {
  display: inline;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 2.6rem;
  left: 0;
  z-index: 100;
  background-color: #fff;
  box-sizing: border-box;
  transition-property: top opacity;
  transition-duration: 0.2s;
  filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.17));
  width: 400px;
  margin-left: -360px;
  padding: 16px;
}
.gnav li:hover #header-cart-list{
  visibility: visible;
  opacity: .95;
}
#header-cart-list table {
   width:100%;
}
#header-cart-list td {
  padding:2px 6px;
  vertical-align: middle;
  border-bottom: dotted 1px #ccc;
}
#header-cart-list a::before {
  background: none;
  content: none;
  display: none;
  height: 0;
}
.hd-cart-image {
  width:70px;
}
.hd-cart-image img {
  height:70px;
  width:70px;
  object-fit:cover;
}
.hd-cart-info{
    padding: 0 10px;
    text-align: left;
}
.hd-cart-quantity,
.hd-cart-subtotal{
    white-space: nowrap;
    text-align:right;
}
.cart-total td{
    text-align: right;
}
.hd-cart-price {
    font-size: 20px;
}