Show Other Retailer Buttons on Your Author Website

Introduction

In this lesson, you’ll discover how to conditionally display an “Other Retailers” heading and purchase options on your author website using Breakdance. By leveraging dynamic fields and custom conditions, you’ll ensure that only relevant retailer buttons appear, streamlining your site’s design and enhancing the user experience. This approach not only keeps your layout clutter-free but also boosts SEO, ultimately helping you attract more readers and increase book sales.

First, a Heading

Before we add the other other retailers div for the buttons we need to add the Other Retailers heading with a condition to only show if we have said there are other retailers for this Book Post

• From inside the new div click on the plus icon
• Add a new H3 heading element
• Change the text to OTHER RETAILERS
• Click on the settings tab
• Add a new condition to show the element
  • Other > Dynamic Data > Other Retailers
  • Is
  • Yes

If I edit the Adventure Danger Book Post and scroll down to the Other Retailers selection field I can see that Adventure Danger is set to yes.

I’ll view that post and right there is the heading.

But when I look at Murder at theParsonage, the first book in Dirk’s Amazon exclusive cozy series, the Other Retailers Heading is not there. That’s because Other Retailers is Set to no.

Add the Other Retailers Div

Next we will add the Div to hold the other retailers buttons using a Grid layout. We want this Div to use the same conditions as the heading and only display when there are other retailers.

• Click on the BOOK DETAILS COLUMN
• Add a DIV Element
• Set Layout to Grid
• 4 items per row on desktop
• 2 items per row on tablet portrait
• 3 rem between items
• Add the same condition as the heading
  • Other > Dynamic Data > Other Retailers
  • Is
  • Yes

Add Other Retailer Button 1

• Add button
• Map the Button’s Text to Books Field Group – Other Retailer 1 – Other Retailer Button Text
• Map the Button’s link to Books Field Group – Other Retailer 1 – Other Retailer Button URL
• Style the Button as Secondary
• Add a Condition to only show this button if
  • Books Field Group – Other Retailer 1 – Other Retailer Button URL
  • Is not empty
• Apply Conditions

Add Other Retailer Button 2

We’re going to repeat that process for Other Retailer Button 2.

• Add button
• Map the Button’s Text to Books Field Group – Other Retailer 2 – Other Retailer Button Text
• Map the Button’s link to Books Field Group – Other Retailer 2 – Other Retailer Button URL
• Style the Button as Secondary
• Add a Condition to only show this button if
  • Books Field Group – Other Retailer 2 – Other Retailer Button URL
  • Is not empty
• Apply Conditions

And I’ll repeat this process for all four buttons and save the template.

When I check the live Adventure Danger book post I see that I have the heading and all the buttons as expected. When I look at any of the Cosy Mystery series I only see the Kindle Unlimited Button.

Summary

You’ve now learned how to add conditional headings and retailer buttons to your author website, ensuring that visitors only see relevant buying options. By leveraging Breakdance’s conditional logic, you’ve refined the user experience, streamlined your layout, and improved site discoverability. With these skills, you can offer a tailored browsing journey that boosts engagement, enhances SEO, and encourages more book sales.