Blogger does not have its own built-in review system. Even if someone buys a product, there is no built-in way to show their opinion or star rating. This article explains, step by step, using completely free tools, how to add a professional review box (like the ones on Amazon or Flipkart) to any Blogger theme, covering every step, every button, and every common problem in detail. Whatever theme you use, at the very end there is a ready-made AI prompt that you can use with your own theme's code so the AI can find the right place and insert the code for you.
What This Guide Will Build
By the end, every product post will have a review box underneath it, where customers can give a star rating, write their name and opinion, and optionally add a photo. Next to each review, a date and a colorful profile icon (made from the first letter of the name) will be shown. At the top of the post, next to the share icon, there will be a small star badge that, when clicked, jumps straight down to the review section. If there are many reviews, a "See More Reviews" button will reveal them gradually.
This will be built using three completely free tools.
- Firebase, Google's own service, where the name, rating, and text of every review will be stored
- GitHub, where the JavaScript code will be hosted for free
- Cloudinary, where photos uploaded by customers will be stored for free
An important reality: Using Firebase's own image storage (Storage) requires adding a card and moving to a paid plan, which this guide avoids. Instead, Cloudinary is used, which has a free-forever plan, no card required.
Step One: Create a Free Database in Firebase
Open console.firebase.google.com and sign in with your Gmail account.
- Click the "Create a project" button and give it a name, such as mysite-reviews
- Keep the Google Analytics option turned off, since it is not needed here
- Click "Create project" and wait a few seconds
Turning On Firestore Database
- In the left menu, under the Build section, click Firestore Database
- Click the "Create database" button
- Choose a server location close to India, such as asia-south1
- Select "Start in test mode" and click Create
Collecting the Web App's Config Code
- Click the settings icon at the top left and go to Project settings
- Scroll down to the "Your apps" section and click the web icon
- Give it a name and click "Register app"
- The screen will show a code block called firebaseConfig — copy this entire code and keep it
Common problem: A hosting setup page appears
Firebase sometimes shows a hosting setup page that asks you to run some code. This is not needed for a Blogger site. Skip this page and click "Continue to console" or "Done" to exit.
Step Two: Setting Up Data Protection Rules
Even though it starts in test mode, this only stays open for thirty days. So it is important to set up permanent rules, so that anyone can read and write reviews, but no one can delete or change someone else's review.
- Click the Rules tab at the top of Firestore Database
- Delete the old code and paste in the new security rules code
- Click Publish to save
Step Three: Adding the Code to Your Blogger Theme for the First Time
Go to the Blogger dashboard, then click Theme, then Edit HTML. Two separate places need to be changed here.
Adding the Firebase Connection to the Head Section
At the top, use the search box to find the FontAwesome link. It usually looks like a link containing the text "font-awesome". Right below that line, paste the two Firebase script links along with the firebaseConfig code from the earlier step.
Common problem: The same kind of code appears in two places
In many themes, the FontAwesome link is written twice — once for preloading, and once as a normal backup (inside a noscript tag). You only need to paste the code once, under either one — there is no need to add it in both places.
Adding the Review Box Below the Post
In most themes, the area below the post is usually inside a block called an "includable," often named postFooter. This is where the related posts and share button code lives. Right before that, a new section is added, containing the star rating, name field, opinion box, and submit button.
Common problem: The same-named code appears twice in the theme
In many themes, the code named postFooter appears twice — once inside a default template that is not actually used, and once inside the real post widget that is actually used. The way to identify the correct spot is to look for the section that is near a widget heading called "Blog Posts" — that is the real one, and that is where the code should go.
Important tip: Blogger's theme code is a strict, rule-based file, so end tags, angle brackets, and single quotation marks cannot be written directly. The easy way to write these is to place the entire JavaScript inside a special code block so these rules don't apply. Otherwise, you'll see a red error when saving.
Step Four: Why Clicking the Stars Does Nothing
After adding the code, the first big problem usually shows up here. The review box is visible, but clicking the stars does nothing, and the review area just keeps showing "Loading" forever.
Finding the Cause
- Go to that post page on your website
- Press F12 on your keyboard, or right-click and select Inspect
- Click the Console tab at the top
- Check whether there is any error message shown in red
Real cause: The theme's security policy blocks inline code
The console often shows a message that includes the words "Content Security Policy." This means the theme has a security rule that does not allow JavaScript code written directly inside the page to run. As a result, the review box's code silently fails, with no visible error — the stars simply stop working.
Solution: Move the Code Into an External File
Even though a script written directly inside the page gets blocked, a script loaded from an external file runs fine. So the entire JavaScript code is moved into a separate file.
- Create a free account on github.com
- Create a new Public repository, such as mysite-assets
- Click "Add file," then "Create new file"
- Name the file reviews.js
- Paste the entire JavaScript code and click "Commit changes"
- A free service called jsDelivr creates a usable link for that file, such as cdn.jsdelivr.net/gh/username/repo@main/reviews.js
- Delete the large script block inside the theme, and paste in just this one-line link instead
After doing this, clicking a star immediately changes its color, and submitting a review shows it right below instantly.
Step Five: Old Content Still Shows Even After Updating the Code
After adding something new to the JavaScript file, a new problem appears. Even though the file is updated on GitHub, the website still shows the old version.
Cause: jsDelivr's cache
For speed, jsDelivr remembers the file for some time — this is called a cache. To see the new changes right away, open this address once in your browser: purge.jsdelivr.net/gh/username/repo@main/reviews.js. This clears the old copy and brings in the new one. This needs to be done every time the code is changed.
Clearing up a misunderstanding: This cache issue only happens when the code itself is changed. When a customer submits a review, it goes directly into the database — no cache needs to be cleared. So customer reviews always show up instantly and correctly.
Step Six: Adding Cloudinary for Photo Uploads
To let customers add a photo with their review, you need somewhere to store images. Since Firebase's own Storage requires a paid plan, Cloudinary is used instead, which is completely free.
- Create a free account on cloudinary.com
- Copy the "Cloud name" shown at the top left of the Dashboard, and keep it
- Click the settings icon at the top and go to the Upload tab
- Click "Add upload preset"
- Make sure Signing mode is set to Unsigned, not Signed
- Give the preset a name and click Save
- Once this Cloud name and preset name are added into the JavaScript code, the upload button will start working
Common problem: Signing mode is accidentally left as Signed
When creating a new preset, Signed mode is selected by default. Unless this is changed to Unsigned, images cannot be sent directly from the browser, and uploads will fail. Double-check this setting before clicking Save.
Step Seven: Adding a Rating Badge to the Top of the Product Page
It's not enough to just have the review box at the bottom — a small star badge is also added near the top of the post, close to the share and favorites icons, showing the average rating and the total number of reviews. These icons are usually found in an includable called postsByline or something similar — just like postFooter, this can also appear twice under the same name, so the real widget needs to be found first. Clicking the badge scrolls the page straight down to the review section.
Step Eight: Showing Reviews Gradually When There Are Many
If a product collects a lot of reviews, showing them all at once makes the page long and cluttered. So only a few reviews are shown at first, with a "See More Reviews" button below. Clicking it loads more reviews, gradually, without making the whole page heavy at once.
What It All Adds Up To
The whole process comes together through three free services: Firebase stores the review data, GitHub and jsDelivr deliver the code to everyone, and Cloudinary stores the photos customers upload. Once set up, for small UI changes like colors or borders, you only need to work inside the Blogger theme — there's no need to touch the other three places again.
AI Prompt for Adding This to Your Own Theme
Whatever theme you use, copy the prompt below and give it to any AI (such as Claude or ChatGPT), along with the full XML code of your own theme. The AI will read the theme itself, figure out exactly where the code should go, and how to match it to your theme's colors and design.
No, Firebase, GitHub, and Cloudinary can all be used on their free plans — no card or payment is needed for a small or medium traffic site.
Press F12 in your browser and open the Console tab, then check for any error shown in red. Most of the time this is a Content Security Policy issue, and the fix is to move the JavaScript code into an external file like GitHub.
This happens because of jsDelivr's cache. Opening the file's address once through purge.jsdelivr.net brings in the new version. This does not affect customers submitting reviews — it is only needed after changing the code.
No, they only need to type their name. A colorful profile icon is automatically created from the first letter of the name, so no login is needed.
The one located near a widget heading called "Blog Posts" is the real one, and that is where the code should go. The other one is usually an unused default template, and does not need to be touched.
No, it actually helps. Reviews add genuine, new content, which Google favors. The script runs after the page's main content has loaded, so it does not affect page speed.
In Summary
Setting up a review system may seem complicated at first, but done step by step, it's really a one-time task. By combining these three free tools — Firebase, GitHub, and Cloudinary — you can build a professional, trustworthy review box on your own Blogger site, whatever theme you use.
This article describes a real setup process. The code structure and includable names may differ from theme to theme, so always preview and verify before adding this to your own theme, and it's good practice to back up your theme before making any major changes.
Please do not enter any spam links in the comment box.