Shopify product page – Disable auto select the first variant

Shopify product page – Disable auto select the first variant

When it comes to online shopping, it’s crucial to make sure customers have all the information they need and are in control of their choices. In the Shopify Dawn theme, there’s a default behavior where the first available product option is automatically added to the cart when you click “Add to Cart.” This might lead to accidental purchases, and it’s not the best user experience because users might not realize they have options. In this blog post, we’ll provide a straightforward JavaScript solution to fix this issue. Our script is designed specifically for the Shopify Dawn theme. It adds a “Select an option” message, making sure that users have to actively choose their product configuration before making a purchase. This small change can help customers make more informed decisions and create a friendlier and more transparent shopping experience. 

Before

After

<script>
document.addEventListener('DOMContentLoaded', function () {
  const selectElement = document.querySelector('.select__select');
  const addToCartButton = document.querySelector('.product-form__submit');
  const priceItem = document.querySelector('.price-item');

  // Function to disable the Add to Cart button and hide the price
  function disableAddToCart() {
    addToCartButton.disabled = true;
    priceItem.classList.add('visually-hidden'); // Add the visually-hidden class to hide the price
  }

  // Create a new option element for "Select an option"
  const selectOption = document.createElement('option');
  selectOption.value = 'Select an option';
  selectOption.text = 'Select an option';

  // Add the "Select an option" option at the beginning of the select element
  selectElement.insertBefore(selectOption, selectElement.firstElementChild);

  // Set "Select an option" as the initially selected option
  selectElement.value = 'Select an option';

  // Disable the Add to Cart button initially
  disableAddToCart();

  // Function to handle the change event
  function handleSelectChange() {
    if (selectElement.value !== 'Select an option') {
      // Enable the Add to Cart button when a real option is selected
      addToCartButton.disabled = false;
      priceItem.classList.remove('visually-hidden'); // Remove the visually-hidden class to show the price
    } else {
      // Disable the Add to Cart button if "Select an option" is chosen
      disableAddToCart();
    }
  }

  // Add an event listener to the select field
  selectElement.addEventListener('change', handleSelectChange);

  // Trigger the change function on page load to simulate selecting "Select an option"
  handleSelectChange();
});
</script>

Code details:

  1. Event Listener: The code begins by waiting for the DOM to be fully loaded. This ensures that the script doesn’t run until the web page is ready for interaction.

  2. DOM Elements: It then selects three important elements:

    • selectElement: The dropdown or select element that allows users to choose product options.
    • addToCartButton: The button that adds the product to the cart.
    • priceItem: The element that displays the product price.

  3. Disable Add to Cart: The disableAddToCart function is defined to disable the “Add to Cart” button and hide the price initially. It achieves this by setting the disabled property of the button to true and adding a CSS class visually-hidden to the priceItem element.

  4. Create “Select an option”: It creates a new <option> element with the value and text set to “Select an option.” This option serves as the default selection in the dropdown.

  5. Insert Default Option: The script inserts the “Select an option” option at the beginning of the select element’s options list.

  6. Set Initial Value: It sets the value of the select element to “Select an option” to make it the default selection.

  7. Handle Select Change: The handleSelectChange function is defined to handle changes in the select element. If a real option (not “Select an option”) is chosen, it enables the “Add to Cart” button and removes the visually-hidden class from the price item, making the price visible. If “Select an option” is chosen, it calls the disableAddToCart function to disable the button and hide the price again.

  8. Event Listener: An event listener is added to the select element to listen for changes, and it triggers the handleSelectChange function when a change occurs.

  9. Initial Trigger: Finally, the handleSelectChange function is called initially to simulate selecting “Select an option” when the page loads.

Back to blog