How to integrate the survey opt-in module shopify

[jscicluna]

Hi, Since shopify have changed the checkout process I have been unable to get my opt-in to pop up. Does anyone have a solution for this issue that does not rely on apps?

[Dotsquares]

Hi @jscicluna  Modifying the checkout page directly is only possible through Shopify Plus.

 You can place the opt-in on the cart page or use POP Up on the cart page.

Let me know which works for you so can assist you accordingly. 

[mageplaza-cs]

Hi @jscicluna ,

I am from Mageplaza - Shopify solution expert.

Shopify's recent checkout changes have introduced more restrictions on customization, making it trickier to integrate opt-in surveys. However, you can still achieve this without relying on third-party apps by leveraging Shopify's theme customizations, checkout extensibility (Shopify Plus), and Shopify Scripts (Shopify Plus only). Here are a few approaches:

1. Using a Custom Modal in Shopify Theme (Pre-Checkout)
If you want the opt-in survey before checkout, you can add a modal popup to your cart or product page using Liquid and JavaScript.

Steps:

1. Edit your theme's Liquid files (e.g., cart.liquid or theme.liquid).
2. Add a modal with an opt-in form.
3. Use JavaScript to store responses (e.g., localStorage or Shopify.cart.attributes).
4. Pass responses to the checkout page using Shopify cart attributes.

Example Code (Add to cart.liquid or theme.liquid)

<div id="surveyModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
    <div style="background:#fff; padding:20px; margin:10% auto; width:300px; text-align:center;">
        <p>Would you like to participate in our survey?</p>
        <button id="yesBtn">Yes</button>
        <button id="noBtn">No</button>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    setTimeout(() => {
        document.getElementById("surveyModal").style.display = "block";
    }, 2000); // Show modal after 2s

    document.getElementById("yesBtn").addEventListener("click", function() {
        fetch('/cart/update.js', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ attributes: { "Survey Opt-in": "Yes" } })
        });
        document.getElementById("surveyModal").style.display = "none";
    });

    document.getElementById("noBtn").addEventListener("click", function() {
        document.getElementById("surveyModal").style.display = "none";
    });
});
</script>

How it Works:

• A popup appears after 2 seconds on the cart page.
• If the user clicks "Yes," their response is saved in cart attributes.
• Shopify will pass the opt-in data to the checkout.

2.Adding the Survey to Checkout Page (Shopify Plus Only)

If you're on Shopify Plus, you can customize the checkout using Checkout UI Extensions and Shopify Functions.

Steps:

1. Go to Admin -> Settings -> Checkout -> Customize Checkout.
2. Use the Checkout UI Extensions API to insert a survey before the payment step.
3. Save responses in checkout.attributes so they are linked to orders.

Example Checkout UI Extension (Shopify Plus)

import { reactExtension, useApplyAttributeChange } from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <SurveyOptIn />
);

function SurveyOptIn() {
  const applyAttributeChange = useApplyAttributeChange();

  return (
    <div>
      <p>Would you like to participate in our survey?</p>
      <button
        onClick={() => applyAttributeChange({ key: "Survey Opt-in", type: "updateAttribute", value: "Yes" })}
      >
        Yes
      </button>
      <button
        onClick={() => applyAttributeChange({ key: "Survey Opt-in", type: "updateAttribute", value: "No" })}
      >
        No
      </button>
    </div>
  );
}

How it Works:

• The survey is embedded inside the checkout process.
• Responses are stored as checkout attributes (visible in order details).

3. Post-Checkout Survey (Order Confirmation Page)

If Shopify’s checkout restrictions block your opt-in, you can show a survey on the "Thank You" page.

Steps:

1. Go to Admin -> Settings -> Checkout -> Order Status Page.
2. Add a custom script in the "Additional Scripts" box.
3. Use JavaScript to collect responses and store them in a Google Sheet or Shopify order notes.

Example Script

<script>
document.addEventListener("DOMContentLoaded", function() {
    let surveyResponse = prompt("Would you like to participate in our survey? (Yes/No)");
    if (surveyResponse) {
        fetch('/orders/{{ order.id }}/note.json', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ note: "Survey Opt-in: " + surveyResponse })
        });
    }
});
</script>

How it Works:

• The survey pops up after checkout.
• If the user answers, it updates the order note.

Final Thoughts

• For Non-Shopify Plus Users -> Use a cart popup with cart attributes.
• For Shopify Plus Users -> Embed a Checkout UI Extension or modify the Order Status Page.
• For Best Results -> Store responses in cart attributes, checkout attributes, or order notes.

Would you like help refining this further?