カスタムセレクトグループ登録・編集 – オンラインマニュアル

設定画面：商品管理 / 機能・設定 / カスタムセレクトグループ登録・編集

「カスタムセレクト」は、商品のサイズやカラー（バリエーション）とは別に、ラッピングの選択や延長保証、長さ指定などの「選択肢」を商品に設定できる機能です。
バリエーションとの併用、お客様の回答によって次の質問を出し分ける「条件分岐」、追加金額の設定（プラス・マイナス）が可能です。

・本機能は「クリエイターモード」専用です。旧デザインモード（ベーシックモード）をご利用の場合は、クリエイターモードへの切り替えが必要です。
・カスタムセレクト登録・編集の注意事項もご確認ください。

カスタムセレクトグループについて

あらかじめ「カスタムセレクト（パーツ）」を作成すると、「カスタムセレクトグループ」の作成が可能です。
マニュアル：カスタムセレクト設定の流れを参考に作成してください。

「カスタムセレクト」の表示には、ショップデザイン / テンプレート選択・編集 / クリエイターモード　へ CSS、JavaScript、変数タグの追記が必要です。
ソース例は「カスタムセレクト」表示用のデザインについてをご参照ください。

【その他関連マニュアル】

仕様・制限事項

カスタムセレクトグループの設定

商品管理 / 機能・設定 / カスタムセレクト　で作成した「カスタムセレクト（パーツ）」を組み合わせて、1つの「グループ」としてまとめます。
設定画面： 商品管理 / 機能・設定 / カスタムセレクトグループ

1.カスタムセレクトグループの新規登録

設定画面：商品管理 / 機能・設定 / カスタムセレクトグループ登録・編集

画面右上「カスタムセレクトグループを登録」ボタンをクリックします。

2.カスタムセレクトグループ項目の設定

以下の項目を設定します。

【基本設定】

グループの管理用の情報を設定します。

グループ名：管理用の名称を入力します。（例：ギフト対応、裾直し、お好みスイーツセットなど）
グループ説明文：管理用の説明を入力します。

【項目設定】

使用する「カスタムセレクト（パーツ）」にチェックを入れて「この内容で決定」をクリックし、グループに追加します。
1つのグループに最大20個（パーツ）まで項目を追加できます。

3.カスタムセレクトグループ項目の詳細設定

「項目設定」で選択後の項目に対し、並べ替え、削除、条件分岐の設定ができます。

並べ替え：項目左にある6点リーダーをドラッグして並べ替え可能です。
削除：項目右にあるごみ箱アイコンをクリックして指定が可能です。
条件分岐：項目下にある「条件を追加する」ボタンで設定が可能です。条件分岐の設定をご参考ください。

4.保存

画面下部「登録」ボタンで保存します。
モーダル画面に「カスタムセレクトグループを登録してもよろしいですか？」と表示され、「登録」ボタンをクリックで保存されます。

保存が完了すると、「カスタムセレクトグループの登録が完了しました　続けてカスタムセレクトグループを登録しますか？」と表示され、「一覧に戻る」「続けて新規登録」から選択できます。

条件分岐の設定

条件分岐は、「ある質問に特定の回答をした場合のみ、次の質問を表示する」といった設定が可能です。

【例：選べるスイーツセットの場合】
質問1：「1品目のスイーツを選んでください」
質問2：「2品目のスイーツを選んでください」
質問3（条件分岐）：
「質問2」で「要冷蔵スイーツ」を選んだ場合のみ ⇒「保冷バッグは必要ですか？」を表示

【設定方法】

1.条件に応じて表示させたい項目の「条件を追加する」ボタンをクリックします。（1項目目には表示されません）

2.プルダウンが表示されます。

3.条件のキーになる質問をプルダウンから選択します。
選択後、右に表示されるプルダウンで「条件分岐の対象となる回答」を選択（複数の場合は続けてクリック）します。

4.「更新」をクリックします。
モーダル画面に「カスタムセレクトグループ編集　カスタムセレクトグループ情報を更新してもよろしいですか?」と表示され、「更新」ボタンをクリックで保存されます。
保存が完了すると、「変更内容を保存しました。」と上部に表示されます。

設定済みの条件分岐は、条件の右横にあるごみ箱アイコンで削除し、「更新」→「更新」で削除できます。

ご注意点

・「1つ目の質問または2つ目の質問に●●を含む場合・・・」のような、複数項目をまたぐ複雑な条件分岐は設定できません。

商品への紐づけ方法

作成した「カスタムセレクトグループ」を商品に紐づけます。

【商品編集画面の場合】

設定画面： 商品管理 / 商品一覧 / 商品登録・編集

「バリエーション」のコンテンツ内にある「カスタムセレクトグループ」プルダウンから作成済みのグループを選択します。
※カスタムセレクトとオプショングループは同時に使用できません。
画面下部「更新」をクリックします。
モーダル画面に「商品編集　商品情報を変更してもよろしいですか？更新すると内容はショップに反映されます。」と表示され、「更新」ボタンをクリックで保存されます。
保存が完了すると、「商品を保存しました。」と上部に表示されます。

【CSVの場合】

対象画面：商品管理 / 商品一覧 / 商品情報一括アップロード・ダウンロード

「CSVダウンロードフォーマット管理」で「カスタムセレクトグループ」の項目を追加したフォーマットを作成します。
対象画面：商品管理 / 商品一覧 / 商品情報一括アップロード・ダウンロード / CSVダウンロードフォーマット管理
カスタムセレクトグループの「グループID」を指定したCSVをアップロードしてください。
「グループID」は、商品管理 / 機能・設定 / カスタムセレクトグループ登録・編集　にて確認できます。
※カスタムセレクトとオプショングループは同時に使用できません。あらかじめオプショングループの紐づけを解除してからカスタムセレクトグループの「グループID」を指定してください。

カスタムセレクトグループの編集

設定画面：商品管理 / 機能・設定 / カスタムセレクトグループ　一覧を表示・検索できます。
「グループ名」をクリックし、カスタムセレクトグループ編集画面に入って編集します。

【カスタムセレクトグループ検索】

登録済みのカスタムセレクトグループを検索します。検索条件は下記のとおりです。

キーワード： グループ名・説明文・グループIDを入力します。（部分一致）
使用状況：すべて・使用中・未使用から選択します。商品に紐づいているグループは「使用中」となります。

【カスタムセレクトグループ一覧】

登録済みのカスタムセレクトグループが表示されます。
右上のプルダウンにて、1ページに25件・50件・100件の表示が可能です。
表示項目は下記のとおりです。

グループ名
説明文：グループ説明文
タイプ：選択式または数値入力
含まれるカスタムセレクト数
作成日
更新日
使用状況：使用中または未使用。商品に紐づいているグループは「使用中」となります。

【カスタムセレクトグループ編集】

カスタムセレクトグループの一覧で「グループ名」をクリックすると編集画面が表示されます。
表示項目は下記のとおりです。詳細は「2.カスタムセレクト各項目の入力」にてご確認ください。

作成日
更新日
グループ名
グループ説明文
グループID：自動で割り振られるIDです。「CG000005」のように、「CG」から始まる6桁の数値で構成されます。「商品情報一括アップロード・ダウンロード」CSVで利用します。
項目設定：3.カスタムセレクトグループ項目の詳細設定の内容が表示されます。

【カスタムセレクトグループ編集画面右下「その他の操作」】

コピーして新規登録：「カスタムセレクトグループ」をコピーすることができます。
クリックするとモーダル画面に「カスタムセレクトグループ複製　このカスタムセレクトグループを複製してもよろしいですか?複製されたカスタムセレクトグループは「コピー●●●（カスタムセレクトグループ名）」という名前で作成されます。」と表示され、「コピーして新規登録」ボタンをクリックで保存されます。（キャンセルも可能です）
コピー後は、コピーされたカスタムセレクトグループ編集画面に遷移します。
「グループ名」は適宜編集して利用します。
削除：「カスタムセレクトグループ」を削除することができます。対象のカスタムセレクトグループが商品に紐づいていても削除可能です。
クリックするとモーダル画面に「カスタムセレクトグループの削除　このカスタムセレクトグループを削除してもよろしいですか?削除すると元に戻せません。」と表示され、「削除」ボタンをクリックで削除されます。（キャンセルも可能です）
削除後はカスタムセレクトグループ一覧に戻り、上部に「削除を完了しました。」と表示されます。

「カスタムセレクト」表示用のデザインについて

「カスタムセレクト」（カスタムセレクトグループ）を表示する場合、下記のソース例をご参考の上、ソースを追記してください。
※【Complete / Pulsefit】の初期値デザインには、2026/3/30以降、商品詳細・買い物かごページに「カスタムセレクト」を表示するソースが含まれています。

対象画面

・商品詳細：
標準で設置されている「バリエーション・オプショングループ」用のタグでカスタムセレクトを表示できます。
CSSとJavaScriptの追記をすることで、プルダウン以外のボタンのレイアウトを整えたり、条件分岐を利用することが可能です。

・買い物カゴ：
HTMLにタグの追記をすることで選択されたカスタムセレクトを表示できます。

クリエイターモード【Complete】サンプルソース

表示例は カスタムセレクト表示形式と表示例 をご参照ください。

▼商品詳細：ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

商品詳細CSS（Complete）

※最後尾に追記

/*custom select*/
/* ============================================================
  基本レイアウト・境界余白設定
============================================================ */
.makeshop-custom-select-wrap {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}
.makeshop-custom-select-wrap[data-condition-met="1"] {
  display: block !important;
}
.makeshop-custom-select-wrap.makeshop-custom-select-image-button {
  display: none;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}
.makeshop-custom-select-wrap:not(.makeshop-custom-select-image-button)[data-condition-met="1"] {
  display: block !important;
}
.makeshop-custom-select-wrap:not(.makeshop-custom-select-image-button)[data-condition-met="0"] {
  display: none !important;
}
.ms-cs-modal-body .makeshop-custom-select-wrap {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
.makeshop-custom-select-wrap.makeshop-custom-select-image-button .makeshop-option-label {
  display: none !important;
}
.makeshop-option-wrap + .ms-cs-trigger-bar,
.makeshop-option-wrap + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) {
  margin-top: 40px !important;
}
.ms-cs-trigger-bar + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button),
.makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button),
.makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) + .ms-cs-trigger-bar {
  margin-top: 20px !important;
}
.item-quantity {
  margin-top: 40px !important;
  display: flex;
  align-items: center;
}
/* ============================================================
  カード形式（画像付き）
============================================================ */
.ms-cs-trigger-bar + .makeshop-custom-select-wrap .makeshop-option-label {
  display: none !important;
}
.makeshop-custom-select-wrap:empty {
  display: none !important;
}
.ms-cs-trigger-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important; 
  border: 1px solid #e0e0e0 !important; 
  border-radius: 4px;
  background: #ffffff !important; 
  cursor: pointer;
}
.ms-cs-trigger-bar:hover {
  background: #f5f5f5 !important;
}
.ms-cs-current-value {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  margin-left: auto;
  margin-right: 10px;
  color: #000000;
  font-weight: bold;
}
.ms-cs-selected-image-wrap {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background: #f9f9f9;
  border: 1px solid #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-cs-selected-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ms-cs-required {
  color: #e02020 !important;
  font-size: 11px !important;
  margin-left: 4px;
}
/* ============================================================
  モーダル・背景固定設定
============================================================ */
body.ms-modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
  position: fixed !important;
}
.ms-cs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 200000;
  display: none;
  transition: opacity 0.1s ease-out;
}
.ms-cs-modal-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 600px !important;
  max-height: 80vh !important;
  background: #ffffff;
  z-index: 200001;
  border-radius: 12px;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: opacity 0.1s ease-out;
}
.ms-cs-modal-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ms-cs-modal-body {
  padding: 12px;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.ms-cs-modal-body .makeshop-custom-select-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  margin-bottom: 8px;
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
}
.ms-cs-modal-body .makeshop-custom-select-button:hover {
  background: #f5f5f5 !important;
  border-color: #000 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ms-cs-modal-body .makeshop-custom-select-button.selected {
  border-color: #11D3AD !important;
  background: #f5f5f5 !important;
}
.ms-cs-modal-body .makeshop-custom-select-image {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain;
  flex-shrink: 0;
}
.ms-cs-modal-close {
  font-size: 24px !important;
  cursor: pointer;
}
.ms-cs-modal-body .makeshop-option-label {
  display: none !important;
}
/* ============================================================
  ラジオボタン形式
============================================================ */
.makeshop-custom-select-radio-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
}
.makeshop-custom-select-radio-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 1 auto;
}
.makeshop-custom-select-radio {
  display: none !important;
}
.makeshop-custom-select-radio-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px; 
  background: #fff;
  transition: all 0.2s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}
.makeshop-custom-select-radio-text::after {
  content: "";
  position: absolute;
  left: 5px; 
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  background: #ea8f8f;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.makeshop-custom-select-radio:checked + .makeshop-custom-select-radio-text::before {
  border-color: #ea8f8f;
}
.makeshop-custom-select-radio:checked + .makeshop-custom-select-radio-text::after {
  transform: translateY(-50%) scale(1);
}
.makeshop-custom-select-radio-text {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333;
  line-height: 1.2;
}
/* ============================================================
  数値入力形式
============================================================ */
.makeshop-custom-select-text {
  padding-top: 15px;
}
.makeshop-custom-select-text .makeshop-custom-select-text-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px;
}
.ms-cs-stepper-btn {
  cursor: pointer;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.2s;
  flex-shrink: 0;
}
.ms-cs-stepper-btn:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
.makeshop-custom-select-text-wrap .makeshop-custom-select-text {
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  width: 70px !important;
  height: 44px !important;
  text-align: center !important;
  font-size: 18px !important;
  background: #ffffff !important;
  appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.makeshop-custom-select-text::-webkit-outer-spin-button,
.makeshop-custom-select-text::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* ============================================================
  プルダウン形式
============================================================ */
.makeshop-custom-select-wrap .makeshop-option-select-wrap::after {
  display: none !important;
}
.makeshop-custom-select-wrap .makeshop-option-select {
  appearance: none !important;
  width: 100%;
  height: 50px;
  padding: 0 40px 0 15px;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 14px !important;
  cursor: pointer;
}
/* ============================================================
  カード形式
============================================================ */
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
}
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button {
  width: auto !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  border: 1px solid #e0e0e0 !important;
  background: #ffffff !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button:hover {
  background: #f5f5f5 !important;
}
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button.selected {
  background: #ea8f8f !important;
  border-color: #ea8f8f !important;
  color: #ffffff !important;
}

商品詳細JavaScript（Complete）

※最後尾に追記

    // --- custom select 統合最終版（小数点対応・フリーズ防止・画像判定あり） ---

    function refreshTriggerBars() {
        var triggers = document.querySelectorAll('.ms-cs-trigger-bar');
        for (var i = 0; i < triggers.length; i++) {
            var t = triggers[i];
            var id = t.getAttribute('data-target-id');
            var wrap = document.querySelector('.makeshop-custom-select-wrap[data-custom-select-id="' + id + '"]');
            if (wrap) {
                var isMet = wrap.getAttribute('data-condition-met') === '1';
                t.style.setProperty('display', isMet ? 'flex' : 'none', 'important');
            }
        }
    }

    setTimeout(function() {
        $('.ms-cs-trigger-bar').remove();
        if (!$('.ms-cs-modal-content').length) {
            $('body').append('<div class="ms-cs-modal-overlay"></div><div class="ms-cs-modal-content"><div class="ms-cs-modal-header"><span class="ms-cs-modal-title"></span><span class="ms-cs-modal-close">×</span></div><div class="ms-cs-modal-body"></div></div>');
        }

        $('.makeshop-custom-select-wrap').each(function() {
            var $wrap = $(this);
            var customSelectId = $wrap.data('custom-select-id');
            var $labelEl = $wrap.find('.makeshop-option-label');
            var formattedLabel = ($labelEl.text() || "").replace(/（必須）/g, '<span class="ms-cs-required">（必須）</span>');
            $labelEl.html(formattedLabel);

            if ($wrap.hasClass('makeshop-custom-select-image-button')) {
                var $selectedBtn = $wrap.find('.selected');
                var isSelected = $selectedBtn.length > 0;
                var selectedText = isSelected ? $selectedBtn.text().trim() : '選択してください';
                var selectedImgSrc = isSelected ? $selectedBtn.find('.makeshop-custom-select-image').attr('src') : '';
                var imgHtml = selectedImgSrc ? `<div class="ms-cs-selected-image-wrap"><img src="${selectedImgSrc}"></div>` : `<div class="ms-cs-selected-image-wrap" style="display:none"></div>`;

                var $trigger = $(`
                    <div class="ms-cs-trigger-bar" data-target-id="${customSelectId}">
                        <span class="ms-cs-label">${formattedLabel}</span>
                        <span class="ms-cs-current-value" style="color: ${isSelected ? '#000' : '#888'}">
                            ${imgHtml}
                            <span class="ms-cs-value-text">${selectedText}</span>
                        </span>
                        <span class="ms-cs-arrow">＞</span>
                    </div>
                `);
                $wrap.before($trigger);

                $trigger.on('click', function(e) {
                    e.preventDefault();
                    var scrollY = $(window).scrollTop();
                    $('body').addClass('ms-modal-open').css({'position': 'fixed', 'top': -scrollY + 'px', 'width': '100%'});
                    $('.ms-cs-modal-title').html(formattedLabel);
                    $wrap.after('<div class="ms-cs-placeholder" data-target-id="' + customSelectId + '"></div>');
                    $('.ms-cs-modal-body').empty().append($wrap.show());
                    $('.ms-cs-modal-overlay').show();
                    $('.ms-cs-modal-content').css({'display': 'flex', 'position': 'fixed', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%, -50%)', 'margin': '0'}).hide().fadeIn(150);
                });
            } else {
                $wrap.show();
                if ($wrap.hasClass('makeshop-custom-select-text')) {
                    var $input = $wrap.find('.makeshop-custom-select-text');
                    $wrap.find('.ms-cs-stepper-btn').remove();
                    var $minus = $('<div class="ms-cs-stepper-btn ms-minus">－</div>');
                    var $plus = $('<div class="ms-cs-stepper-btn ms-plus">＋</div>');
                    $input.before($minus).after($plus);
                    
                    var step = parseFloat($input.attr('step')) || 1;
                    var updateVal = function(nv) {
                        var stepStr = step.toString();
                        var precision = stepStr.indexOf('.') !== -1 ? stepStr.split('.')[1].length : 0;
                        var fixedVal = parseFloat(nv).toFixed(precision);
                        $input.val(fixedVal);
                        $input[0].dispatchEvent(new Event('change', { bubbles: true }));
                    };
                    $minus.on('click', function() {
                        var v = parseFloat($input.val()) || 0;
                        var min = parseFloat($input.attr('min')) || 0;
                        if (v > min) updateVal(v - step);
                    });
                    $plus.on('click', function() {
                        var v = parseFloat($input.val()) || 0;
                        var max = parseFloat($input.attr('max')) || 9999;
                        if (v < max) updateVal(v + step);
                    });
                }
            }
        });

        refreshTriggerBars();

        var observeTarget = document.querySelector('.item-info') || document.body;
        new MutationObserver(function(mutations) {
            var shouldUpdate = mutations.some(function(m) {
                return !$(m.target).closest('.ms-cs-trigger-bar').length;
            });
            if (shouldUpdate) refreshTriggerBars();
        }).observe(observeTarget, {
            attributes: true,
            subtree: true,
            attributeFilter: ['data-condition-met', 'class', 'style']
        });

    }, 500);

    function closeCustomModal() {
        var $content = $('.ms-cs-modal-body .makeshop-custom-select-wrap');
        if ($content.length) {
            var targetId = $content.data('custom-select-id');
            $(`.ms-cs-placeholder[data-target-id="${targetId}"]`).replaceWith($content.hide());
        }
        var scrollY = Math.abs(parseInt($('body').css('top') || '0'));
        $('body').removeClass('ms-modal-open').css({'position': '', 'top': '', 'width': ''});
        $(window).scrollTop(scrollY);
        $('.ms-cs-modal-overlay, .ms-cs-modal-content').fadeOut(150);
        setTimeout(refreshTriggerBars, 100);
    }

    $(document).on('click', '.ms-cs-modal-close, .ms-cs-modal-overlay', closeCustomModal);

    $(document).on('click', '.makeshop-custom-select-wrap .makeshop-custom-select-button', function() {
        var $btn = $(this);
        var $wrap = $btn.closest('.makeshop-custom-select-wrap');
        $wrap.find('.makeshop-custom-select-button').removeClass('selected');
        $btn.addClass('selected');

        if ($wrap.parent().hasClass('ms-cs-modal-body')) {
            var fullName = $btn.text().trim();
            var imgSrc = $btn.find('.makeshop-custom-select-image').attr('src');
            var targetId = $wrap.data('custom-select-id');
            var $triggerValue = $(`.ms-cs-trigger-bar[data-target-id="${targetId}"] .ms-cs-current-value`);
            $triggerValue.find('.ms-cs-value-text').text(fullName).parent().css('color', '#000');
            var $imgWrap = $triggerValue.find('.ms-cs-selected-image-wrap');
            if (imgSrc) { $imgWrap.html(`<img src="${imgSrc}">`).show(); } else { $imgWrap.hide(); }
            closeCustomModal();
        }
    });
});

▼買い物カゴ：ショップデザイン / テンプレート選択・編集 / クリエイターモード / 買い物カゴ

買い物かごHTML（Complete）

※  の上に追記

<{if $cart.list[i].custom_select_summary}>
<div class="cart-list-option">
<p><{$cart.list[i].custom_select_summary|escape:html|nl2br}></p>
</div>
<{/if}>

クリエイターモード【Pulsefit】サンプルソース

表示例はカスタムセレクト表示形式と表示例をご参照ください。

▼商品詳細：ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細

商品詳細CSS（Pulsefit）　

※最後尾に追記

/*custom select*/
/* ============================================================
  基本レイアウト・境界余白設定
============================================================ */
.makeshop-custom-select-wrap {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
}
.makeshop-custom-select-wrap[data-condition-met="1"] {
  display: block !important;
}
.makeshop-custom-select-wrap.makeshop-custom-select-image-button {
  display: none;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}
.makeshop-custom-select-wrap:not(.makeshop-custom-select-image-button)[data-condition-met="1"] {
  display: block !important;
}
.makeshop-custom-select-wrap:not(.makeshop-custom-select-image-button)[data-condition-met="0"] {
  display: none !important;
}
.ms-cs-modal-body .makeshop-custom-select-wrap {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
.makeshop-custom-select-wrap.makeshop-custom-select-image-button .makeshop-option-label {
  display: none !important;
}
.makeshop-option-wrap + .ms-cs-trigger-bar,
.makeshop-option-wrap + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) {
  margin-top: 40px !important;
}
.ms-cs-trigger-bar + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button),
.makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) + .makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button),
.makeshop-custom-select-wrap[data-condition-met="1"]:not(.makeshop-custom-select-image-button) + .ms-cs-trigger-bar {
  margin-top: 20px !important;
}
.item-quantity {
  margin-top: 40px !important;
  display: flex;
  align-items: center;
}
/* ============================================================
  カード形式（画像付き）
============================================================ */
.ms-cs-trigger-bar + .makeshop-custom-select-wrap .makeshop-option-label {
  display: none !important;
}
.makeshop-custom-select-wrap:empty {
  display: none !important;
}
.ms-cs-trigger-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important; 
  border: 1px solid var(--gray) !important;
  border-radius: 4px;
  background: var(--white) !important;
  cursor: pointer;
}
.ms-cs-trigger-bar:hover {
  background: #f5f5f5 !important;
}
.ms-cs-current-value {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  margin-left: auto;
  margin-right: 10px;
  color: var(--black);
  font-weight: bold;
}
.ms-cs-selected-image-wrap {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--gray-back);
  border: 1px solid var(--gray-back);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-cs-selected-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ms-cs-required {
  color: var(--badge) !important;
  font-size: 11px !important;
  margin-left: 4px;
}
/* ============================================================
  モーダル・背景固定設定
============================================================ */
body.ms-modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
  position: fixed !important;
}
.ms-cs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 200000;
  display: none;
  transition: opacity 0.1s ease-out;
}
.ms-cs-modal-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90% !important;
  max-width: 600px !important;
  max-height: 80vh !important;
  background: var(--white);
  z-index: 200001;
  border-radius: 12px;
  display: none;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: opacity 0.1s ease-out;
}
.ms-cs-modal-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ms-cs-modal-body {
  padding: 12px;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.ms-cs-modal-body .makeshop-custom-select-button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  margin-bottom: 8px;
  background: var(--white) !important;
  border: 1px solid var(--gray-back) !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 12px;
}
.ms-cs-modal-body .makeshop-custom-select-button:hover {
  background: #f5f5f5 !important;
  border-color: var(--black) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ms-cs-modal-body .makeshop-custom-select-button.selected {
  border-color: var(--addcart) !important;
  background: #f5f5f5 !important;
}
.ms-cs-modal-body .makeshop-custom-select-image {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain;
  flex-shrink: 0;
}
.ms-cs-modal-close {
  font-size: 24px !important;
  cursor: pointer;
}
.ms-cs-modal-body .makeshop-option-label {
  display: none !important;
}
/* ============================================================
  ラジオボタン形式
============================================================ */
.makeshop-custom-select-radio-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px 0;
}
.makeshop-custom-select-radio-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 1 auto;
}
.makeshop-custom-select-radio {
  display: none !important;
}
.makeshop-custom-select-radio-text::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px; 
  background: #fff;
  transition: all 0.2s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}
.makeshop-custom-select-radio-text::after {
  content: "";
  position: absolute;
  left: 5px; 
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  background: var(--black);
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.makeshop-custom-select-radio:checked + .makeshop-custom-select-radio-text::before {
  border-color: var(--black);
}
.makeshop-custom-select-radio:checked + .makeshop-custom-select-radio-text::after {
  transform: translateY(-50%) scale(1);
}
.makeshop-custom-select-radio-text {
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.2;
}
/* ============================================================
  数値入力形式
============================================================ */
.makeshop-custom-select-text {
  padding-top: 15px;
}
.makeshop-custom-select-text .makeshop-custom-select-text-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 15px;
}
.ms-cs-stepper-btn {
  cursor: pointer;
  font-size: 20px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray);
  border-radius: 50%;
  background: var(--white);
  transition: all 0.2s;
  flex-shrink: 0;
}
.ms-cs-stepper-btn:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.makeshop-custom-select-text-wrap .makeshop-custom-select-text {
  border: 1px solid var(--gray) !important;
  border-radius: 0 !important;
  width: 70px !important;
  height: 44px !important;
  text-align: center !important;
  font-size: 16px !important;
  background: var(--white) !important;
  appearance: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.makeshop-custom-select-text::-webkit-outer-spin-button,
.makeshop-custom-select-text::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* ============================================================
  プルダウン形式
============================================================ */
.makeshop-custom-select-wrap .makeshop-option-select-wrap::after {
  display: none !important;
}
.makeshop-custom-select-wrap .makeshop-option-select {
  appearance: none !important;
  width: 100%;
  height: 50px;
  padding: 0 40px 0 15px;
  border: 1px solid var(--gray) !important;
  background: var(--white) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 14px !important;
}
/* ============================================================
  カード形式
============================================================ */
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px 0;
}
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button {
  width: auto !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  border: 1px solid var(--gray) !important;
  background: var(--white) !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button:hover {
  background: #f5f5f5 !important;
}
.makeshop-custom-select-button:not(.makeshop-custom-select-image-button) .makeshop-custom-select-button.selected {
  background: var(--black) !important;
  border-color: var(--black) !important;
  color: var(--white) !important;
}

商品詳細JavaScript（Pulsefit）

※最後尾に追記

// custom select
$(window).on('load', function() {
    setTimeout(function() {
        function updateAllTriggerBars() {
            var triggers = document.querySelectorAll('.ms-cs-trigger-bar');
            for (var i = 0; i < triggers.length; i++) {
                var t = triggers[i];
                var id = t.getAttribute('data-target-id');
                var wrap = document.querySelector('.makeshop-custom-select-wrap[data-custom-select-id="' + id + '"]');
                if (wrap) {
                    var isMet = wrap.getAttribute('data-condition-met') === '1';
                    if (isMet) {
                        if (t.style.display !== 'flex') t.style.setProperty('display', 'flex', 'important');
                    } else {
                        if (t.style.display !== 'none') t.style.setProperty('display', 'none', 'important');
                    }
                }
            }
        }

        $('.ms-cs-trigger-bar').remove();
        if (!$('.ms-cs-modal-content').length) {
            $('body').append('<div class="ms-cs-modal-overlay"></div><div class="ms-cs-modal-content"><div class="ms-cs-modal-header"><span class="ms-cs-modal-title"></span><span class="ms-cs-modal-close">×</span></div><div class="ms-cs-modal-body"></div></div>');
        }

        $('.makeshop-custom-select-wrap').each(function() {
            var $wrap = $(this);
            var customSelectId = $wrap.data('custom-select-id');

            var $labelEl = $wrap.find('.makeshop-option-label');
            var formattedLabel = ($labelEl.text() || "").replace(/（必須）/g, '<span class="ms-cs-required">（必須）</span>');
            $labelEl.html(formattedLabel);

            if ($wrap.hasClass('makeshop-custom-select-image-button')) {
                var $selectedBtn = $wrap.find('.selected');
                var isSelected = $selectedBtn.length > 0;
                var selectedText = isSelected ? $selectedBtn.text().trim() : '選択してください';
                var selectedImgSrc = isSelected ? $selectedBtn.find('.makeshop-custom-select-image').attr('src') : '';
                var imgHtml = selectedImgSrc ? `<div class="ms-cs-selected-image-wrap"><img src="${selectedImgSrc}"></div>` : `<div class="ms-cs-selected-image-wrap" style="display:none"></div>`;

                var $trigger = $(`
                    <div class="ms-cs-trigger-bar" data-target-id="${customSelectId}">
                        <span class="ms-cs-label">${formattedLabel}</span>
                        <span class="ms-cs-current-value" style="color: ${isSelected ? '#000' : '#888'}">
                            ${imgHtml}
                            <span class="ms-cs-value-text">${selectedText}</span>
                        </span>
                        <span class="ms-cs-arrow">＞</span>
                    </div>
                `);
                $wrap.before($trigger);

                $trigger.on('click', function(e) {
                    e.preventDefault();
                    var scrollY = $(window).scrollTop();
                    $('body').addClass('ms-modal-open').css({'position': 'fixed', 'top': -scrollY + 'px', 'width': '100%'});
                    $('.ms-cs-modal-title').html(formattedLabel);
                    $wrap.after('<div class="ms-cs-placeholder" data-target-id="' + customSelectId + '"></div>');
                    $('.ms-cs-modal-body').empty().append($wrap.show());
                    $('.ms-cs-modal-overlay').show();
                    $('.ms-cs-modal-content').css({'display': 'flex', 'position': 'fixed', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%, -50%)', 'margin': '0'}).hide().fadeIn(150);
                });
            } else {
                $wrap.show();
                if ($wrap.hasClass('makeshop-custom-select-text')) {
                    var $input = $wrap.find('.makeshop-custom-select-text');
                    $wrap.find('.ms-cs-stepper-btn').remove();

                    var $minus = $('<div class="ms-cs-stepper-btn ms-minus">－</div>');
                    var $plus = $('<div class="ms-cs-stepper-btn ms-plus">＋</div>');
                    $input.before($minus).after($plus);

                    var step = parseFloat($input.attr('step')) || 1;

                    var updateVal = function(nv) {
                        var stepStr = step.toString();
                        var precision = stepStr.indexOf('.') !== -1 ? stepStr.split('.')[1].length : 0;
                        var fixedVal = parseFloat(nv).toFixed(precision);
                        
                        $input.val(fixedVal);
                        $input[0].dispatchEvent(new Event('change', { bubbles: true }));
                    };

                    $minus.on('click', function() {
                        var v = parseFloat($input.val()) || 0;
                        var min = parseFloat($input.attr('min')) || 0;
                        if (v > min) updateVal(v - step);
                    });
                    $plus.on('click', function() {
                        var v = parseFloat($input.val()) || 0;
                        var max = parseFloat($input.attr('max')) || 9999;
                        if (v < max) updateVal(v + step);
                    });
                }
            }
        });

        updateAllTriggerBars();

        var observer = new MutationObserver(function(mutations) {
            var shouldUpdate = mutations.some(function(m) {
                return !$(m.target).closest('.ms-cs-trigger-bar').length;
            });
            if (shouldUpdate) updateAllTriggerBars();
        });

        var observeTarget = document.querySelector('.item-info') || document.body;
        observer.observe(observeTarget, { 
            attributes: true, 
            childList: false, 
            subtree: true,
            attributeFilter: ['data-condition-met', 'class', 'style']
        });

        $(document).on('click', 'input, select, .makeshop-custom-select-button', function() {
            setTimeout(updateAllTriggerBars, 300);
        });

    }, 500);
});

function closeCustomModal() {
    var $content = $('.ms-cs-modal-body .makeshop-custom-select-wrap');
    if ($content.length) {
        var targetId = $content.data('custom-select-id');
        $(`.ms-cs-placeholder[data-target-id="${targetId}"]`).replaceWith($content.hide());
    }
    var scrollY = Math.abs(parseInt($('body').css('top') || '0'));
    $('body').removeClass('ms-modal-open').css({'position': '', 'top': '', 'width': ''});
    $(window).scrollTop(scrollY);
    $('.ms-cs-modal-overlay, .ms-cs-modal-content').fadeOut(150);
    setTimeout(function(){ 
        var triggers = document.querySelectorAll('.ms-cs-trigger-bar');
        for (var i = 0; i < triggers.length; i++) {
            var id = triggers[i].getAttribute('data-target-id');
            var wrap = document.querySelector('.makeshop-custom-select-wrap[data-custom-select-id="' + id + '"]');
            if (wrap) triggers[i].style.setProperty('display', wrap.getAttribute('data-condition-met') === '1' ? 'flex' : 'none', 'important');
        }
    }, 100);
}

$(document).on('click', '.ms-cs-modal-close, .ms-cs-modal-overlay', closeCustomModal);

$(document).on('click', '.makeshop-custom-select-wrap .makeshop-custom-select-button', function() {
    var $btn = $(this);
    var $wrap = $btn.closest('.makeshop-custom-select-wrap');
    $wrap.find('.makeshop-custom-select-button').removeClass('selected');
    $btn.addClass('selected');

    if ($wrap.parent().hasClass('ms-cs-modal-body')) {
        var fullName = $btn.text().trim();
        var imgSrc = $btn.find('.makeshop-custom-select-image').attr('src');
        var targetId = $wrap.data('custom-select-id');
        var $triggerValue = $(`.ms-cs-trigger-bar[data-target-id="${targetId}"] .ms-cs-current-value`);
        $triggerValue.find('.ms-cs-value-text').text(fullName).parent().css('color', '#000');
        var $imgWrap = $triggerValue.find('.ms-cs-selected-image-wrap');
        if (imgSrc) { $imgWrap.html(`<img src="${imgSrc}">`).show(); } else { $imgWrap.hide(); }
        closeCustomModal();
    }
});

▼買い物カゴ：ショップデザイン / テンプレート選択・編集 / クリエイターモード / 買い物カゴ

買い物かごHTML（Pulsefit）

※70行目 <{if $cart.list[i].name_print.has_item}> の上に追記

<{if $cart.list[i].custom_select_summary}>
<p class="cart-list-option"><{$cart.list[i].custom_select_summary|escape:html|nl2br}></p>
<{/if}>

カスタムセレクトグループについて

カスタムセレクトグループの設定

1.カスタムセレクトグループの新規登録

2.カスタムセレクトグループ 項目の設定

3.カスタムセレクトグループ 項目の詳細設定

4.保存

条件分岐の設定

【設定方法】

商品への紐づけ方法

【商品編集画面の場合】

【CSVの場合】

カスタムセレクトグループの編集

「カスタムセレクト」表示用のデザインについて

クリエイターモード【Complete】サンプルソース

商品詳細CSS（Complete）

商品詳細JavaScript（Complete）

買い物かごHTML（Complete）

クリエイターモード【Pulsefit】サンプルソース

商品詳細CSS（Pulsefit）

商品詳細JavaScript（Pulsefit）

買い物かごHTML（Pulsefit）

関連マニュアル

関連記事

2.カスタムセレクトグループ項目の設定

3.カスタムセレクトグループ項目の詳細設定

商品詳細CSS（Pulsefit）　