If you’re managing a Shopify store and want to fine-tune the visibility of Google reviews on your site, you might find the need to hide certain reviews based on specific criteria. This guide will walk you through a simple JavaScript solution to hide reviews from a particular person, using a script that integrates seamlessly with your Shopify store.
The Challenge
Sometimes, you may have a situation where you want to hide reviews from specific individuals or sources that don’t align with your brand’s image or that you prefer to exclude for any reason. This might be due to the content of the reviews, the reviewer’s identity, or other factors.
The Solution
The JavaScript code snippet below demonstrates how to automatically remove reviews from a specific person (in this case, “Kemiyondo Coutinho”) from the reviews section on your Shopify store. This script uses MutationObserver to watch for changes in the document and remove the targeted review dynamically.
Here’s the code you’ll need:
<script>
document.addEventListener('DOMContentLoaded', function() {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var elements = document.querySelectorAll('.grp-entangle-item-head-name');
elements.forEach(function(element) {
if (element.textContent.trim() === 'Kemiyondo Coutinho') {
var swiperSlide = element.closest('.swiper-slide');
if (swiperSlide) {
swiperSlide.remove();
}
}
});
});
});observer.observe(document.body, { childList: true, subtree: true });
});
</script>
How It Works
- Event Listener: The script begins by setting up an event listener for when the DOM content is fully loaded. This ensures that the script runs after all the initial content has been rendered on the page.
- MutationObserver: It uses a
MutationObserverto monitor changes in the DOM. This is particularly useful for dynamic content that might be loaded or altered after the initial page load. - Selecting Review Elements: The observer checks for changes and looks for elements with the class
.grp-entangle-item-head-name, which presumably contains the name of the reviewer. - Filtering Reviews: For each element found, the script compares the text content to the name “Kemiyondo Coutinho”. If it matches, it identifies the closest
.swiper-slideelement (assuming each review is within such a slide) and removes it from the DOM. - Observing Changes: The observer is set to monitor the body of the document, including its subtree, for any additions or changes to child elements. This allows it to catch newly loaded or dynamically inserted reviews as well.
Implementing the Code
To use this script on your Shopify store:
- Add the Code: Insert the script into your Shopify theme’s
theme.liquidfile, ideally in the<head>section or just before the closing</body>tag. - Adjust the Selector: Ensure that the class selectors used in the script (
.grp-entangle-item-head-nameand.swiper-slide) match the structure of your review elements. - Test Thoroughly: After implementation, test your store thoroughly to ensure the script is working as expected and that no other reviews or elements are inadvertently affected.
Conclusion
By using this JavaScript approach, you can maintain greater control over the visibility of Google reviews on your Shopify store, ensuring that your reviews section aligns with your brand’s image and messaging. If you have any questions or need further customization, don’t hesitate to reach out to a developer or Shopify expert.