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

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

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.