Need Advice - Make Inline Shopify Form Submission a Requirement to Add Item to Cart

Technical Q&A
, , ,
1

Looking for adivce - we’re a small museum that uses Shopify for our online store as well as membership sales.

Currently on Memberships, we have an inline shopify form set-up before the “add to cart” button that builds a customer profile with all of their information that we need: member(s) name, birthday(s), program interests, etc. However, because Shopify only allows cart customization at the plus level - we’re getting a lot of sales where customers completely skip the form, they just add the membership to their cart and checkout, meaning we have to go back and reach out to the customer asking for the information that they skipped. Is there a workaround to require that the form be completed before the item can be added to their cart?

We’re a small organization and on a strict budget, so we’re looking for free or very inexpensive options.

If an app is the way to go, we’re looking for an option that saves the input to the custom metafields in the customer’s profile so that we’re not having to backtrack and do extra work manually adding it in or editing responses.

Any suggestions are greatly appreaciated!

2

Eh… I think you’re confusing checkout and cart. Cart is theme-based, and is perfectly fine to be customized. Same with the product page.

Here is a sample script within product-form.liquid that requires form entries before the product can be added to cart:

{% if template == 'product.CUSTOM-FORM' %}

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const addToCartButton = document.querySelector('ADD_TO_CART_BUTTON_SELECTOR');
    
    if (addToCartButton) {
      addToCartButton.addEventListener('click', function(event) {
        const requiredFields = document.querySelectorAll('FORM_SELECTOR [required]');
        let allFilled = true;
        let firstEmpty = null;

        requiredFields.forEach(function(field) {
          if (field.type === 'checkbox' || field.type === 'radio') {
            const group = document.querySelectorAll(`[name="${field.name}"]:checked`);
            if (group.length === 0) {
              allFilled = false;
              if (!firstEmpty) firstEmpty = field;
            }
          } else {
            if (!field.value.trim()) {
              allFilled = false;
              if (!firstEmpty) firstEmpty = field;
            }
          }
        });

        if (!allFilled) {
          event.preventDefault();
          event.stopPropagation();
          alert('Please fill out all required fields before adding to cart.');
          if (firstEmpty) firstEmpty.focus();
          return false;
        }
      });
    }
  });
  </script>
{% endif %}
3

Those two things don’t jell, either your time is worth investing in the right tools or it isn’t and spending anytime trying fix this is a waste of budget and man hours.

Does the man hours spent on going and getting info you already should have not have a price tag attached to those hours??!
Or revenue loss from customer friction turning into delayed sales or lost sales.

Not a good mindset for adopting automations that MAKE YOU MONEY by not wasting time that’s already being wasted.

Probably doing this backwards, set up process to tag customers that fill out a form if it’s needs to be automatic without review.
AND make accounts required to checkout, disable all checkout buttons unless customer is logged in and customer is tagged, or disable such buttons for specific products using alternate templates.

Shopify-forms + shopify-flow can do this easily enough.

Or reach out if you need this setup.

4

Those two things don’t jell, either your time is worth investing in the right tools or it isn’t

That would be the ideal scenario! But, unfortunately, it is daily battle of most non-profits orgs. There’s not always wiggle room when we would like for there to be and we do our best to make do with what we have!

Shopify-forms + shopify-flow can do this easily enough.

Thanks for the suggestion

5

Yeah this is super common with membership setups. Without Plus you’d need a custom solution where the add to cart button is disabled until the form validates, which means hiring a dev to write that JavaScript or finding an app that handles required custom fields before checkout. The cheaper hack is just moving all those fields to the checkout page as required custom form fields using an app, so at least you catch them before payment goes through instead of chasing people down after.