Want to know what your shoppers actually think about your products? Not from a post-purchase survey they might ignore. Not from a review they leave three weeks later. Right there, on the product page, while they are deciding whether to buy.
A live feedback poll widget does exactly that. It asks a single question, shows the results in real time, and gives you data you can act on immediately. The best part is you do not need a plugin, a third-party app, or a developer. You need about 45 minutes and a free Firebase account.
This is a how-to for store owners who want to capture shopper opinions at the exact moment they are forming them.
What You Are Building
A small widget that sits below your product description or above the add-to-cart button. It asks one question like “Was this product easy to find?” or “Would you buy this as a gift?” Shoppers click an answer. The widget updates instantly to show what percentage of other visitors picked the same option. No login required. No page refresh.
The data flows into a Firebase Firestore database. You can check results anytime from the Firebase console or connect it to a Google Sheet for a simple dashboard.
What You Need
- A Shopify store (or any platform that lets you edit theme files or add custom HTML)
- A free Firebase account
- About 45 minutes
Step 1: Set Up Firebase Firestore
Go to firebase.google.com and create a new project. Name it something like “store-feedback-polls”.
Once the project is created, click Firestore Database in the left sidebar. Create a database in test mode for now. You will lock down the rules later.
Create a collection called “polls”. Inside it, create a document with an auto-generated ID. The document should have these fields:
- question (string): “Was this product easy to find?”
- option1 (string): “Yes, found it fast”
- option2 (string): “Took a moment”
- option3 (string): “Could not find it”
- count1 (number): 0
- count2 (number): 0
- count3 (number): 0
- productId (string): “your-product-handle”
Repeat this for each product where you want a poll. Each poll gets its own document.
Step 2: Add Firestore Security Rules
By default, test mode lets anyone read and write. You need rules that let visitors submit votes but not tamper with counts directly. Go to Firestore Rules and paste:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /polls/{pollId} {
allow read: if true;
allow update: if request.resource.data.question == resource.data.question;
}
}
}This lets anyone read poll data and update counts, but prevents changing the question text. For tighter security, use Firebase Authentication with anonymous sign-in. That is beyond this tutorial but worth setting up later.
Step 3: Build the Widget HTML
Add this snippet to your product page template. In Shopify, edit your theme and find the product-template.liquid section. Paste this where you want the poll to appear:
<div id="feedback-poll" class="feedback-poll-widget">
<p class="poll-question">Was this product easy to find?</p>
<div class="poll-options">
<button class="poll-option" data-option="1">Yes, found it fast</button>
<button class="poll-option" data-option="2">Took a moment</button>
<button class="poll-option" data-option="3">Could not find it</button>
</div>
<div class="poll-results" style="display:none;">
<p class="poll-result-line">Yes, found it fast: <span id="result-1">0</span>%</p>
<p class="poll-result-line">Took a moment: <span id="result-2">0</span>%</p>
<p class="poll-result-line">Could not find it: <span id="result-3">0</span>%</p>
</div>
</div>Step 4: Add the JavaScript
Include the Firebase SDK and the voting logic. Add this to the bottom of your product template or in a separate JS file:
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.0/firebase-app.js';
import { getFirestore, doc, updateDoc, increment, getDoc } from 'https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT.firebaseapp.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const pollId = "YOUR_POLL_DOCUMENT_ID";
const docRef = doc(db, "polls", pollId);
const pollDoc = await getDoc(docRef);
if (pollDoc.exists()) {
const data = pollDoc.data();
const total = data.count1 + data.count2 + data.count3;
document.querySelectorAll('.poll-option').forEach(btn => {
btn.addEventListener('click', async () => {
const option = btn.dataset.option;
await updateDoc(docRef, {
[`count${option}`]: increment(1)
});
const updated = await getDoc(docRef);
const d = updated.data();
const newTotal = d.count1 + d.count2 + d.count3;
document.getElementById('result-1').textContent = Math.round(d.count1 / newTotal * 100);
document.getElementById('result-2').textContent = Math.round(d.count2 / newTotal * 100);
document.getElementById('result-3').textContent = Math.round(d.count3 / newTotal * 100);
document.querySelector('.poll-options').style.display = 'none';
document.querySelector('.poll-results').style.display = 'block';
});
});
}
</script>Replace the Firebase config values with your actual project credentials. You can find them in Project Settings in the Firebase console.
Step 5: Style the Widget
Add this CSS to your theme stylesheet or inside a style tag:
.feedback-poll-widget {
background: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
max-width: 400px;
}
.poll-question {
font-weight: 600;
margin-bottom: 12px;
}
.poll-option {
display: block;
width: 100%;
padding: 10px;
margin: 4px 0;
border: 1px solid #ddd;
background: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.poll-option:hover {
border-color: #333;
}
.poll-result-line {
font-size: 14px;
margin: 4px 0;
}Step 6: Prevent Double Voting
The current setup lets visitors vote multiple times by refreshing the page. To prevent this, store a vote in localStorage:
if (localStorage.getItem(`voted_${pollId}`)) {
document.querySelector('.poll-options').style.display = 'none';
document.querySelector('.poll-results').style.display = 'block';
// Show current results
} else {
// On vote:
localStorage.setItem(`voted_${pollId}`, '1');
}This is not bulletproof. A determined user can clear localStorage. But it stops casual double-voting, which is enough for a simple feedback poll.
What to Ask
The question matters more than the widget. Here are some that work well:
- “Was this product easy to find?” (measures navigation UX)
- “Would you buy this as a gift?” (measures gifting potential)
- “Is the price what you expected?” (measures price perception)
- “Did the photos help you decide?” (measures image quality)
- “Would you recommend this to a friend?” (measures product confidence)
Avoid yes or no questions. Three options give you more nuance and make the results more interesting to display.
What to Do With the Data
Check your Firebase console weekly. If 60% of shoppers say “Could not find it” on a specific product, your navigation or search needs work. If 70% say “Would buy this as a gift,” add a gift wrapping upsell. If most say “Price was higher than expected,” test a price anchor or a value comparison section.
The widget gives you voice-of-customer data at the exact moment of decision. That is more actionable than a post-purchase survey answered three days after delivery.
Common Issues
Firebase quota limits. The free tier includes 50,000 reads and 20,000 writes per day. A single poll with modest traffic will not come close. If you run polls on 50 products with heavy traffic, monitor usage.
Page speed impact. The Firebase SDK adds about 80KB. Load it asynchronously so it does not block page rendering. The widget itself is lightweight HTML.
Mobile layout. The widget works on mobile as-is. Test it on a 375px viewport to make sure the buttons stack cleanly and the text is readable.
Take It Further
Once you have the basics working, you can:
- Connect Firebase to Google Sheets using a webhook. Every vote appends a row.
- Run different polls on different product categories. Use product tags to decide which poll to show.
- A/B test question wording. Run two polls with different questions and compare engagement rates.
- Add a free-text comment field. Store it in a separate Firestore collection for qualitative feedback.
The widget takes 45 minutes to build and gives you ongoing data you would normally pay a tool $20 to $50 a month for. Not bad for a free afternoon project.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
