When you’re selling a theme, its demo is your sales pitch. If the demo falls short in some way, it’s doing a disservice to the theme and will lead to a loss of sales. If your theme includes hundreds of features, but buyers can’t see them in action, you may as well have no features at all.
This guide will cover nine best practices to help you demo your theme as well as possible.
Here’s what we’ll be looking at:
- Pages to Include in Your Demo
- Menu and Navigation
- Layouts
- Highlight Hidden Features
- Use Authentic Content
- Include a Front-end Option Switcher
- Communicate With Potential Buyers
- Optimize Your Demos
- Finalization
and Testing
1. Pages to Include in Your Demo
None of these pages are required as such, but highly
recommended.
Home pages: Create at least three unique home pages. The more home pages you create, the more
layouts you can demonstrate.
Inner pages: Include inner pages (or “sub pages”), like “About us”, “Services”, “Pricing”, “Team”,
“FAQ” etc. It is highly recommended to have at least two versions of the each inner pages. This gives the client choices and lets you show off a range of page elements without stuffing too much into a single layout.
Elements: Moving on from the last point, it’s a generally accepted best practice to demonstrate theme elements on
separate pages. You don’t need to make super complex pages to present your
elements, just design a simple reusable page template and use it for each of your
elements.
If you have a small list of elements with simple options you could present them on a single page, or group them into suitable collections. Just make sure you use logical
organization and grouping. You’ll notice the globax theme elements menu for example. The elements are grouped into typography elements, UI elements, social etc.
Features: One of the most visited pages
in any given demo is the features page. Be sure to present as many features as possible in a clean, simple, and eye-catching way.
Your buyers will find it helpful if you group your features in some kind of hierarchy. For example: key features, main features, and additional features. For example:
- Key features
- Visual
composer included - Revolution
slider included - Advanced
theme options panel - WooCommerce
compatibility
- Visual
- Main features
- Multilingual
support - One click
demo import - RTL support
- 10+ header
demos - 100+ custom
elements - Multi layout
blog
- Multilingual
- Additional features
- Single page
and multipage variants - Responsive
and retina ready - Advanced typography
- Fontawesome
icons included - Widgets in megamenu
- Single page
Present these features as visually as possible. Too much descriptive text can overwhelm buyers.
2. Menu and Navigation
Your demo navigation should be as
intuitive as possible. Make sure it’s 100% functional on all screen sizes. Complex navigation can often “break” on smaller viewports.
Try not to overload your main
navigation, and make sure the combination of navigational elements are aesthetically pleasing. An unbalanced navigation won’t do your demo justice.
3. Layouts
If you want to increase your theme’s chances of selling, consider making it multi-layout. This refers to all the
pages, including posts and custom post types. Clients love being able to choose
between layouts. For example, for a blog archive you might consider a grid, a list, and a full
layout. If your theme offers a sidebar, demonstrate these things with the sidebar turned on and off.
Make sure you can demonstrate all these various layouts
in a single WordPress installation. If that’s not possible you should reconsider your theme’s logic.
4. Highlight Hidden Features
Build your demo using all your theme’s features! Yes! If your theme features beautiful on-page
scroll animations, use them in your presentation. If your theme includes a
megamenu with widgets in the navigation, create and organize your navigation
with these features. If you have icon support in your header menu items, add some
icons!
5. Use Authentic Content
One of the most difficult tasks when presenting a theme is making it like a “real” website. There are plenty of dummy text generators like lorem
ipsum, but I highly recommend using authentic text as much as possible. And for the
images, audio, video, and other assets, I recommend using high quality assets.
The web might comprise mainly of text, but a single bad image on the page will seriously harm your efforts. The same applies to typography. Use quality fonts to show things in the best light possible.
6. Include a Front-end Option Switcher
I don’t remember when it
became standard to use a front-end option switcher for theme demos,
but it is very much expected nowadays. Unsurprising really, because users want
to experiment and visualize their future website as well as possible before buying a
theme.
Some authors offer a back-end login with a temporary username for complete
testing (with plugins like temporary-login-without-password)
others highlight the main options in the front-end option switcher without
admin access. Both options are perfectly useful, but I prefer the latter. For that purpose I created a WordPress plugin which helps highlight the main
options. Take a look at the demo.
As you can see the default demo
highlights several options, and you can add or remove as many options as you need using simple
settings.
Be aware that this isn’t a premium plugin, nor is it built for anyone other than WordPress developers. With that said, feel free to use it for your theme
presentation.
7. Communicate With Potential Buyers
It is common practice nowadays to
use “pre-sales chats”. Some authors use plugins for that, I prefer using
Facebook messenger (for this reason I also included the messenger button in the helper
plugin).
Chatting with a theme author will often give potential buyers that extra sense of trust they need to make a purchase.
8. Optimize Your Demos
Theme demo optimization is a separate (and large) topic, but let’s look at what I feel are the main points:
- Make sure
your hosting/server has PHP version at least 7.0 - Make sure
you have HTTPS enabled. - Make sure
you dequeue all the js/css libraries and files that are used both in your theme
and installed plugins. For example, many plugins that you install with your
theme can use Masonry or Fontawesome, and if you don’t dequeue them, these
files will be loaded multiple times, increasing the load time and size of your
demo. - Also make
sure you don’t include the js/css files in your theme if they are present in
WordPress by default. - Make sure
you optimize your images, using the Smushit Image Compression and
Optimization plugin. - And make
sure you optimize your website using feedback from the Pingdom
Website Speed Test. - And, once you are happy with your results, don’t forget to enable a caching
plugin. I prefer WP
Super Cache.
9. Finalize and Test
This is a very important part.
After you’ve designed, developed, and optimized your demo,
you’ll find you no longer have any strength left and just want to relax, but now’s the time for testing! Crucially: test all your pages, on all possible screen
sizes, with an active debugger.
You may never know exactly why a client chose not to buy your item. It may be because on a mobile view one of your pages displayed a poorly-aligned icon, or on tablet landscape you forgot to reduce
a heading’s font-size. Users tend not to think as developers do, most users treat
your product as they find it, so these small things act as big warning signs.
After thorough testing don’t forget to disable the debugger and clear
the cache.
Conclusion
In this guide I tried to describe as many demo best practices as I’ve learned during my years of premium theme development. If you have any additional
thoughts or ideas, please share them with all of us in comments section. Thanks for reading!