The REVIEWS.IO BigCommerce application allows you to automate your review collection for service and product reviews.
Requirements
⭐️ Active REVIEWS.io Plan
Navigation 📍
Log into your REVIEWS.IO Dashboard
Navigate to Integrations
Select BigCommerce
Instructions ⚙️
Features:
Automate review requests
Automatically synchronise product catalogue
Boost reviews by sending requests to your past customers
Import BigCommerce product reviews
STEP 1: Add BigCommerce 'Permanent Address'
Step 2: Installing the REVIEWS.IO Reviews App
Access your BigCommerce admin
Click on Apps
Click on Marketplace
Click Bigcommerce.com/apps
Search for REVIEWS.IO in the search box
Click the REVIEWS.IO app
Click on Get this App
Confirm the installation and the app will install.
Disabling the BigCommerce Built-in Reviews System
Log into your BigCommerce Admin page
Click on Advanced Settings
Click on Comments
Click the Built-in tab
Deselect the Product reviews checkbox
Click save
Note: Review Invitations are triggered once order status is changed to 'SHIPPED'
Boost reviews by sending requests to your past customers
Select the date range to go back to
Enable the automation for new and previous orders
Installation of widgets
Product Rating Snippet (Stars and Popup widget)
Go to BigCommerce Admin > Storefront > My Themes
Under your current theme, select Advanced > Edit Theme Files
Note: Your Store ID can be found highlighted in red on this page:
You will need to create a new Script within the Big Commerce script manager. Which you can learn how to do here.
Be sure to update STORE to match the ID of your REVIEWS.IO account. Your Store ID can be located here! Example below of this set-up:
Within the base.html, you'll need to put the Style and Script link URLs:
<!--REVIEWS.io Base Code START-->
<script>
var reviewsIOGetSkus = function (id, sku) {
return new Promise((resolve) => {
var allProductVariants = [];
fetch("/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer {{ settings.storefront_api.token }}",
},
body: JSON.stringify({
query:
`query SingleProduct {
site {
products (entityIds : [` + id + `]) {
edges {
node {
sku
variants {
edges {
node {
entityId
sku
}
}
}
}
}
}
}
}`,
}),
})
.then((res) => res.json())
.then(function (response) {
if (response) {
for (var i = 0; i < response.data.site.products.edges.length; i++) {
allProductVariants.push(
response.data.site.products.edges[i].node.sku
);
for (
var index = 0;
index <
response.data.site.products.edges[i].node.variants.edges.length;
index++
) {
allProductVariants.push(
response.data.site.products.edges[i].node.variants.edges[
index
].node.sku
);
}
}
allProductVariants.push(sku);
allProductVariants.push(id);
allProductVariants = allProductVariants.filter(function (v) {
return v !== "";
});
resolve(allProductVariants.join(";"));
}
});
});
};
</script>
<!-- default rating snippet code -->
<script src="https://widget.reviews.io/rating-snippet/dist.js"></script>
<link
rel="stylesheet"
href="https://widget.reviews.io/rating-snippet/dist.css"
/>
<script>
window.addEventListener("load", (event) => {
ratingSnippet("ruk_rating_snippet", {
store: "[STORE]",
color: "#FFD700",
usePolaris: true,
linebreak: false,
text: "Reviews",
});
});
</script>
<!-- REVIEWS.io Base Code END -->
Adding the element for the rating snippet to be output into
Now that we’ve enabled the widget JavaScript and styles, we need to add an element to the Product page and Category page where the rating snippet will be displayed.
Go to BigCommerce Admin > Storefront > My Themes
Under your current theme, select Advanced > Edit Theme Files
Locate the Product details template. This is usually located under templates > components > products > product_view.html
Paste the following element where you want the star rating and review count to appear. We recommend adding this below the Product Price for maximum visibility of your reviews to site visitors.
Common File Path: Templates → Components → Products → product-view.html
<div id='product_rating_snippet'></div>
Collection Page (rating Snippet)
Locate the Category listing page, which is usually called card.html and located under templates > components > products > card.html
<div id='product_rating_snippet-{{id}}'></div>
<script>
async function reviewsIODetails{{id}} () {
productRatingSkus = await reviewsIOGetSkus('{{id}}', '{{sku}}');
productRatingSnip = document.getElementById("product_rating_snippet-{{id}}");
productRatingSnip.innerHTML = `<div class='ruk_rating_snippet' data-sku='` + productRatingSkus + `'></div>`;
}
reviewsIODetails{{id}}();
</script>
Product Reviews Widget
Go to BigCommerce Admin > Storefront > My Themes
Under your current theme, select Advanced > Edit Theme Files
Locate the Product details template. This is usually located under templates > components > products > product_view.html
Paste the following element where you want the Product Reviews widget to appear
<div id="ReviewsWidget"></div>
Immediately below this, add the widget Javascript, Configuration and Styles. This example is stripped back to provide as little code as possible, additional configuration settings can be found under the Widget Library Page. Be sure to update STORE to be the ID of your REVIEWS.IO account.
<div id="product_rating_snippet"></div>
<div id="ReviewsWidget"></div>
<script src="https://widget.reviews.io/polaris/build.js"></script>
<script>
async function reviewsIODetails() {
productRatingSkus = await reviewsIOGetSkus(
"{{product.id}}",
"{{product.sku}}"
);
productRatingSnip = document.getElementById("product_rating_snippet");
productRatingSnip.innerHTML = `<div class='ruk_rating_snippet' data-sku='` + productRatingSkus + `'></div>`;
new ReviewsWidget("#ReviewsWidget", {
/* Your REVIEWS.io account ID and widget type */
store: "[STORE]",
widget: "polaris",
/* Content settings (store_review,product_review,questions). Choose what to display in this widget */
options: {
types: "product_review,questions",
/* How many reviews & questions to show per page? */
per_page: 5,
/* Product specific settings. Provide product SKU for which reviews should be displayed */
product_review: {
sku: productRatingSkus,
hide_if_no_results: false,
structured_data: {
category: "{{ product.category }}",
url: "{{product.url}}",
image: "{{product.main_image.data}}",
description: "{{product.meta_description}}",
offers: [
{
type: "Offer",
price:
"{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
priceCurrency: "{{ currency_selector.active_currency_code }}",
url: "{{ product.url }}",
availability:
"http://schema.org/{{#if product.out_of_stock}}OutOfStock{{else}}InStock{{/if}}",
priceValidUntil: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
.toISOString()
.split("T")[0],
},
],
brand: {
type: "Brand",
name: "{{ product.brand.name }}",
},
},
},
questions: {
hide_if_no_results: false,
enable_ask_question: true,
show_dates: false,
grouping: productRatingSkus,
},
/* Header settings */
header: {
enable_summary: true,
enable_ratings: true,
enable_attributes: true,
enable_image_gallery: true,
enable_percent_recommended: false,
enable_write_review: true,
enable_ask_question: true,
overall_rating_style: "outof5",
enable_sub_header: true,
},
/* Filtering settings */
filtering: {
enable: true,
enable_text_search: true,
enable_overall_rating_filter: true,
enable_ratings_filters: true,
enable_attributes_filters: false,
enable_sorting: true,
},
/* Review settings */
reviews: {
enable_share: true,
enable_helpful_vote: true,
enable_helpful_display: true,
enable_report: true,
enable_date: true,
enable_ratings: true,
enable_images: true,
image_thumbnail_size: "large",
enable_attributes: true,
enable_verified_badge: true,
enable_avatar: true,
enable_reviewer_name: true,
enable_product_name: true,
enable_reviewer_address: true,
reviewer_address_format: "country",
enable_reviewer_recommends: true,
},
avatars: {
enable_gravatar: true,
gravatar_fallback: "identicon",
},
},
/* Style settings: */
styles: {
"--base-font-size": "16px",
/* Button styles (shared between buttons) */
"--common-button-font-family": "inherit",
"--common-button-font-size": " 15px",
"--common-button-font-weight": " 500",
"--common-button-letter-spacing": " 0",
"--common-button-text-transform": " uppercase",
"--common-button-vertical-padding": " 10px",
"--common-button-horizontal-padding": " 25px",
"--common-button-border-width": " 2px",
"--common-button-border-radius": " 0px",
/* Primary button styles */
"--primary-button-bg-color": "#f2dfd5",
"--primary-button-border-color": "transparent",
"--primary-button-text-color": " #000",
/* Secondary button styles */
"--secondary-button-bg-color": "#ffffff",
"--secondary-button-border-color": "transparent",
"--secondary-button-text-color": "#58595b",
/* Star styles */
"--common-star-color": "#000000",
"--medium-star-size": "22px",
"--small-star-size": "19px",
/* Heading styles */
"--heading-text-color": " #333333",
"--heading-text-font-weight": " 300",
"--heading-text-font-family": " inherit",
"--heading-text-letter-spacing": "0",
"--heading-text-transform": "none",
/* Body text styles */
"--body-text-color": " #666666",
"--body-text-font-weight": "400",
"--body-text-line-height": "125%",
"--body-text-font-family": " inherit",
"--body-text-letter-spacing": "0",
"--body-text-transform": "none",
/* Input field styles */
"--inputfield-text-font-family": "inherit",
"--input-text-font-size": "14px",
"--inputfield-text-font-weight": "400",
"--inputfield-text-color": "#000",
"--inputfield-border-color": "rgba(0,0,0,0.2)",
"--inputfield-background-color": "transparent",
"--inputfield-border-width": "1px",
"--inputfield-border-radius": "0px",
"--common-border-color": "rgba(0,0,0,0.15)",
"--common-border-width": "1px",
"--common-sidebar-width": "190px",
/* Slider indicator (for attributes) styles */
"--slider-indicator-bg-color": "rgba(0,0,0,0.1)",
"--slider-indicator-button-color": "#000",
"--slider-indicator-width": "250px",
/* Badge styles */
"--badge-icon-color": "#000",
"--badge-text-color": "#000",
"--badge-text-transform": "none",
/* Author styles */
"--author-font-size": "inherit",
"--author-text-transform": "none",
/* Author avatar styles */
"--avatar-thumbnail-size": "60px",
"--avatar-thumbnail-border-radius": "100px",
"--avatar-thumbnail-text-color": " #000",
"--avatar-thumbnail-bg-color": "rgba(0,0,0,0.1)",
/* Product photo or review photo styles */
"--photo-video-thumbnail-size": "60px",
"--photo-video-thumbnail-border-radius": "0px",
/* Media (photo & video) slider styles */
"--mediaslider-scroll-button-icon-color": "#000",
"--mediaslider-scroll-button-bg-color": "rgba(255, 255, 255, 0.85)",
"--mediaslider-overlay-text-color": "#ffffff",
"--mediaslider-overlay-bg-color": "rgba(0, 0, 0, 0.8)",
"--mediaslider-item-size": "110px",
/* Pagination & tabs styles (normal) */
"--pagination-tab-text-color": "#000",
"--pagination-tab-text-transform": "none",
"--pagination-tab-text-letter-spacing": "0",
"--pagination-tab-text-font-size": "16px",
"--pagination-tab-text-font-weight": "400",
/* Pagination & tabs styles (active) */
"--pagination-tab-active-text-color": "#000",
"--pagination-tab-active-text-font-weight": "400",
"--pagination-tab-active-border-color": "#000",
"--pagination-tab-border-width": "3px",
},
});
}
reviewsIODetails();
</script>
To remove our BigCommerce App:
- Go to My Apps within Bigcommerce Admin
- Click uninstall on the REVIEWS.IO app
- Update any scripts that have been added!