Sell Your Thing WordPress Theme

Date: July 2016

Type:

Client: Zen Web Themes

Summary:

I built this WordPress theme to help people sell their digital product, such as an app or ebook.




The theme I developed for July is Sell Your Thing, a theme that helps you sell your digital product, like an app or ebook. I did most of the work over the 4th of July long weekend since I was able to dedicate all of my time to it.

 

Inspiration

I was inspired to create this theme by my collaboration on the app that was recently launched for Personality Perfect. The owner of that site bought a Bootstrap template to create the landing page for the app. I really liked the idea of giving people an easy way to showcase the features of their app, and I figured that much of the same setup could be used to sell an ebook or other digital product. The template in use on that page is created mainly with Bootstrap, but I knew I could make something similar for WordPress users. I followed the same basic structure (no need to reinvent the wheel with a standard layout like this), and also added some of my own elements and created my own design.

 

WordPress Customizer

Much of the work involved in developing this theme was concentrated in the WordPress Customizer. I’ve worked with it in all of my other themes, but I for this theme, I wanted to build all of the functionality I could into the customizer instead of creating custom widgets. I knew that I could do more with the customizer than I had been, and since most of the focus of this theme is on the homepage, I knew it would be much more fun to build a site with it if you could see your changes live as you made them.

In a nutshell, the WordPress Customizer uses JavaScript to show you a live preview of your changes. It’s an entirely additional layer that you have to build. Adding all of the settings to the customizer is done in a PHP file, where you set up each panel and the individual settings, and give people the options they can choose from. After that’s done, you have to create a JavaScript file that looks at each of those PHP settings and dynamically displays the user’s choices in the preview area.

So I built a “Homepage Setup” section which has settings for each of the sections of the homepage:

  1. Main Introduction Area—Showcase a large background photo, your product image, a headline, sub-headline, and button.
  2. Features Area—Display another product photo and four product features with icons, titles, and text.
  3. Call to Action Bar—Create a powerful call-to-action with a headline and button.
  4. Screenshots Area—Show screenshots of your product so that people can visualize using it themselves.
  5. 4 Icons Across Area—Use four big icons to highlight your product’s important attributes.
  6. Reviews Area—Show of all the nice things people have said about your product.

 

Here are some screenshots that show you the configuration screens:

hb1

 

Here you can choose a large background image, and image of your product, a headline, sub-headline, and button with a link. This creates a nice introductory area that you can use to tell people what your product is all about.
hb2

 

This section lets you set up the Features area. You can choose from any of the Font Awesome icons and set a title and description for each feature. You can customize the title and sub-title for the section.
hb3

 

For this section, you choose three images and enter your title and description for each one. You don’t even have to call this section “Screenshots”, so if you’re selling an ebook or something else, you can show other, more appropriate images. (Yes, I also made these silly robot app mockup screens.)
hb4

 

Here you get to set up four larger icons to point out more features of your product. And, not shown below, you can then show four user reviews or testimonials.
hb5

 

 

Intention of the Theme

The intention of the theme is not to be a full-fledged ecommerce solution. Instead, it allows you to turn your homepage into a landing page and drive sales to your product. It does have WooCommerce enabled, so you can use that to sell products on your own if you want to. But the idea is really to drive sales to an offsite product, such as an app that’s on the App Store, or an ebook that’s being sold at Amazon. You could even use it as a one-page theme if you wanted to. However, I also put plenty of effort into designing the posts and pages so that you can use it for content marketing or blogging as usual.

 

Homepage Screenshot

Here’s a screenshot of the full homepage, which shows an example of how all of the above settings can come together (click for bigger):

sell your thing wordpress theme

 

Check out Sell Your Thing for more information and to see the live theme demo.



Leave a Reply

Your email address will not be published. Required fields are marked *