How To

Setting up the homepage

After activating Smpl you will no doubt notice that your homepage looks a little bleak. This section explains how to populate your homepage with content.

The intro copy

First of all you’ll want to set the intro copy.

This content is managed in your theme options panel. Navigate to Theme Options > Homepage > Intro to find the textarea into-which you can add your content.  HTML is rendered so you can add images etc if you want to.

Homepage slider

The slider can be enabled / disabled on the Slider section of the homepage theme options. You can also specify additional settings such as the animation speed and the delay between frames.

Slides themselves are a custom post type. Adding a new slide is as simple as adding a new post. The title and the content will appear beneath the slide image, which you upload in the General Settings tab of the Edit Slide screen.

Homepage Product Tabs

There’s an option to display an assortment of your products on the homepage in a tabular format. You can choose to display a combination of your best sellers, staff picks, recent products or any combination thereof. Best sellers are calculated automatically based on your order totals whilst ‘staff picks’ are featured products.

Homepage Tweet

Here you can specify whether to display your latest tweet beneath the product tabs. The account from which the tweet is aggregated is specified on the ‘Contact information’ screen of the theme options.

Homepage Portfolio

This option allows you to display a snapshop of the latest 6 items added to your portfolio.

Homepage blog and widgets

The final elements on the homepage are your 3 latest blog posts as well as a widgetised region (sidebar) to display widgets specific to your homepage.

WooCommerce Options

Beneath the Homepage settings you’ll find the WooCommerce Options. Here there are a few options regarding your products, and the layout of your WooCommerce pages.

Store Info

Here you can add some information about your store which will be displayed across your site in the footer.

Once again your Twitter ID will be collected from your contact settings.

Products

Here you can specify how many products to display per page. Simply input an integer here. The default is 6 which will display 6 products per page. The other option is the product slider style, you can choose between ‘fade’ and ‘slide’. Slide is only recommend if the images in your product galleries are of identical dimensions.

Layout

Here you can specify whether or not to display a sidebar on the shop archive pages. If so you can populate that sidebar with widgets as usual. However if you choose not to display a sidebar here the product container will simply expand to fill the full width of the theme wrapper.

Secondly you can choose whether to display the product data tabs on single product pages. These tabs contain things such as product reviews and attributes. These may not be applicable to some stores.

Setup The Portfolio

The portfolio area setup below is a great spot to show off the work you’ve done and is pretty simple to setup. First we’ll need to be sure that your portfolio is setup correctly. Create a page and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.

From here we need to add items to the portfolio. Go to Portfolio>Add New. Title your portfolio item and write a short description of it if you’d like. You can also add it to a portfolio gallery of your choice to organize it. Now you can add your images or paste a video embed code in the custom settings box. Finally, click publish.

To add multiple images to a portfolio post simply upload all of them when setting a featured image. Once you’ve set your featured image the rest of the images will be pulled into the post.

To Recap

To add a portfolio post follow these steps:

1. Go to Portfolio > Add New.
2. Type a title for the post and complete all of the post’s body content.
3. If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
4. If you want to use a video simply past the embed code in the proper box under the Custom Settings
5. Publish the portfolio post.

Custom Shortcodes

There are three custom shortcodes built into Smpl. These are particularly useful on the homepage but of course can be used throughout your site.

Mini Features

The mini features shortcode allows you to to easily display short snippets of content in columns of 3 alongside icons, as displayed in the screenshot above.

This shortcode should be laid out like so;

[mini-feature-wrap]
[mini-feature icon=»http://path.to/image.png» title=»Feature 1″]
Feature Description.
[/mini-feature]
[mini-feature icon=»http://path.to/image.png» title=»Feature 2″]
Feature Description.
[/mini-feature]
[mini-feature icon=»http://path.to/image.png» title=»Feature 3″]
Feature Description.
[/mini-feature]
[/mini-feature-wrap]

Take note that features will most effectively be displayed in multiples of three as the CSS automatically sorts the mini features in to rows of 3. Also note than the mini features must be wrapped inside the [mini-feature-wrap].

[sale]

The [sale] shortcode allows you to easily display a sale banner anywhere on your site. This tandems nicely with our sale page template.

To use the [sale] shortcode simply wrap your sale banner content within [sale] tags like so;

[sale]Sale now on, up to 50% off all stock![/sale]

[sticky]

The [sticky] shortcode allows you to easily display notices on your site which are styled to appear as post-it notes. This is perfect if you want to make a short piece of content stand out somewhere on your site. It can be aligned to the right or the left of your content and be given a custom class.

To use the [sticky] shortcode simply wrap your message within [sticky] tags like so;

[sticky]This is a sticky note, awesome![/sticky]

As you would expect, you can attach any class name you like to the sticky shortcode, just incase you want to add any further custom styles to a particular sticky.

Widgets

Custom WooStore widgets

The theme includes custom widgets that you can add to any of your widgetized regions. Go to Apperance > Widgets to add these to your theme.

The custom woo widgets included are:

• Woo – Get in Touch
• Woo – Feedback
• Woo – Contact Information
• Woo – Archives
• Woo – Adspace
• Woo – Search
• Woo – Tabs
• Woo – Twitter Stream
• Woo – Flickr
• Woo – Blog Author Info
• Woo – Embed/Video
• Woo – Subscribe/Connect
• WooCommerce – All WooCommerce widgets

[insert name=»adding-widgets»]

Page Templates

[insert name=»page-templates»]