予約販売バッジ
予約販売バッジとは
コレクションページや検索結果ページの商品一覧に予約商品が存在する場合にバッジを表示できる機能です。
仕様
アクセス時点で予約販売中（予約販売ルールの条件に合致している）の商品のみバッジを表示することができます。
予約販売ルールは設定しているが予約販売中ではない商品には表示されません。
コレクションや検索結果ページなどの商品一覧のみバッジ表示が可能です。
商品ページのメイン画像や商品名には対応していません。ただし、商品ページ内の商品一覧にはバッジを表示できます。
バッジの表示条件とは
バッジを表示させるための条件です。表示条件は下記の３つから選ぶことができます。
1. 表示しない
商品にバッジを表示しません。
2. 1つでも予約商品の場合に表示
商品のバリエーションに1つでも予約商品がある場合にバッジを表示します。
3. すべてが予約商品の場合に表示
商品のバリエーションが全て予約商品の場合にバッジを表示します。
デフォルト設定（装飾なし）
予約販売バッジのデフォルト設定は、商品名の末尾に予約販売バッジに設定した文言が表示されます。
予約販売バッジを表示する
アプリの左メニューにある「設定」をクリック
設定ページ内の予約販売バッジセクションにて、表示したい「バッジのテキスト」と「バッジの表示条件」を設定
画面右上の保存をクリック
予約販売バッジを装飾する
装飾方法
予約販売バッジは、カスタムCSSに下記で紹介するサンプルコードを挿入することで、装飾することができます。
ラベル形式に装飾する
● 検証テーマ
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;
}
その他デザイン
サンプルコードを利用しても装飾されない場合、お問い合わせください。