How can I change the information a user sees based on whether they are signed in or not?

In my header, I want a button at the top right that says “Login / Sign up” that takes the user to a page with a sign in form on one side and an account creation form on the right.

The problem is, I want to display other information in the top right if the user is signed in. It doesn’t make sense to have a sign in button there if they are already signed in. I’d like to display the current user’s name, number of items in their cart with a clickable ‘go to cart’ button.
- All of these things I know how to do in Bubble, I just don’t really know how to make these things show under certain conditions. As someone who formerly created websites solely with code, my first instinct is to create an if statement but from what I can see, there isn’t really a way to do that here.

Should I create multiple headers? Perhaps Header A is for users not signed in and Header B is for users that are? Is there a way to show different headers based on whether or not a user is currently signed in?

Let me know if I’m missing something and thank you in advance for any input you might be able to give me. :slight_smile:

Using conditions, you can specify an element to show based on whether the user is signed in or not.

1 Like

Should something like this work?

Yep, that looks correct. Tell me if you have any issues.

My only concern is that the string of text is exactly where I want other information displayed and I feel like overlaying it would not only be bad SEO, but be messy to look at in the design phase as well… Can I have multiple headers that show based on different conditions?

Not sure if it tagged you in my most recent reply as I replied to myself, so I’m just putting this here so you get a notification. Sorry to be a bother, I really appreciate your help.

If you put any other elements on whilst the user is logged in, the button shouldn’t be visible, meaning you can put in other elements. If you want, I could show you this in an example app.

Cole, you might want to examine the login/signup stuff that Bubble includes in their helper app. It shows all of this. Just go make a new app and do this, instead of starting with a blank page:

The app that’s created that way has all this functionality pre-built and inspecting it is quite helpful. Note buttons on right in preview/run mode:

The general answer to your question though is as @marcusandrews points out: conditional tab on any element