カートの中身ボタンを追加する [HTML5テンプレート用]
カートの中身ボタンを自由記入欄やhtmlタグ利用可能エリアに設置できます。
STEP1 htmlタグをコピーする
5パターンhtmlタグがあります。
表示サンプル: https://cafe0101.ocnk.net/page/1
マウスオーバー時のポップアップなし
<div class="shopping_cart_button" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
マウスオーバー時に右寄せのポップアップ
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
マウスオーバー時に、左寄せのポップアップ
<div class="reverse_cartcontent">
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>
マウスオーバー時に、中央寄せのポップアップ
<div class="center_cartcontent">
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>
<div class="shopping_cart_button has_cart_popup" data-empty-text="">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
</div>
カートの中身が空の場合に表示される、マウスオーバー時ポップアップ内の表示文字変更
<div class="shopping_cart_button has_cart_popup" data-empty-text="現在、買い物かごには商品が入っていません。ぜひお買い物をお楽しみください。 ">
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
<div class="cartbtn">
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>
</div>
</div>
STEP2 htmlタグを貼り付ける
コピーしたhtmlタグを、[デザイン管理]→[配置/画像/コメント設定]画面から [自由記入欄]や[htmlタグ利用可能エリア]に貼り付けてください。
・URLについて
貼り付け後、aタグ内のURLをご自身のサイトURLに変更してください。
<a href="https://demo.ocnk.net/cart">
例)https://cafe0101.ocnk.net/の場合
<a href="https://demo.ocnk.net/cart">
↓
<a href="https://cafe0101.ocnk.net/cart">
例)https://www.ocnk.net/の場合
<a href="https://demo.ocnk.net/cart">
↓
<a href="https://www.ocnk.net/cart">
※共用ドメイン、独自ドメインどちらでも利用可能です。
・文言について
ボタンに表示される「カートの中身」はご自身で変更可能です。
<a href="https://demo.ocnk.net/cart"><span class="cartquantity"></span>カートの中身</a>