How do I customise & realign my widgets & rating badges on different pages of my site?

How do I customise & realign my widgets & rating badges on different pages of my site?

Note: This feature is only available for Professional and Premium Tier Brand Management customers.

Ensure that you have successfully integrated your e-commerce website with the Brand Management Platform via the ProductReview Connect app before going through the steps below. Find out more about how to integrate here.

 

Different customisations on your rating badges and review widgets can be applied to different sections of your site by adding new Configuration settings:

Step 1: Log into your Brand Management Dashboard and navigate to your e-commerce platform catalog. 

mceclip0.png

Step 2: Go to the widgets page & select the desired widget that you would like to add to your site (in this case we are using the inline rating badge as an example).

Step 3: Go to the Configuration area of the Settings section. The original settings will be called 'default'. 

Step 4: Click on the green '+' button to create a new configuration. You will be asked to name this new Configuration.

Step 5: Once you've created this new Configuration, you can assign specific settings to it. 

mceclip4.png

Step 6: Save these settings and add the Step 1 code to the necessary section of your site (if you haven't already) & the Step 2 code to the relevant page template. 

Step 7: Repeat Step 4 to 6 to add different customisations for your widgets and/or rating badges across your website.

 

Example: You want to use your inline rating badge in two different sections of your site: the product page and the collections page.

- On the product page, you would like to use the inline rating badge and have it aligned to the right.

- On the collections page, you would like to use the inline rating badge and have it aligned to the centre with 10px top and bottom spacing. 

In this case, you would need to create two different Configurations. One for the product page and one for the collections page.

The product page configuration (which you have called 'product-page') has Alignment set to Right. This means in the Step 2 code, there should be an additional line that says: "alias":"product-page",

The collections page configuration (which you have called 'collection-page') has Alignment set to Center, Top spacing set to 10px, and Bottom spacing set to 10px. This means in the Step 2 code, there should be an additional line that says: "alias":"collection-page",