Writers Building Websites

Writers Building Websites

Add Reader Reviews to Book Template

Display dynamic reader reviews on your author website to enhance credibility and engage readers.

Last Updated: 10 December 2024

Introduction

In this lesson, you’ll learn how to display dynamic reader reviews on your Breakdance-powered author website using custom fields. By following a straightforward process of mapping star ratings, review titles, body text, and reviewer names, you’ll create a compelling, trust-building section that not only enhances your site’s visual appeal but also improves its search ranking. With these reader reviews in place, you can boost credibility, increase audience engagement, and ultimately drive more interest in your books.

Add a new Reader Reviews Section

  • Add a new section to the bottom of the template
  • Set to the SLIM SECTION PRESET
  • Add a H2 Heading
  • Name it Reader Reviews
  • Add 6 rem of spacing to the bottom margin

Reader Reviews

This next part is similar to what we had to do for the Other Retailer buttons. We are going to create a display area for the 1st review with data mapped to each element then repeat for the other two reviews.

Reader Reviews 1 Div

  • Add a Div
  • Set layout to horizontal, left aligned and vertical aligned
  • Set gap to 1 rem
  • Vertical at Phone Landscape
  • Left aligned when vertical
  • Save the design as Reader Reviews Div preset

Add a Star Rating

  • Click the plus icon inside the new div
  • Add a star rating element
  • Map the RATING to Books Field Group – Reader Reviews 1 – Reader Star Rating custom field.
  • Disable the Star Rating Label
  • Set the Star size to 25 pixels

Add Review Title

  • Add a heading element beside the Star Rating

Because we set the Div to horizontal all elements inside that div will appear in a row rather than stacked on top of each other.

  • Map the heading to the Books Field Group – Reader Reviews 1 – Review Title Custom Field
  • Set the tag to H5

Add Review Body Text

  • Add a text element outside of the Readers Review Div
  • Map this new text element to the Books Field Group – Reader Reviews 1 – Review Body Custom Field

Add Reviewer Name

  • Add another text element below the Review Body Text
  • Map this text element to the Books Field Group – Reader Reviews 1 – reviewer name custom field
  • Go to the design tab
  • Click on Typography
  • Then click the edit advanced icon
  • Change the Font Style to italics.
  • Go to spacing
  • Add 6 rem of bottom margin
  • Click save.

Reader Reviews 2

  • Duplicate the Reader Reviews 1 Div
  • Drag the duplicated Div underneath the first review
  • Relabel the Div to Reader Reviews 2 Div
  • Duplicate the Review Body and Review name fields
  • Drag underneath Reader Reviews 2 Div
  • Remap the elements to the 2nd review custom fields

We don’t need to do any styling to these elements as the designs were copied over in the duplication. 

  • Repeat for the 3rd set of review elements.
  • Click save

When I check the work in progress site in the browser and look at Adventure Danger I can see the public version matches what I’ve built in the template. When I look at one of the other books I can confirm the template is correctly pulling in the reviews for each post.

Summary

You’ve now seen how to integrate dynamic reader reviews into your custom Breakdance template, mapping each review’s elements to dedicated custom fields. This approach streamlines your design process, keeps your site’s look consistent, and ensures that fresh testimonials seamlessly update across your pages. By showcasing genuine reader feedback, you strengthen your author brand and give prospective readers the confidence through social validation they need to invest in your work.

Stephen Gordon
Stephen is the founder of Writers Building Websites and brings over a decade of experience as a freelance marketer specialising in publishing. He is also an author.

Index

Copyright © 2024 Writers Building Websites | All Rights Reserved.