Help Centre

Rating-System offer a fantastic widget that allows customers to leave a star-rating and written review on your product. This is a great way to show more information about your product and get an insight into your products popularity and your service.

In this guide we will be looking at how to create this widget and add it to your product.


How to create your Rating-System widget

Firstly, to create your Rating-System widget you will need to visit their website here. You will then need to create an account by selecting the “Create Account” button in the top right-hand corner. Once you have created an account with Rating-System you can start designing your own rating widget!

To get started please follow these steps:

1. Click “Setup” in the left-hand menu.
2. Choose “Create New Rating Box” from the drop-down menu.
3. You will then be taken to the widget builder.
4. At the top change the “I would like to use” option to “Read Reviews and Submit Reviews separately”.
5. In the top right-hand corner click on the “Simple Styling” option.
6. Under the “Load Pre-built Template” title choose either the “Diamond” or “Ruby” option. These are different templates for your review widget and will update your widget preview straight away when you select them.

Now your widget setup is completed you can begin customising your widget. Here are some of the areas of your widget you can customise with Rating-System, found on the left-hand side of your widget builder:

“Step-1: Main Container”

This area determines the look of your “Main Container” of your widget. Here you can set universal colours and font sizes that will cover every area in your widget.

• Summary

Here you can choose the “Title” of your review widget, for example “Please leave a review on our product”. You can also choose a “Description”, such as “Write your feedback in the box below”.

• Background

If you select the colour circle next to “Colour (HEX CODE)” you can choose a background colour for your widget. This is perfect if you would like it to match your body background colour on your website. Alternatively, you can upload an image as a background by clicking the upload icon next to “Image URL”. You can then choose the position of this image and whether you would like this image to be repeated.

• Width and Height

Here you can choose the width and height of your widget, so you can make sure it fits into the width if your page.

• Font

Here you can choose what font type and size you would like your reviews to display as.

“Step-5: Submit Ratings and Review Box”

This deals with the “Write Review” area of your widget, where the customer will submit their review. To see this please click on the red “Write Review” link in your widget preview.

• Appearance

Here you can go through the menu to choose different display options for your widget. For example, in “Background” you can change the colour of your background whereas in “Border” you can format a border for this area.

• Rating Dimensions

Here you can determine what information you would like the customer to rate by going to your “Dimensions” area and add new rating options into the “Add New” field and choosing the rating “Type”. It also allows you to remove current options by clicking the “Delete” icon next to them or move them by selecting the up and down arrows. If you then go to your “Graphics” area you can choose what type of image from the list you wish to use to represent the customers opinion. Once you have chosen this if you then click “Preview” you can see what these would look like on your widget!

• Fields

In this area you can choose the fields you wish the customer to fill in before they review in the “Fields” area, for example “Email Address” “Name” etc. You can also go to the “Submit Button” area to change the background colour and font size of your “Submit” button. This is great, as it means you can completely customise this to fit it with your colour scheme on your website!

“Step-6: Read Existing Reviews Box”

This deals with the “Read Reviews” area of your widget, where your past customer reviews appear. To see this please click on “Read Reviews” in your widget preview.

• Title

Here you can change the colour and font size of the “Titles” of your customer's review. For example, their title may be “Amazing prices and services”, which is something you may want to be a different colour to stand out.

• Review Text

Similar to the “Title” area, here you can modify the actual review text from your customer. This is where they would have gone into more detail about the product as so you may wish to have this as a bigger font size or a different colour from your “Title”.

• Rating Dimensions

The changes will affect the actual points the customer is reviewing. So, for example, if you change the font colour of this you will see the Dimension Types you chose earlier change colour: “Quality”, “Reliability” etc. Here you can also change the font size and weight of this text so it could be “Bold” or in “Italics”.


When you have completed designing your widget select the “Save” button in your widget editor, which is next to the “Preview” button.

How to add your Rating-System widget to your product

To add your widget to your Create account please follow these instructions:

1. Go to “Setup” in the menu of your Rating-System account.
2. Click on “Active Widgets” from the drop-down menu.
3. Under the widget you have created select the “Rate and Review Box Combo” option.
4. Copy the code in the box.
5. Add this to your Create site as a HTML Fragment by following the steps in our guide here.

If you would like to add this to a product in your “Shop” please ensure you add this HTML Fragment to the “Long Description” of your shop product. To do this please follow these steps:

1.  Go to your “Shop” area on the Top Menu.
2. Click on the category your product is within.
3. Click the “Edit Product” icon next to the product you wish to add the review widget to.
4. Scroll down to the “Long Description” box.
5. Click in this box where you would like this HTML Fragment.
6. Select the “HTML” button in the Editor Toolbar.
7. Choose your HTML Fragment from the drop-down list.
8. Click “Insert”.
9. Save your changes.