予約販売バッジ

コレクションページや検索結果ページの商品一覧に予約商品が存在する場合にバッジを表示できる機能です。

仕様

• アクセス時点で予約販売中（予約販売ルールの条件に合致している）の商品のみバッジを表示することができます。

• 予約販売ルールは設定しているが予約販売中ではない商品には表示されません。

• コレクションや検索結果ページなどの商品一覧のみバッジ表示が可能です。

• 商品ページのメイン画像や商品名には対応していません。ただし、商品ページ内の商品一覧にはバッジを表示できます。

予約販売バッジのデフォルト設定は、商品名の末尾に予約販売バッジに設定した文言が表示されます。

1. アプリの左メニューにある「設定」をクリック

2. 設定ページ内の予約販売バッジセクションにて、表示したい「バッジのテキスト」と「バッジの表示条件」を設定

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;

}