How to remove 'Select' from Variant Dropdowns on Squarespace
In this blog post, we'll guide you through the process of improving user experience on your website by removing the 'Select' prefix from dropdown options. While the 'Select' prompt serves the purpose of ensuring customers choose a variant before proceeding to the cart, there are instances where you might prefer a different approach, especially if your site is designed in a language other than English.
Reasoning Behind Removing 'Select' Prompt:
The 'Select' prompt is a common feature meant to prompt users to choose a specific variant before making a purchase. However, for websites catering to diverse linguistic audiences, the need to customize this prompt becomes crucial. By tailoring the language and messaging in your dropdown options, you can create a more user-friendly and culturally relevant experience.
Remove 'Select' from Variant Dropdowns on Squarespace
To implement this on your Squarespace site, follow these steps:
Go to Settings.
Navigate to Advanced.
Select Code Injection.
Locate the Footer section.
Paste the provided JavaScript code.
Save your changes.
Code:
<!--- Remove Select from Variant Dropdowns ---------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(window).on('load', function() {
$("select").each(function() {
var selectText = $(this).attr("aria-label");
selectText = selectText.replace("Select ", "");
$(this).attr("aria-label",selectText);
$(this).find("option:first-child").val(selectText);
$(this).parent().attr("data-text",selectText);
})
});
</script>
<!--- End Remove Select from Variant Dropdowns ------------------->