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

商品ページに表示されるメッセージの見た目をカスタムCSSで装飾する方法を説明します。

商品メッセージのデザインは、カスタムCSSで変更できます。Shopifyテーマの「カスタムCSS」に下記のサンプルコードを追加してください。

装飾方法

Plaintext

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

Plaintext

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

Plaintext

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

Plaintext

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

Plaintext

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