helpscout templates

If you’re looking for design options aside from the default layout, Helpscout templates can give your help docs a professional look with more flexibility.

Helpscout is a powerful customer success tool, and is a leader in the market for good reason: they provide an all-in-one tool to ensure your customers are happy, helping you increase your revenue and customer retention. Their reviews are high, and they’re the go-to for companies big and small. They have a free trial and hundreds of positive testimonials from customers.

However, one challenge many users face is that they are limited to one layout choice for their help documentation. Currently, if you want a different layout without a theme, you’ll just have to customize the code yourself. While this is a constraint of sorts and can limit your freedom with the design, it can be overcome.

But this can be tedious: it means that either you’re a developer that needs to code this new design from the ground up, or hire one to help. The task itself involves overriding the code, editing it, re-uploading, and seeing how it looks live. If you aren’t happy with the changes, you’ll have to go back, re-edit the file, re-upload, and view it again until you’re happy.

Phew! If you don’t want to be limited to their existing layout, you’re not alone. Not to worry, though: there’s a workaround. And it doesn’t involve coding everything yourself.

That’s where Helpscout templates come in: they provide you with new layout options that you can start using today, without the need to code a new layout from scratch.

So, where can you find these themes? Let’s check out some options to enhance your support docs:

Blue Modern Theme

helpscout layoutsThis premade theme is modern, featuring icons and a user-friendly look and feel. The color scheme focus is blue, with the option to customize colors, icons, and background images as needed.

The template is mobile-friendly and includes documentation on how to make changes.

You can find this theme (and others) here.

Neutral Minimalist Theme

helpscout CSS templatesThis design is simple and UX-friendly.

If your company is looking for a more minimalist layout that is efficient and yet user-friendly, this one contains neatly-ordered collections of cards.

With design illustrations, you can create an engaging docs site with the included illustrations or your own. The illustrations are sourced from Undraw, so they are open source. This makes it easy to switch out the illustrations with any of the hundreds of illustrations of your choosing.

This template is mobile-friendly as well, with help documentation to help you customize it to your needs.

Find out more about it, along with other designs, here.

Creative control and freedom

So, now that you know that you can use the Helpscout tool without being limited to their default design settings with the help of premade docs themes, the possibilities are endless.

It’s just a matter of either finding a theme that works for you – or building one from scratch using front-end code.

As for specific turnaround time details, this greatly depends on your availability, coding experience, and budget.

In this article, I’ve ensured that all of the themes and layouts mentioned are easy to customize and include support.

They all include instructions on how to replace images, colors, background, and more. You can edit just about anything.

Prefer to go the DIY route?

If you’d prefer to code your layout from scratch, a good place to start is by taking a look at their styling tips guide.

If you know front-end code, you can build your own look and feel from the ground up. Or hire out a developer to do this work for you.

The amount of time this takes to create from scratch depends on the person, but expect anywhere between 1-7 days.

Of course, it all depends on your level of programming experience and time available.

To do it yourself, open up your favorite code editor on your computer.

From there, check out Help Scout’s style tips and guidelines to find where you want to edit.

In your code editor, input your new styles. Save as a stylesheet.

Then, in your browser, head to “Docs,” then to “Website Settings,” and then “Custom Code.”

Upload your code by selecting the file. There is no preview available, so you have to manually refresh your docs page in order to view all changes that you make. To edit or make tweaks, you’ll have to edit and then re-upload (and then refresh the page).

Regardless of whether you choose to do it yourself or choose a template, I wish you the best. Launching a support site is a big and important step that increases your customers’ happiness, and HS is an awesome tool to help you do so (and grow as a company).

Anyway, happy designing!