The REVIEWS.IO BigCommerce application allows you to automate your review collection for service and product reviews.
Requirements
⭐️ Available on Start-Up, Grow, and Plus plans
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:
<script src="https://widget.reviews.co.uk/rating-snippet/dist.js"></script>
<link rel="stylesheet" href="https://widget.reviews.co.uk/rating-snippet/dist.css" />
Within the script manager you'll then need to put the rating snippet script:
<script>
ratingSnippet("ruk_rating_snippet", {
store: "ENTER YOUR STORE ID HERE",
color: "#0E1311",
linebreak: true,
usePolaris: true,
text: "Reviews"
});
</script>
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 that the rating snippet will be displayed in
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.
<div class="ruk_rating_snippet" data-sku="{{ product.sku }}"></div>
Locate the Category listing page, this is usually called card.html and located under templates > components > products > card.html
Paste the following element where you want the star rating and review count to appear.
<div class="ruk_rating_snippet" data-sku="{{ product.sku }}"></div>
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.
<script src="https://widget.reviews.co.uk/polaris/build.js"></script>
<div id="ReviewsWidget"></div>
<script>
new ReviewsWidget("#ReviewsWidget", {
// Your REVIEWS.IO Store ID and widget type:
store: "[STORE]",
widget: "polaris",
// Content settings (store_review, product_review, third_party_review, questions). Choose what to display in this widget:
options: {
types: "product_review,questions",
lang: "en",
// Possible layout options: bordered, large and reverse.
layout: "",
// How many reviews & questions to show per page?
per_page: 15,
store_review: {
hide_if_no_results: false,
},
third_party_review: {
hide_if_no_results: false,
},
product_review: {
// Display product reviews - include multiple product SKUs separated by Semi-Colons (Main Identifier in your product catalog)
sku: '{{product.sku}}',
hide_if_no_results: false,
},
questions: {
hide_if_no_results: false,
enable_ask_question: true,
show_dates: true,
// Display group questions by providing a grouping variable, new questions will be assigned to this group.
grouping: "{{product.sku}}",
},
header: {
enable_summary: true, // Show overall rating & review count
enable_ratings: true,
enable_attributes: true,
enable_image_gallery: true, // Show photo & video gallery
enable_percent_recommended: false, // Show what percentage of reviewers recommend it
enable_write_review: true, // Show "Write Review" button
enable_ask_question: true, // Show "Ask Question" button
enable_sub_header: true, // Show subheader
rating_decimal_places: 2,
},
filtering: {
enable: true, // Show filtering options
enable_text_search: true, // Show search field
enable_sorting: true, // Show sorting options (most recent, most popular)
enable_overall_rating_filter: true, // Show overall rating breakdown filter
enable_ratings_filters: true, // Show product attributes filter
enable_attributes_filters: true, // Show author attributes filter
},
reviews: {
enable_avatar: true, // Show author avatar
enable_reviewer_name: true, // Show author name
enable_reviewer_address: true, // Show author location
reviewer_address_format: "city, country", // Author location display format
enable_verified_badge: true, // Show "Verified Customer" badge
review_content_filter: "undefined", // Filter content
enable_reviewer_recommends: true, // Show "I recommend it" badge
enable_attributes: true, // Show author attributes
enable_product_name: true, // Show display product name
enable_review_title: undefined, // Show review title
enable_replies: undefined, // Show review replies
enable_images: true, // Show display review photos
enable_ratings: true, // Show product attributes (additional ratings)
enable_share: true, // Show share buttons
enable_helpful_vote: true, // Show "was this helpful?" section
enable_helpful_display: true, // Show how many times times review upvoted
enable_report: true, // Show report button
enable_date: true, // Show when review was published
},
},
// Translation settings
translations: {
"Verified Customer": "Verified Customer",
},
// Style settings:
styles: {
// Base font size is a reference size for all text elements. When base value gets changed, all TextHeading and TextBody elements get proportionally adjusted.
"--base-font-size": "16px",
// Button styles (shared between buttons):
"--common-button-font-family": "inherit",
"--common-button-font-size": "16px",
"--common-button-font-weight": "500",
"--common-button-letter-spacing": "0",
"--common-button-text-transform": "none",
"--common-button-vertical-padding": "10px",
"--common-button-horizontal-padding": "20px",
"--common-button-border-width": "2px",
"--common-button-border-radius": "0px",
// Primary button styles:
"--primary-button-bg-color": "#0E1311",
"--primary-button-border-color": "#0E1311",
"--primary-button-text-color": "#ffffff",
// Secondary button styles:
"--secondary-button-bg-color": "transparent",
"--secondary-button-border-color": "#0E1311",
"--secondary-button-text-color": "#0E1311",
// Star styles:
"--common-star-color": "#0E1311",
"--common-star-disabled-color": "rgba(0,0,0,0.25)",
"--medium-star-size": "22px",
"--small-star-size": "19px",
// Heading styles:
"--heading-text-color": "#0E1311",
"--heading-text-font-weight": "600",
"--heading-text-font-family": "inherit",
"--heading-text-line-height": "1.4",
"--heading-text-letter-spacing": "0",
"--heading-text-transform": "none",
// Body text styles:
"--body-text-color": "#0E1311",
"--body-text-font-weight": "400",
"--body-text-font-family": "inherit",
"--body-text-line-height": "1.4",
"--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": "#0E1311",
"--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": "#0E1311",
"--slider-indicator-width": "190px",
// Badge styles:
"--badge-icon-color": "#0E1311",
"--badge-icon-font-size": "inherit",
"--badge-text-color": "#0E1311",
"--badge-text-font-size": "inherit",
"--badge-text-letter-spacing": "inherit",
"--badge-text-transform": "inherit",
// 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": "#0E1311",
"--avatar-thumbnail-bg-color": "rgba(0,0,0,0.1)",
// Product photo or review photo styles:
"--photo-video-thumbnail-size": "80px",
"--photo-video-thumbnail-border-radius": "0px",
// Media (photo & video) slider styles:
"--mediaslider-scroll-button-icon-color": "#0E1311",
"--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": "#0E1311",
"--pagination-tab-text-transform": "none",
"--pagination-tab-text-letter-spacing": "0",
"--pagination-tab-text-font-size": "16px",
"--pagination-tab-text-font-weight": "600",
// Pagination & tabs styles (active):
"--pagination-tab-active-text-color": "#0E1311",
"--pagination-tab-active-text-font-weight": "600",
"--pagination-tab-active-border-color": "#0E1311",
"--pagination-tab-border-width": "3px",
},
});
</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!