Salesforce Communities comes with a lot of out-of-the-box features which will aid in creating visually stunning websites for your customers. With more and more emphasis on self-service, I’ve seen a sharp spike in Communities projects over the last couple of years. So, all the more reason to document some of my learnings.

Here are a few tips to make your Salesforce Community more exciting and personalized!

1.Add a background image for your Login page

How? Go to your community builder, open Themes, and add an image.

Bonus tip: in the above screenshot, you will see that there is a header image and company logo. Add those in as well and I will show you the results in the following screenshot.

2. Add Login Logo

Now, this part is annoying that you can’t set it right from the builder. You have to go out of the builder and go to ‘Administration’ > ‘Login & Registration’ and then add your logo.

3. Personalize Welcome Message

Use this list of merge fields to personalize your welcome message. I know there are ideas of using ‘Good Morning’ and ‘Good Evening’ based on the logged-in user’s system time, but that requires custom code. But adding the first name is easy enough. 

4. Add Tile Navigation for Front & Center Items

I like using the default navigation up top for all the items but tile navigation kicks things up a notch. You can create lovely tiles, display images, and get users’ attention to the most important things they will be doing in the community.

There are a few options here as to what you can do – Full with overlay, Full with no overlay, or Partial. All these are options as to how you want to view the label text on the tiles.

Also, in my developer org, I am using the same default navigation for both tiles and the navigation up top but I would strongly recommend that you create separate navigation, or else you will be crowding your tiles, and there is no point in duplicating navigations.

How to add images to your navigation items?

5. Color Code Calendars

I don’t have an image for this one but the AppExchange package shows this nice-looking calendar for communities. 

Yes, there is an out-of-the-box calendar component, but if you want color coding for your events (like OOO to be red, scheduled events to be blue, and availability to be green), you can most certainly use this AppExchange app. You can use the event type field and add in some light automation to specify the colors. Again, all declarative, no code.

Mobile Tips

1. Hide Tile Navigation in Mobile

For desktop, it’s super nice to have tiles but on mobile, it takes up too much space. For that reason, you can hide the tile navigation by switching to Mobile view and clicking the little eye icon to hide it:

It’s easy to hide stuff in mobile, but it isn’t easy to hide stuff on desktop. For example, let’s say you want something to display only for mobile, then you’d need to use CSS to hide it in the desktop version.

The exact use case that I’ve come across with a client is that they loved tiles for desktop but wanted to use something that doesn’t consume all that real estate for the mobile version. I ended up using an AppExchange app for the same and it turned out to be beautiful buttons but hiding them for desktop turned out to be rather painful CSS, especially if you move things around in the builder, you will realize that the CSS which uses position attributes will break. So be careful. I hope Salesforce makes it easier to hide stuff on desktop just like it made it for mobile.

Anyway, here’s the AppExchange app that deserves a special mention for the buttons.

And here’s an idea to upvote so that they make hiding in the desktop so that you don’t have to mess with CSS.

These are some of the items that I’ve used recently and clients have loved the results. I hope you can use them too!