Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. WordPress Themes
Webdesign

So You’re Selling a WordPress Theme: Best Practices for Demos

by
Length:ShortLanguages:

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:

  1. Pages to Include in Your Demo
  2. Menu and Navigation
  3. Layouts
  4. Highlight Hidden Features
  5. Use Authentic Content
  6. Include a Front-end Option Switcher
  7. Communicate With Potential Buyers
  8. Optimize Your Demos
  9. 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. 

Globax theme UI elements
UI elements from the Globax theme

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
  • Main features
    • Multilingual support
    • One click demo import
    • RTL support
    • 10+ header demos
    • 100+ custom elements
    • Multi layout blog
  • Additional features
    • Single page and multipage variants
    • Responsive and retina ready
    • Advanced typography
    • Fontawesome icons included
    • Widgets in megamenu

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.

Enovathemes options panel on Github

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.