キャンセル
検索
導入前のご相談 06-6485-5330
運用サポート:06-6485-6485 平日9:30~18:00(土日祝除く)
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

カート・バリエーション表組パーツのデザイン変更

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

カート・バリエーション表組パーツのデザイン変更

ラジオボタンを表示する

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

カート・バリエーション表組パーツ(スタートアップテーマ)

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

カート・バリエーション表組パーツ(ラジオボタンを表示)

以下いずれかの方法で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;
}

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。