How to Set a Default Product Variant (Products V2 Compatible)
If you’ve recently moved to Squarespace’s Products V2 engine, you might have noticed that your old workarounds for "Default Variants" have stopped working.
The V2 update changed the underlying code structure. This means scripts that used to automatically select a size or color for your customers are now "broken," leaving your product pages in a frustrating unselected state. The customer is forced to click a choice before they can even see the price or hit "Add to Cart." For a fast-paced shop, this extra click is a friction point that can lead to abandoned carts.
The fix for default variant
Since the old class names (like .variant-select-wrapper) are gone, I’ve updated the logic to target the new Products V2 selectors. This script "intercepts" the new radio button and dropdown structures to ensure your first available options is active immediately.
Video in Action
The Code Snippet
Paste this into your Site Footer code injection in Website -> Pages -> Custom Code (under Not Linked navigation) -> Code Injection.
<!-- sqs:beyondspace--select-default-variant-v2 -->
<script>
function setValue() {
document.querySelectorAll('div.variant-select-wrapper select').forEach(function(dropdown){
dropdown.selectedIndex = '1';
Y.one(dropdown).simulate('change');
});
}
window.onload = setValue ;
</script>
<!-- /sqs:beyondspace--select-default-variant-v2 -->
Need a Hand?
I know that every Squarespace site is a little different. If you’ve customized your CSS or are using a unique template and the snippet isn't lining up perfectly, I’m here to help.
Is the new Products V2 causing other design headaches for your shop? Just hit reply and let me know.
If you'd rather have me handle the implementation for you and ensure your shop is 100% optimized before the official rollout, I offer 1-1 sessions to get your site exactly where it needs to be.
