...
We all know what star ratings are ⭐ ⭐ ⭐ ⭐ ⭐ , preezie has the ability to display them on your journey results page for each product.*
| Note |
|---|
Please note this only works if your product feed is populated with rating data. |
At this stage we do not display the count of reviews, purely the stars displaying the score.
What it looks like:
...
How to implement:
*Please note this only works if your product feed is populated with rating data.
...
On your lefthand navigation panel find Product configuration > Product attributes
Select your database from the dropdown
+ Create new product field
Field name = the star rating named within your feed
Value type = integer
tick Star Rating Field checkbox
You’ll then be asked for a Rating Max Value
Max value field reflects the max value of the rating scale coming from the feed.
The max value will be considered 100% to later be shown across 5 stars
Different feeds score their ratings in different value ranges eg. of 5, 10, 50, 100 etc. This is how to tell the preezie system what value defines 100% in your feed
Turn on
...
On the workflow select Actions > Settings > Edit
Navigate to the tab UI Result & behaviours
Midway down the page find and select the checkbox Show star ratings
Scroll down and click Save.
Open Test Guide Widget to style here you can add a:
Filled star colour
Empty Star outline colour
Couple things to note
Star Rating positioning sits under product name/ above price (please see supporting notes for rationale)
Standardised/same sizing cross all devices
Supporting notes
...
Style
On the workflow select Actions > Settings > Test Guide Widget
Expand the RESULTS tab
Scroll and expand the Star rating tab
Here you can set the configurations
Filled star colour
Star outline colour
To note
Star Rating positioning always sits above price (please see supporting notes for rationale)
Standardised/same sizing cross all devices
Behavioural psychology, Kris White - Supporting notes:
”Consumer and user research demonstrates a consistent pattern for English readers – from top left to bottom right (See Gutenberg diagram https://vanseodesign.com/web-design/3-design-layouts/ ). Webpages typically create visual hierarchy based on this principle, with the higher order information required to make sense of subsequent information placed at the top.
...