商品メッセージのデザインを装飾する

商品ページに表示される商品メッセージのデザインは、CSSで変更できます。アプリはメッセージの外枠に「ruffruff-pre-order-product-message」というクラスを付けているので、このクラスを目印にCSSを追加します。

• 対象は商品ページの商品メッセージです。カートページに表示される内容や、カートメッセージのデザインは変わりません

• アプリ側のスタイルはすべて !important 付きで指定されています。上書きするCSSにも !important を付けてください

• 同じクラスは再入荷通知の商品メッセージにも付きます。追加したCSSは予約販売と再入荷通知の両方に適用されます

• 商品一覧やおすすめ商品など、商品ページのメイン商品以外の場所では商品メッセージ自体が表示されないため、CSSの影響もありません

次のいずれかの場所に、後述のサンプルコードを貼り付けます。ストア全体に適用する場合はテーマ設定の「カスタムCSS」が確実です。

• Shopifyテーマエディタの「テーマ設定」→「カスタムCSS」

• テーマのCSSファイル（Dawnの場合は assets/base.css など）

.ruffruff-pre-order-product-message {
  background-color: red !important;
  padding: 10px !important;
}

.ruffruff-pre-order-product-message {
  max-width: 440px !important;
}

.ruffruff-pre-order-product-message {
  border: 1px solid red !important;
  padding: 10px !important;
}

.ruffruff-pre-order-product-message {
  margin-top: 50px !important;
  margin-bottom: 50px !important;
}

文字寄せと文字サイズは、外枠ではなくその内側の要素に指定します。メッセージにリンクや太字などのタグを含めた場合、内側の要素が p ではなく div になるため、両方を指定します。

.ruffruff-pre-order-product-message > p,
.ruffruff-pre-order-product-message > div {
  text-align: center !important;
}

.ruffruff-pre-order-product-message > p,
.ruffruff-pre-order-product-message > div {
  font-size: 18px !important;
}

CSSを追加しても見た目が変わらない場合は、次の順に確認してください。

• !important を付けているか。アプリ側のスタイルが !important で指定されているため、付けないと打ち消されます

• 文字寄せや文字サイズを外枠に指定していないか。これらは内側の要素（p または div）に指定します

• それでも変わらない場合は、セレクタの先頭に要素名を付けて優先度を上げます

div.ruffruff-pre-order-product-message {
  background-color: red !important;
}

• 商品メッセージ

• 購入オプションのデザインを装飾する

• 商品カードバッジ