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

購入オプション（Selling Plan）ウィジェットのデザインは、CSSで変更できます。アプリはウィジェットの外枠に「ruffruff-pre-order-selling-plan-group」というクラスを付けているので、このクラスを目印にCSSを追加します。

• 対象は商品ページに表示される購入オプションのウィジェットです

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

• 外枠の内側にある要素のクラス名は、アプリの更新時に変わる可能性があります。サンプルコードが [class^="_root"] のような前方一致で書かれているのはこのためです。この書き方を崩さないでください

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

• 枠線は太さ1pxで固定です。色の変更と非表示はできますが、太さは変更できません

サンプルコードごとに、貼り付ける場所を「設定場所」として記載しています。

• カスタムCSS… Shopifyテーマエディタの「テーマ設定」→「カスタムCSS」に、CSSをそのまま貼り付けます

• カスタマイズされたLiquid（theme.liquid内）… テーマの theme.liquid に、<style> タグごと貼り付けます

設定場所： カスタムCSS

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

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

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

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

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

設定場所： カスタムCSS

.ruffruff-pre-order-selling-plan-group > [class^="_root"] {
  border: none !important;
}

設定場所： カスタムCSS

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

設定場所： カスタムCSS

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

設定場所： カスタムCSS

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

• 購入オプション

• 購入オプションが機能しない

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