Skip to main content
Squarespace Integration

Integrate REVIEWS.IO and Squarespace

Mollie Herbert avatar
Written by Mollie Herbert
Updated over 3 months ago

A step by step guide on how to connect your Squarespace store with your REVIEWS.IO account.


Requirements

⭐️ Available on all REVIEWS.IO plans

βœ… Squarespace Advanced Commerce Plan


Navigation πŸ“

  • Log into your REVIEWS.IO account

  • Navigate to Integrations

  • Navigate to Squarespace.


Instructions βš™οΈ

From the Squarespace integration page, select 'Authenticate with Squarespace',

All all permissions REVIEWS.IO requires in your account by selecting 'Allow'.

You will then be notified that your Squarespace store is integrated successfully, as per below:


Installing Product Review Widget

Step 1. Open Settings

Open your website on Squarespace and in the menu, select Settings

Step 2. Advanced Settings

Now click to view the Advanced Settings

Step 3. Code Injection

Now click to view the Code Injection page.

Step 4. Add Footer Code

<script src="https://widget.reviews.co.uk/rating-snippet/dist.js"></script>
<script src="https://widget.reviews.co.uk/polaris/build.js"></script>
<link rel="stylesheet" href="https://widget.reviews.co.uk/rating-snippet/dist.css" />
<style>
.ruk_rating_snippet .ruk-rating-snippet-count {
font-family: inherit
}
</style>
<script>
var urlKey, skuTitle, ratingBlocks, beforeReviewsWidget, starColor;
renderReviewsRatingStars = function() {
ratingSnippet("ruk_rating_snippet", {
store: urlKey,
color: starColor,
linebreak: false,
usePolaris: true,
text: "Reviews",
customLookupSkuFallback: true,
useCustomLookup: true
});
};
renderReviewsCombinedWidget = function() {
var product_sku = alphaWithNoVowels(skuTitle.first().text());
if ($('#ReviewsCombinedWidget').length) {
new ReviewsWidget('#ReviewsCombinedWidget', {
store: urlKey,
widget: 'polaris',
options: {
types: 'product_review',
per_page: 5,
product_review: {
lookup: product_sku,
hide_if_no_results: false,
},
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',
image_thumbnail_size: 'large',
enable_sub_header: true,
},
filtering: {
enable: true,
enable_text_search: true,
enable_overall_rating_filter: true,
enable_ratings_filters: true,
enable_attributes_filters: false,
enable_sorting: true,
},
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'
},
},
styles: {
'--base-font-size': '16px',
'--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-bg-color': '#0E1311',
'--primary-button-border-color': '#0E1311',
'--primary-button-text-color': '#ffffff',
'--secondary-button-bg-color': 'transparent',
'--secondary-button-border-color': '#0E1311',
'--secondary-button-text-color': '#0E1311',
'--common-star-color': starColor,
'--common-star-disabled-color': 'rgba(0,0,0,0.25)',
'--medium-star-size': '22px',
'--small-star-size': '19px',
'--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-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',
'--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-bg-color': 'rgba(0,0,0,0.1)',
'--slider-indicator-button-color': '#0E1311',
'--slider-indicator-width': '190px',
'--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-font-size': 'inherit',
'--author-text-transform': 'none',
'--avatar-thumbnail-size': '60px',
'--avatar-thumbnail-border-radius': '100px',
'--avatar-thumbnail-text-color': '#0E1311',
'--avatar-thumbnail-bg-color': 'rgba(0,0,0,0.1)',
'--photo-video-thumbnail-size': '80px',
'--photo-video-thumbnail-border-radius': '0px',
'--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-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-tab-active-text-color': '#0E1311',
'--pagination-tab-active-text-font-weight': '600',
'--pagination-tab-active-border-color': '#0E1311',
'--pagination-tab-border-width': '3px',
},
});
}
}
alphaWithNoVowels = function(string) {
return string.replace(/[^b-df-hj-np-tv-z]/gi, '').substr(0, 20);
};
attachProductRatingBlocks = function() {
urlKey = 'my-company';
starColor = '#f47e27';
skuTitle = jQuery('.ProductItem-details-title');
ratingBlocks = jQuery('.ProductItem-details-title, .grid-title, .ProductList-title, .summary-title-link');
beforeReviewsWidget = jQuery('.ProductItem-additional');
if (skuTitle !== undefined) {
ratingBlocks.each(function() {
if (!jQuery(this).hasClass('mobile')) {
var product_id = alphaWithNoVowels(jQuery(this).text());
jQuery(' < div ' + (jQuery(this).is("a") || jQuery(this).is("div") ? '
style = "text-align: center"
' : '
') + '
class = "ruk_rating_snippet"
data - sku = "' + product_id + '" > < /div>').insertAfter(jQuery(this)); } }); } jQuery('#ReviewsCombinedWidget').remove(); if (beforeReviewsWidget.length) { beforeReviewsWidget.append(' < div id = "ReviewsCombinedWidget" > < /div>'); } setTimeout(function() { renderReviewsRatingStars(); renderReviewsCombinedWidget(); }, 400);}if (typeof window.jQuery === "undefined") { var head = document.getElementsByTagName("head")[0]; var script = document.createElement('script'); script.onload = function() { attachProductRatingBlocks(); } script.type = 'text/javascript
'; script.src = '
https: //ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; head.appendChild(script);} else if (typeof window.jQuery === "function") { attachProductRatingBlocks();}
</script>

Your product reviews will now appear directly for your products as a rating snippet, and Polaris widget on your product pages.

Did this answer your question?