Having a banner appear only on the homepage

Developing with Prismic
1

Hi there,

I currently have a web app using the same reusable page type for my home/about/contact/services pages. I would like to have a banner that appears only on the homepage. How would I go about this with Prismic giving my page setup?

Thanks in advance!

2

Conditionally render if page.uid===‘home’

{
  page.uid === ‘home’ && (
    <YourBannerComponent />
  )
}

Does that help?

1 Like
4

Hi Odelia,

In this case, I would recomend using a separate page type for the homepage. You certainly could use the same page type for the homepage and conditionally display the banner. And @nf_mastroianni's recommendation would work perfectly for that :ok_hand:

However, that might create a negative user experience for your editors if they don't understand when, where, or why the banner will appear — of even if they do understand, but must leave an unnecessary "banner" field blank on most of the documents.

Having said all of this, I can think of one alternative implementation. You could create a singleton custom type called "Homepage Banner," and store the banner content there. It could theoretically also include an "on/off" toggle. Then, in your homepage component, you would query the homepage document and also the homepage banner document.

Let me know if that helps :slight_smile:

Sam

6

Thanks! :)

7

Hi, does this work as a rolling banner on the top of the home page?

8

Hi @kristoffer,

Yes, both implementations would work with a rolling banner. You'd have to control its behavior (the rolling part) in your code, but for its content, you can make it its own singleton type and/or do as @nf_mastroianni suggested for the display :slight_smile: