Custom CSS & Javascript: Product Toggles
FAQ – Hidden Features: Part 9
September 8, 2025A quick Yes/No option to speed up product customizing!
Product attribute lists are a great way to give your users stock and finishing options but they have only been able to be displayed in either a dropdown or as buttons... until now!
This blog post will show you how to turn a simple product attribute with Yes and No options into a convenient toggle that takes up little space and frankly, just makes sense. Let’s get ready to toggle!
Product Setup
Before getting into the code, let's ensure we have a product that is ready to test with. This toggle will work as follows:
If a product has a product attribute list with two options with online names of "Yes" and "No" it will display a toggle for them instead of a dropdown.
This means that you will need to create a department item (if you do not have them already) where the Online Name that the user sees is "Yes" and another with the Online Name of "No."
The department items can add to the price of the product if you would like there to be an associated price but it is not necessary, and the Product Attribute list can be named however you would like.
Add the product to the portal you would like to use this code on and let's continue!
The JavaScript
In Online Ordering > Portals & Themes > Select your Portal then click Customize this Portal in the Customization section.
Copy the code below and paste it into the Custom JavaScript:
$(document).ready(function() {
// Target all select elements
$('select').each(function() {
var dropdown = $(this);
var options = dropdown.find('option');
// Add specific classes to "Yes" and "No" options dynamically
options.each(function() {
if ($(this).text() === "Yes") {
$(this).addClass('option-yes');
}
if ($(this).text() === "No") {
$(this).addClass('option-no');
}
});
// Check if the dropdown contains "Yes" and "No"
var containsYes = dropdown.find('.option-yes').length > 0;
var containsNo = dropdown.find('.option-no').length > 0;
// If the dropdown contains both "Yes" and "No", convert it into a toggle
if (containsYes && containsNo) {
// Create the toggle switch HTML with text inside the toggle
var toggleHtml = `<label class="switch"><input type="checkbox" class="toggleCheckbox" ${containsNo ? '' : 'checked' }><span class="slider round"><span class="toggle-text">${containsNo ? "No" : "Yes"}</span></span></label>`;
dropdown.closest('.product-attribute-departmentitem-container').addClass('toggle-attribute');
// Insert the toggle switch HTML above the dropdown
dropdown.before(toggleHtml);
// When the toggle is changed, update the dropdown selection and the text inside the toggle
$('.toggleCheckbox').change(function() {
if ($(this).is(':checked')) {
// Find the "Yes" option by class and select it
dropdown.find('.option-yes').prop('selected', true);
dropdown.find('.option-no').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("Yes");
} else {
// Find the "No" option by class and select it
dropdown.find('.option-no').prop('selected', true);
dropdown.find('.option-yes').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("No");
}
});
}
});
});
function dmLoad() {
// Hide the original dropdown
$('.toggle-attribute .select2').hide();
}
Please note: there can only be one "function dmLoad" per portal & theme combined so if one already exists on your portal or theme, copy the code inside this function, then paste it before the closing bracket of your existing function.
Time to Style!
Last step!
Copy the code below and paste it into the Custom CSS:
.switch {
position: relative;
display: inline-block;
width: 75px;
height: 30px;
vertical-align: middle;
margin-left: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.switch .slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
border-radius: 50%;
background-color: white;
transition: 0.4s;
left: 4px;
bottom: 4px;
}
.switch input:checked+.slider {
background-color: #4CAF50;
}
.switch input:checked+.slider:before {
transform: translateX(45px);
}
.toggle-text {
font-size: 14px;
color: white;
font-weight: bold;
transition: 0.4s;
position: absolute;
left: 40%;
transform: translateX(-0%);
pointer-events: none;
}
.switch input:checked+.slider .toggle-text {
transform: translateX(-70%);
}
.switch input:not(:checked)+.slider .toggle-text {
transform: translateX(50%);
}
If you would like the "Yes" option to be a different color in the toggle than the green we have set, change the Hex code in the code above from "#4CAF50" to your own.
That's it! Check out the toggle on the product you added with these options!
'Sketch & Print' Specifics
If you are using the Sketch & Print theme, please see below for adjustments.
Instead of the JavaScript above, copy and paste the below code into the Theme Level JavaScript on line 106 - BEFORE the comment "//Convert Dropdowns to Buttons."
// Target all select elements
$('select').each(function() {
var dropdown = $(this);
var options = dropdown.find('option');
// Add specific classes to "Yes" and "No" options dynamically
options.each(function() {
if ($(this).text() === "Yes") {
$(this).addClass('option-yes');
}
if ($(this).text() === "No") {
$(this).addClass('option-no');
}
});
// Check if the dropdown contains "Yes" and "No"
var containsYes = dropdown.find('.option-yes').length > 0;
var containsNo = dropdown.find('.option-no').length > 0;
// If the dropdown contains both "Yes" and "No", convert it into a toggle
if (containsYes && containsNo) {
// Create the toggle switch HTML with text inside the toggle
var toggleHtml = `<label class="switch"><input type="checkbox" class="toggleCheckbox" ${containsNo ? '' : 'checked' }><span class="slider round"><span class="toggle-text">${containsNo ? "No" : "Yes"}</span></span></label>`;
dropdown.closest('.product-attribute-departmentitem-container').addClass('toggle-attribute');
// Insert the toggle switch HTML above the dropdown
dropdown.before(toggleHtml);
// When the toggle is changed, update the dropdown selection and the text inside the toggle
$('.toggleCheckbox').change(function() {
if ($(this).is(':checked')) {
// Find the "Yes" option by class and select it
dropdown.find('.option-yes').prop('selected', true);
dropdown.find('.option-no').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("Yes");
} else {
// Find the "No" option by class and select it
dropdown.find('.option-no').prop('selected', true);
dropdown.find('.option-yes').prop('selected', false);
dropdown.trigger('change');
$('.toggle-text').text("No");
}
});
}
});
Next, paste this line at the very bottom of the Theme Level JavaScript, but before the closing bracket: }
// Hide the original dropdown
$('.toggle-attribute .select2').hide();
Add the CSS code as instructed above.
Last change! Find the following CSS in the Theme Level CSS (usually line 2068):
.page-productdetails label:not(#fulFileUpload_button),
.page-checkout .checkout-shipmenttype-container label,
.page-checkout .checkout-orderdetails-container label {
width: 100%;
}
And change it to:
.page-productdetails label:not(#fulFileUpload_button):not(.toggle-attribute label),
.page-checkout .checkout-shipmenttype-container label,
.page-checkout .checkout-orderdetails-container label {
width: 100%;
}
That's it! If the steps were followed properly the code should now work with the 'Sketch & Print' theme!
If you have any ideas you'd like to see us tackle email our support team at support@docketmanager.ca
