テンプレート【Wabisabi】には、カスタムセレクト用のソースコードが初期状態では入っていません。
そのため、商品詳細ページのクリエイターモード（CSS・JavaScript）と、買い物かごのクリエイターモード（HTML）に、本記事のソースコードを追記することでレイアウトの調節や、量り売りなどの増減の箇所が表示できるようになります。
※【Complete】用のCSSと【Pulsefit】用のJavaScriptをもとに、【Wabisabi】で表示・動作するよう調整した一例です。ショップ様のデザインの編集状況によっては、そのまま動作しない場合があります。追記後は、必ずプレビューで表示と動作をご確認ください。
※ショップ様ご自身での編集が難しい場合は、有償サービスの「おてがる更新代行」のご利用もご検討ください。
事前準備) デザインをバックアップする
万が一に備え、編集前に必ず現在のデザインのバックアップをおこなってください。
バックアップの方法は、下記の記事をご確認ください。
【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
手順1) 商品詳細ページの「CSS」にデザインを追記する
カスタムセレクトの見た目（プルダウン・ラジオボタン・数値入力・カード・モーダルなど）を整えるための作業です。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「CSS」欄の末尾に下記を追記してください。
/*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;
}手順2) 商品詳細ページの「JavaScript」に動作を追記する
画像付きカードの選択モーダルや、数値入力のプラス・マイナスボタンなど、カスタムセレクトの動作を有効にするための作業です。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 商品詳細
「JavaScript」欄の末尾に下記を追記してください。
// 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();
}
});以上で商品詳細ページの編集は完了です。「保存」をクリックしてください。
手順3) 買い物かごの「HTML」を編集する
買い物かご画面に、選択したカスタムセレクトの内容を表示するための作業です。
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 買い物カゴ
「HTML」欄の下記の記述を探してください。
※48行目付近が目安です。
<div class="cart-option-area">
<{section name=j loop=$cart.list[i].selected_option.list}>
<span><{$cart.list[i].selected_option.list[j].title}>：<{$cart.list[i].selected_option.list[j].option_name}></span>
<{/section}>
</div>こちらを、下記に変更してください。
<div class="cart-option-area">
<{section name=j loop=$cart.list[i].selected_option.list}>
<span><{$cart.list[i].selected_option.list[j].title}>：<{$cart.list[i].selected_option.list[j].option_name}></span>
<{/section}>
<{if $cart.list[i].custom_select_summary}>
<p class="cart-list-option"><{$cart.list[i].custom_select_summary|escape:html|nl2br}></p>
<{/if}>
</div>変更後、「保存」をクリックしてください。
手順4) プレビューで表示を確認する
追記した内容が、ショップ様のデザインで正しく表示・動作するかを確認するための作業です。
商品詳細ページと買い物かごの両方で、カスタムセレクトが表示されること、選択内容が買い物かごに反映されることをご確認ください。
関連記事
■makeshopサポート記事
- 【クリエイターモード】カスタムセレクト（カスタムセレクトグループ）を商品詳細ページ・買い物かごに表示するタグとソースコードを教えてください。
- 【クリエイターモード】デザインセット（ソースコード）をバックアップする方法を教えてください。
■マニュアル