Add Book Ratings to Your Template with Custom Fields

Introduction

I feel like this needs a bit of drumroll. This is the first instance of using data from the custom fields we set up in the previous module! Ok, maybe that’s just me but this is a big deal.

Adding a recognisable, highly visual and easy to update ratings system to the Single Book Template is one of the many CONVERSION RATE enhancements that will move visitors into subscribers, readers and fans.

Seeing how your book is rated and how many reviews it has is yet another mental microtransaction to propel them forward to taking the next steps, especially for genre fans. 

It’s why AMAZON uses this approach and why I’ve copied their layout for this div as much as possible.

Add the Book Ratings Div

• Click on the BOOK TITLE
• Add a DIV element

A DIV, short for document division, is a container for other elements. 

In HTML, both div and section are HTML elements that are used for grouping and organising content on a web page. However, there is a subtle difference between the two.

A div is a generic container element that does not carry any semantic meaning. It is mostly used for grouping related elements together and applying styling to them via CSS.

A section, on the other hand, is a semantic element that represents a specific section of a web page with a distinct topic or purpose. For example, in the SINGLE BOOK Template I’ll use a section for the HERO (above the fold) area, a different section for the BOOK DESCRIPTION, another section for the reviews and so on.

We are going to use this Div as a container to display the 3 Ratings elements in our Single Book Template

1. The AVERAGE RATING TEXT element.
2. The AVERAGE RATING STAR ELEMENT
3. And a TOTAL RATINGS TEXT ELEMENT

We will finish setting up the Div before adding the elements.

• From the div element’s design tab click on LAYOUT
• Set LAYOUT to HORIZONTAL so that all three elements are in a row on the screen
• Make the content inside the Div LEFT aligned
• With the vertical alignment set to MIDDLE
• Set the GAP between elements inside the Div to 1 rem
• Save this as a PRESET called BOOK DETAILS DIV.

Add the Average Ratings Text Element

• Click on the plus icon inside the Book Ratings Div
• Add a text element
• Hover over the text label
• Click on the database icon
• Choose AVERAGE RATING from the Dynamic DATA SELECTOR

We will see the rating pulled from the post we set up in the previous module. If we change which book we are previewing you’ll see the data changes to match what was added to the post.

Add the Average Rating Stars Element

• Add a STAR RATING element next to the Average Ratings Text Element
• Hover over the RATING label inside the CONFIGURATION TAB
• Click the DATABASE ICON
• Choose the AVERAGE RATING data source again
• Disable the SHOW LABEL option
• Go the DESIGN TAB
• Go to STARS
• Set Size to 20 pixels

Add the Total Ratings Text Element

The final element in the Rating section Div is the Total Ratings Text. As well as pulling the data from the custom field we are going to append some text to the custom field as well.

• Add a text element
• Hover over the text label
• Click on the database icon
• Choose TOTAL RATINGS from the Dynamic DATA SELECTOR

We want to help the reader understand these numbers at first glance so I’m to append a single word to the Total Ratings number to explain it.

• Go to the CONFIGURATION TAB of the TOTAL RATINGS TEXT ELEMENT
• Click the DOWNWARD POINT ARROW ICON beside the TOTAL RATINGS DYNAMIC DATA tag.
• Click on ADVANCED
• Under APPEND add a space then ‘reviews’

Amazon uses ‘ratings’ but I feel reviews is a better fit for book but you can choose any term you like.

• Click SAVE

Summary

This lesson showed you how to create a dynamic ratings section for your Single Book Template using custom fields. By adding a container for average ratings, star ratings, and total reviews, you provide visitors with clear, engaging feedback about your books. These elements, styled for visual clarity and reader understanding, enhance trust and encourage conversions, helping to turn visitors into loyal readers and fans.