カート・バリエーション表組パーツのデザインをカスタマイズする

＜目次＞

ラジオボタンを表示する

ラジオボタンを表示する

カート・バリエーション表組パーツは、バリエーションを選択すると色が反転するデザインとなりますが、非表示に指定されたラジオボタンが設置されています。

CSSを適用することで、非表示になっているラジオボタンを表示し、以下のようなデザインに変更できます。

設定方法

表示変更用CSSの（上書き用CSS）を、＜方法1＞＜方法2＞のいずれかでECサイトに適用します。

＜方法1＞

コマースクリエイター＞テーマ＞オリジナルCSSに貼り付けます。

＜方法2＞

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;
}