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

購入オプションのデザインは、カスタムCSSまたはカスタムLiquidで変更できます。

補足： 各サンプルコードはDawnテーマで検証済みです。テーマによっては表示が異なる場合があります。

装飾方法

設定場所： カスタムCSS

Plaintext

.ruffruff-pre-order-selling-plan-group > div {
 color: red !important;
}

設定場所： カスタマイズされたLiquid（theme.liquid内）

Plaintext

<style>
  .ruffruff-pre-order-selling-plan-group > div > [class^="_price"] {
    color: red !important;
  }
</style>

設定場所： カスタマイズされたLiquid（theme.liquid内）

Plaintext

<style>
  .ruffruff-pre-order-selling-plan-group > [class^="_root"] {
    background-color: red !important;
  }
</style>

設定場所： カスタムCSS

Plaintext

.ruffruff-pre-order-selling-plan-group {
  border: none !important;
}

設定場所： カスタムCSS

Plaintext

.ruffruff-pre-order-selling-plan-group {
  border-color: red !important;
}

設定場所： カスタムCSS

Plaintext

.ruffruff-pre-order-selling-plan-group {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

設定場所： カスタムCSS

Plaintext

.ruffruff-pre-order-selling-plan-group {
  height: 0 !important;
  visibility: hidden !important;
}

割引販売中の場合、割引後の価格表示も非表示になります。