How to remove 'Select' from Variant Dropdowns on Squarespace
When setting up product variant options in Squarespace (like size or color), a dropdown menu appears with the "Select" text. While this works functionally, many store owners prefer a cleaner look without the "Select" text. In this tutorial, you’ll learn how to remove the "Select" text from your variant dropdowns on product pages in Squarespace 7.1.
Table of Contents
Why Remove "Select" text from Variant Dropdowns?
Here’s why you might want to eliminate the default “Select” option:
You want the first real variant (e.g., Small, Red, etc.) to appear by default
You’re aiming for a more polished or minimalist design
You’re using product options as part of a style selector and “Select” text doesn’t align with your UX goals
Improves the checkout experience.
Complexity: Easy
Step-by-Step Instructions
Step 1: To achieve this on your Squarespace site, simply add the following JavaScript below to Pages > Custom Code > Code Injection > Footer and then save your changes.
<!--- Remove Select from Variant Dropdowns ---------------------->
<script>
window.addEventListener('load', function () {
document.querySelectorAll('select').forEach(function (select) {
let selectText = select.getAttribute('aria-label');
if (selectText && selectText.startsWith('Select ')) {
selectText = selectText.replace('Select ', '');
select.setAttribute('aria-label', selectText);
const firstOption = select.options[0];
if (firstOption) {
firstOption.value = selectText;
}
if (select.parentElement) {
select.parentElement.setAttribute('data-text', selectText);
}
}
});
});
</script>
<!--- End Remove Select from Variant Dropdowns ------------------->
Step 2
When the page has refreshed, you should see the variants without the word “select”.
Key Takeaways
The “Select” text is often unnecessary
A better user experience
Works across all Squarespace 7.1 templates
Helps create a cleaner and more intuitive product page
FAQs
Will this break my product variant functionality?
No. Hiding the “Select” option simply improves appearance; variants still function normally.
Will customers still be able to choose different variants?
Yes! This only affects the initial state—customers can still select different options freely.
Conclusion
Removing the "Select" text from your variant dropdowns in Squarespace is a subtle tweak—but it can significantly enhance the look and usability of your store. Whether you're running a fashion shop or selling handmade goods, giving your customers a cleaner interface leads to a smoother shopping experience.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
