予約販売バッジ
予約販売バッジとは
コレクションページや検索結果ページの商品一覧に予約商品が存在する場合にバッジを表示できる機能です。
デモを見る
バッジの表示条件とは
バッジを表示させるための条件です。表示条件は下記の３つから選ぶことができます。
1. 表示しない
商品にバッジを表示しません。
2. 1つでも予約商品の場合に表示
商品のバリエーションに1つでも予約商品がある場合にバッジを表示します。
3. すべてが予約商品の場合に表示
商品のバリエーションが全て予約商品の場合にバッジを表示します。
バッジの仕様
予約商品とはアクセス時点で予約販売中（予約販売ルールの条件に合致している）の商品を指し、予約販売ルールが設定されいているが予約販売中ではない商品は通常商品となります。
そのため、予約販売ルールが設定しているが予約販売中ではない商品に関してはバッジ表示の対象となりません。
予約販売バッジを表示する
アプリの左メニューにある「設定」をクリック
設定ページ内の予約販売バッジセクションにて、表示したい「バッジのテキスト」と「バッジの表示条件」を設定
画面右上の保存をクリック
デザイン装飾の事例
● 利用テーマ
Dawn 12.0.0
● サンプルコード
.ruffruff-pre-order-product > .ruffruff-pre-order-badge {
display: inline-flex;
width: auto;
height: auto;
position: absolute;
top: 14px;
right: 14px;
padding: 2px 8px;
background: #38b6ff;
color: white;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
}
:is(cart-drawer, cart-items, quick-add-modal)
.ruffruff-pre-order-product
> .ruffruff-pre-order-badge {
display: none;
width: 0;
height: 0;
}
● 利用テーマ
Dawn 10.0.0
● サンプルコード
.ruffruff-pre-order-product > .ruffruff-pre-order-badge:nth-of-type(1) {
display: inline-flex;
width: auto;
height: 20px;
position: absolute;
top: 13px;
right: -20px;
padding: 4px 20px 2px;
background: #38b6ff;
color: white;
font-size: 12px;
font-weight: 600;
-webkit-transform: rotate(45deg);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
clip-path: polygon(0% 100%, 22% 0%, 77% 0%, 100% 100%);
}
● 利用テーマ
Dawn 10.0.0
● サンプルコード
.ruffruff-pre-order-badge-wrapper > .ruffruff-pre-order-badge:nth-of-type(1) {
display: inline-flex;
width: auto;
height: auto;
background: #38b6ff;
padding: 2px 8px;
color: white;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
}
.ruffruff-pre-order-badge-wrapper > .ruffruff-pre-order-badge:nth-of-type(2) {
display: none;
width: 0;
height: 0;
}
バッジのデザインを装飾でお困りの場合
バッジのデザインはカスタムCSSを利用することで、好きなデザインへ装飾することができます。
装飾でお困りの場合は、アプリ内からお問い合わせください。