カート・バリエーション表組パーツのデザインをカスタマイズする
カート・バリエーション表組パーツのデザイン変更
ラジオボタンを表示する
カート・バリエーション表組パーツは、バリエーションを選択すると色が反転するデザインとなりますが、非表示に指定されたラジオボタンが設置されています。
CSSを適用することで、非表示になっているラジオボタンを表示し、以下のようなデザインに変更できます。
以下いずれかの方法でECサイトに適用していただけます。
- コマースクリエイター>テーマ>オリジナルCSSに貼り付けます。
- CSSファイルとして保存していただき、コマースクリエイター>アイテム一覧にアップロード。CSSファイルのLINKタグを記述したフリーパーツを作成し、商品詳細レイアウトに配置します。
下記に表示変更用CSSのサンプル(上書き用CSS)を掲載しています。
ラジオボタンを表示します。
.fs-c-variationMatrix__radio { display: block; flex-shrink: 0; }
デザインを調整します。
/* バリエーション選択肢名 */ .fs-c-variationMatrix__row__variationName, .fs-c-variationMatrix__col__variationName { background: #eee; margin: 0; padding: 2px 4px; } /* バリエーション選択部 */ .fs-c-variationMatrix__item { padding: 4px; align-items:flex-start; } .fs-c-variationMatrix__panel { border: none; background: none; margin: 0; padding: 0; } /* バリエーション選択部(選択時) */ .fs-c-variationMatrix__radio:checked + .fs-c-variationMatrix__panel { background: none; color: inherit; } /* 罫線 */ .fs-c-variationMatrix__row__variationName, .fs-c-variationMatrix__col__variationName, .fs-c-variationMatrix__item { border-style: solid; border-color: #ddd; border-width: 1px 0 0 1px; } .fs-c-variationMatrix__row:last-child .fs-c-variationMatrix__row__variationName, .fs-c-variationMatrix__row:last-child .fs-c-variationMatrix__item, .fs-c-variationMatrix__col__variationPanels .fs-c-variationMatrix__item:last-child { border-bottom-width: 1px; } .fs-c-variationMatrix__row__variationPanels .fs-c-variationMatrix__item:last-child, .fs-c-variationMatrix__col:last-child .fs-c-variationMatrix__col__variationName, .fs-c-variationMatrix__col:last-child .fs-c-variationMatrix__item { border-right-width: 1px; }