Variant picker doesn't work on desktop (Using trade theme)

Shopify Discussion

Topic summary

A Shopify store owner using the Trade theme reports that product variant selection (colors, sizes) fails on desktop but works correctly on mobile and through the quick-add feature. The issue occasionally resolves after reloading and waiting 5 seconds, suggesting intermittent behavior.

Root Cause Identified:
Two JavaScript errors were found in the browser console:

  • product-form.js:129 attempting to access a null element via querySelector
  • product-info.js:84 calling a non-existent toggleSubmitButton function

Recommended Fixes:

  • Add null checks before accessing DOM elements
  • Verify function existence before calling methods
  • Address timing/race condition issues where code executes before elements load
  • Check for conflicts between quick-add and main product page scripts

Status: The issue remains unresolved. A developer is needed to implement the suggested code fixes, or the responder offered to investigate further with collaboration access.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi!

When you go to my website which is https://artbyjj.art you can only pick different product variants if you use the quick add option. And this problem is only on desktop and I’ve got no idea what is causing this. I think I recognized it after running paid SEO for my website but could’ve been earlier also. I’ve tried many different fixes, like importing the whole product again (from printify) to my website. I’ve also checked that the different product variations and swatches are okay. When I access my website on my mobile phone I can choose different product colors and sizes without any problem but on desktop I just can’t choose any when clicking the variations. Now also if I add it does sometimes work when you reload the page and wait for 5 seconds, so it’s very strange for me if it’s a bug or something because I don’t really know about the coding side myself. If someone can help and find the issue that would be gladly appreciated! Thank you!

Best Regards,

Jesse Hakala / ArtbyJJ

2

Hey @ArtbyJJ ,

I dug deep into your website issue and found these two errors in your console that are likely causing the problem with product variants on desktop:

  1. Uncaught TypeError: Cannot read properties of null (reading ‘querySelector’) at product-form.js:129:26

  2. Uncaught TypeError: productForm?.toggleSubmitButton is not a function at product-info.js:84:22

    TheUntechnickle_1-1741083893444.png
    TheUntechnickle_1-1741083893444.png2940×1676 747 KB

These errors suggest your product form JavaScript is trying to:

  • Access an element that doesn’t exist in the DOM (resulting in null)
  • Call a function that doesn’t exist on the productForm object

The fact that it works on mobile but not desktop points to either:

  • Different JavaScript loading between devices
  • Responsive design differences affecting element structure
  • Timing issues where code executes before elements are fully loaded

To fix this, you’ll need to:

  1. Check your theme’s product-form.js (line 129) and product-info.js (line 84) files.

  2. Add proper null checks before accessing properties:

const element = document.querySelector('selector');
if (element) {
  // then access properties
}
  1. Verify the function exists before calling it:
if (productForm && typeof productForm.toggleSubmitButton === 'function') {
  productForm.toggleSubmitButton();
}

  1. Look at code execution timing - the fact that “reload and wait 5 seconds” sometimes works suggests a race condition where elements aren’t ready when the code runs.

  2. Check for conflicts between your quick add functionality and the main product page code.

You can get this fixed by your developer, or if you’d like us to take a deeper look at your specific implementation, just DM or email your collaboration code and we can give it a shot!

Cheers!
Shubham | Untechnickle