How to add a custom quantity popup with Product Samples App in your Shopify store

Introduction

As businesses evolve, so do customer needs. One of our clients recently reached out with a request to enhance their product samples feature. They wanted to implement a prompt where customers could specify how many samples they want to order when they express interest in products. This feature not only helps in better inventory management but also ensures that customers receive exactly what they need. In this blog post, we will go through how to incorporate this feature into your app.

Understanding the Request

The primary objective is to create a custom popup that prompts the user to enter the number of pieces they wish to order when they click on the ‘Get Sample’ button. If the stock is insufficient, the system should allow for cancelling the order. Let’s break down how to achieve this.

Step 1: Modifying the Theme

To implement this feature, you need to modify the theme.liquid file in your theme editor.

Step 2: Adding Custom Scripts

Next, you will add the following script just before the closing </body> tag:

<script>
    window.ProductSample = window.ProductSample || {};
    if (typeof ProductSample === 'undefined') {
      var ProductSample = {};
    };
    window.ProductSample.beforeAddToSampleFn = () => {
      return new Promise((resolve, reject) => {
        // build & show your custom popup
        const popup = document.createElement('div');
        popup.innerHTML = `
          <div style="position:fixed;z-index:9999999999;inset:0;background:#0006;display:grid;place-items:center">
            <div style="background:#fff;padding:1.5rem;border-radius:.5rem">
              <p>How did you know about this app?</p>
              <input placeholder="Lorem ipsum dolor" id="info" style="width: 100%;" /><br><br>
              <button id="continue">Continue</button>
              <button id="cancel">Cancel</button>
            </div>
          </div>`;
        document.body.appendChild(popup);
   
        popup.querySelector('#continue').addEventListener('click', () => {
          popup.remove();
          window.ProductSample.customSamplesProperties = {
            'How did you know about this app?': popup.querySelector('#info').value
          };
          resolve();
        });
        popup.querySelector('#cancel').addEventListener('click', () => {
          popup.remove();
          reject();
        });
      });
    };
  </script>

Step 3: Saving and Testing

Save your changes in the theme.liquid file. Now, whenever a customer clicks on ‘Get Sample’, your new modal will pop up, asking how many pieces they want to order.

Dealing with Stock Issues

If customers order more samples than you have in stock, you might want to implement a check for inventory before processing their request. This can be incorporated in the resolution section of the promise in your script before proceeding to save order information.

Testing Your Changes

After implementing these changes, make sure to test the new functionality by going through the sample order process. This ensures that the popup appears correctly and that the quantity gets processed along with the sample order.

Conclusion

Implementing a custom popup for sample orders can greatly improve customer interaction with your app. It not only allows customers to tailor their requests but also helps you better manage stock. As you can see, making these types of enhancements can improve user experience significantly while ensuring your business runs smoothly.

For further assistance on advanced customizations or additional features, feel free to contact our support team!