注意: 予約販売バッジは非推奨です。2026年9月30日をもって提供を終了します。それまでに「商品カードバッジ」へ移行してください。商品カードバッジのデザインはCSSではなくアプリ管理画面で設定します。
予約販売バッジのデザインは、CSSで変更できます。アプリはバッジと、バッジを差し込んだ商品リンク・商品名の要素にクラスを付けているので、このクラスを目印にCSSを追加します。
バッジの表示設定については「予約販売バッジ」をご覧ください。
コレクションページや検索結果ページなど、商品一覧の商品カードに表示されるバッジが対象です
アプリは3つのクラスを付けます。バッジ本体が ruffruff-pre-order-badge、バッジを差し込んだ商品名の要素が ruffruff-pre-order-badge-wrapper、商品リンクの要素が ruffruff-pre-order-product です
バッジは商品名の前後に1つずつ、商品リンクの末尾に1つ、合計3つ差し込まれます。既定では商品名の後ろの1つだけが表示され、残り2つは非表示です。装飾ではこの表示・非表示を入れ替えます
アプリ側のスタイルには !important が付いていないため、上書きするCSSに !important は不要です
テーマによって商品カードの構造が異なるため、同じCSSでも見え方が変わります。サンプルコードはDawnで検証したものです
装飾をしていない状態では、商品名の末尾に、予約販売バッジに設定した文言がそのまま表示されます。
Shopifyテーマエディタの「テーマ設定」→「カスタムCSS」に、後述のサンプルコードを貼り付けます。
商品画像の右上に、角丸のラベルとして重ねて表示します。
検証テーマ： Dawn 12.0.0
商品画像の右上に、斜めのリボンとして重ねて表示します。
検証テーマ： Dawn 10.0.0
商品名の後ろではなく、商品名の前にラベルとして表示します。
検証テーマ： Dawn 10.0.0
リボン形式のCSSは、次のジェネレーターでさまざまな形を生成できます。リボン形式のCSSジェネレーター