Part 3 – Building Your Storefront

This is the final step of my 3 part (and one introduction) series on setting up your own shop of digital short fiction. It’s much shorter and easier than the other parts. You’ll need the links to your products that were generated by FetchApp in the previous step.

A thing to bear in mind

This is the $0-dollars-invested version of setting up your own shop. I’m sure there are much better (read: much shoppier) ways to set up your digital shop, but I don’t think there is a better way to do it for free. I’m aiming my cost/benefit analysis at what I think is an optimistic estimate of at most  $5 of sales a month, until you start making a bit of a name for yourself. So anything that costs you more than $5/month is going to be a money sink, in my opinion.

So this is my $0 solution.

Alright, let’s get into it!

We’re going to create a free WordPress blog and use it exclusively as our shop.

If you don’t have a WordPress account yet, sign up for it now. Doesn’t cost anything.

I’m not sure if it automatically creates a blog the first time you sign up, though I assume it does. Just call it something meaningful (mine is just called ‘dullemondshop.wordpress.com’).

If you already have a blog, just go to wordpress.com/my-blogs and create a new one:

Create Another Blog

Create Another Blog

For those not familiar with WordPress, this’ll be a half-decent tutorial for setting up a free author blog, too, if you don’t have one yet. Well… Maybe quarter-decent…

Wait, why have a separate blog for my shop anyway?

First of all, whatever template you have chosen for your existing writing blog is probably optimised for blog posts or similar. A shop-optimised template avoids the problems of trying to fit a square peg (your merchandise) into a round hole (your writing blog).

All blog statistics will be for your shop only! Since we don’t have a real ‘paid-for’ shop, this is a great way to filter out the blog-reading traffic from the shop-browsing traffic. It’s actually quite handy.

Each new blog post that you create should be a new stock item or stock page that you are putting into your shop.

You can use blog post categories as actual book categories in your shop!

The search feature in your shop will only bring back stock, not other articles you may have written.

Creating a new WordPress Blog

Once you’ve pressed that shiny new button and filled in your shop name, you will need to choose a theme. Luckily, I’ve spent hours going through the available options, and decided on the best shop theme for my purposes.

Granted, there aren’t a lot of great free themes that suit a shop or gallery. For this tutorial we’ll use MixFolio (http://theme.wordpress.com/themes/mixfolio/) so select that from the list if you can find it.

Theme Options

Go the Dashboard if you are not already there, then look down the side for the Appearance menu. Expand that, then select ‘Theme options’. You will see this screen (this is my shop options screen):

Theme Options

Theme Options

Fill in the fields on this screen as you choose. Bear in mind that the Welcome Area Message looks like it needs basic HTML markers in there if you want to do anything fancy. Notice the two <br/> tags in there. They are ‘line break’ tags, and I put two in so that there would be a gap in my welcome text. If you only have one paragraph of text, don’t worry about these.

I left my twitter information blank here, mostly because having my latest tweets visible in my shop without context is…uh…not going to be conducive to an ongoing customer relationship.

Fill in the other boxes here as I have done, leaving the checks the same but replacing things like my email address with your own, obviously.

Press Save Changes, then check out your raw shop by right-clicking on the blog name in the top left of your screen (it’s right next to the WordPress logo and your name), and then selecting ‘open in new tab’ or something similar, depending on your browser. This will open up your newly themed store in a separate window. You can refresh this window as we go through the rest of the tutorial, to see what havoc we are wreaking.

The Sidebar

Go back to the Appearance menu on the left, and select ‘Widgets’.

Drag the ‘Categories’ and ‘Top Posts & Pages’ widgets onto the Sidebar 1 and make sure they are configured as in the picture below. There may be some defaults that you should remove now. This theme automatically puts a ‘search bar’ at the top of every page, so there’s no need to duplicate that here.

Configuring the Sidebar

Configuring the Sidebar

This bar will display your most popular ‘posts’ (store items) as well as providing a nifty view of all categories available in your shop.

Configuring the Menu

Head back to Appearance, and open ‘Menus’.

You should create a new menu here using the link, and dragging in any items you might want to include. I’ve added a category filter, which I found quite handy. You may need to create some categories under the ‘Posts’ menu on the left menu bar before you can add them.

Screenshot 2013-12-27 15.55.02

Note that I’ve added a ‘link’ item that directs out of this store and back to my regular blog. I’ve also added another link to a PayPal cart. Let’s take a closer look at that now.

Screenshot 2013-12-27 15.58.16

You’ll notice I simply added the URL provided by FetchApp (see Part 2) into the URL field. This will open the current user’s PayPal cart to show any outstanding items.

Save your changes, then go to the Manage Locations tab.

In here, find the ‘Primary Menu’ section and select the menu you just created. Also, make sure there isn’t a menu selected in ‘Secondary Menu’ (I don’t know where that shows up, experiment later if you feel like it).

Stock

Each post is intended to be a sellable story, or a collection of stories, and each post in this theme can have its own 300 wide by 200 high image. I recommend using this feature, as your home page will become a grid of ‘recently added’ images, which is nice. I recommend finding an image now (if you want to quickly google for one at images.google.com, that will suffice for this tutorial, but make sure you don’t use other people’s art for commercial purposes without permission!)

So make sure you have:

  • A 300×200 cover image for the post
  • A picture of the cover of your item
  • The HTML copied from FetchApp for the item you wish to sell. This comes from one of the links generated by FetchApp in Part 2. This can be the HTML with PayPal images included, or just the raw HTML you will need to post.

So let’s create a new item for our shop. We have a front page message and a menu, after all, so all we’re missing is ‘stuff’.

Open up the ‘Posts’ menu and select ‘New Post’.

Enter the title of your item. Mine’s ‘Tutorial Store Item’ because it’s a tutorial. Yours should probably be the name of the thing you’re trying to sell.

Click ‘Add Media’ and upload the two files you have at hand (the cover image for this post and the cover art for the story).

In the Media Library tab select the cover art for the story. On the right, make sure the image information is filled in properly:

  • Title: the title of the thing you are selling
  • Caption: leave this blank, as cover art is usually too small to make this format right, in my experience.
  • Alt text: repeat the Title. This field is used for accessibility, so people with poor (or no) sight can still have software describe the link
  • Description: leave this blank, as it’s only used here for you, and not visible or searchable in the story (as far as I can tell)
  • Attachment Display Settings
    • Alignment: Left
    • Link to: None
    • Image Size: This depends on how large your original file was. If it was a full size cover and you want it shrunk down now, select the smallest option. If, like me, your cover image for the item is already sized to how you want it (mine is 75 x 120 pixels) just choose Full Size.

Insert the image into the post by clicking the button.

Now navigate to the end of the post (it will be just to the right of the image now visible in the text box.

Here is where you enter your information in whatever format you choose. I’ll show you how I do it, but feel free to adapt your own style.

Firstly I select a ‘Header 3’ paragraph styling. You can see a drop down box at the top left, with ‘paragraph’ in it. Change the style there.

Now I enter the title of the item again.

I hit enter. The paragraph style will have dropped back to ‘normal’.

I enter the price and info about the formats, in this case: ‘$1.99 (epub/mobi)’

Select the line you just typed and click on the ‘link’ icon in the formatting bar above. It looks like a chain link.

Fill in the information as follows, making sure you use the direct link provided in your FetchApp ‘sell products’ page, and not the HTML with the image:

Adding the 'add to shopping cart' link

Adding the ‘add to shopping cart’ link`

Hit enter again after pressing ‘Add link’, and now add a blurb or other description.

This is a tutorial item, but it does allow you to purchase this collection of short stories as a bundle for the advertised price. All downloads are DRM-free and include .epub and .mobi files.

Press ‘enter’ again and then the ‘Text’ tab at the top right of your text area. This flips the page into scary HTML mode. At the bottom of your text, paste in the ‘Add to PayPal cart’ HTML from the FetchApp page. It will look a little like this:

The Add to Cart HTML

Flip back to ‘Visual’ mode afterwards.

Final touches

On the bottom right of the page you will see a section ‘Categories’. Select all categories that apply to this item (add new ones now if you need to).

Now scroll all the way down the page and select the ‘Set featured image’ link. Upload your post cover image (the 300×200 one) and select it here.

Now save the document and press ‘Preview’ just to get a look. It should look a little something like this:

Preview

Preview

If you’re happy with it, press ‘Publish’!

And…basically repeat this for every item you sell. Your front page will build up to look something like mine:

Home page

Monitoring your shop

You can use the WordPress dashboard to monitor your shop traffic as follows:

Open ‘Dashboard’ and choose ‘Site Stats’. This will gives you a breakdown of traffic to your site. It will give you basic information about where referrals came from, which pages were popular, and so forth. It’s not super details, but it’s free.

Similarly, you can watch all your sales and downloads on the FetchApp page, by simply going to the FetchApp Dashboard.

Wrap Up

And there you have it! Now all you have left to do is the easy part of spreading word of mouth and building a loyal following of readers who will buy everything you write.

Easy, as I said… *coughs*

I hope these tutorials were somewhat helpful to you. There was quite a lot to cover, and I hope that it wasn’t too confusing. Let me know directly, or via the comments or social media, if there’s anything I can help you with.

And good luck selling!

Advertisements

9 thoughts on “Part 3 – Building Your Storefront

  1. Pingback: Selling Your Shorts All By Your Lonesome | Dark Sylvan Ungulate

  2. I wondered if you had checked out Sellbox? You store your files in either dropbox or google drive and they facilitate the sale and take 5%.

  3. By the way I have had some small measure of success using ywriter + calibre + sigil to produce a poetry ebook. By small measure I mean I have worked out what doesn’t work and should be set for the future 🙂

    • Awesome! I just saw the other day that Sigil isn’t getting many more updates and Calibre is adding an ebook editing functionality. I will probably update my post, or write a new one, to include calibre as an option. The fundamental formatting of the HTML will be the same.

      >

      • I tried using your template for the poetry book (just copying the story page repeatedly) but then I had issues when I wanted to do tricky formatting. So I then went to ywriter which does seem to generate fairly clean html files. Like your template though its specifically for prose so there’s a bit more work to do when I get to Sigil. I was cutting and pasting my work from all over the place as well so I think there might have been some issues caused by that. Essentially my process is : 1) Create one chapter and one scene per poem or section ie foreword and label the chapter with the title you want (theses are picked up as TOC headings) 2) arrange them in the order you want 3) export to ebook via ywriter (creates a zip file) 4) add to Calibre 5) edit meta data and add cover (found it easiest to add cover here) then convert to epub 6) open in Sigil tidy formatting, add links, create HTML TOC

      • Awesome! Yeah, my example is /really/ simple, and focussed mostly on short fiction so you don’t need a lot of headers and stuff. Hopefully the tutorial gives enough information to build on for collections with extra requirements.

      • For single shorts your template was great, it was the indenting int the style sheet that caused me some issues and then I had massive errors when I came to validation 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s