1. Documentation
  2. Themes
  3. SMPL

SMPL

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

SMPL Theme Demo: demo.woothemes.com/smpl

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: SMPL > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

More at: WooCommerce Helper Documentation.

Important: Please have a thorough read of the WooCommerce Codex and familiarize yourself with using the plugin and its various features.

Setting up the Homepage ↑ Back to top

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 ↑ Back to top

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

To set your Intro text, go to SMPL > Settings> Homepage > Intro, and enter your text in the Stand First text area (basic HTML is allowed here).

 

smpl_settings_home_options_intro

Homepage slider ↑ Back to top

To set up the slider, go to SMPL > Settings > Homepage Options > Slider.

smpl_settings_home_slider

  1. Enable the slider by ticking the box at the top.
  2. Choose how many entries to display in the slider.
  3. Enable/disbale TouchSwipe gestures for touch-screen devices.
  4. Enable or disable ‘Pause on Hover’.
  5. Choose the animation speed (how long a slide displays for).
  6. Choose the fade speed (how long the transition between slides takes).

 

To add a slide, go to Slides > Add New: 

  1. Add a title and content for your slide.
  2. Upload a featured image via the Featured Image panel.
  3. Optionally enter a video embed code in the Custom Settings area.
  4. Publish your slide.

Note: You must publish at least as many slides as you chose to be displayed in your slider settings.

Homepage Product Tabs ↑ Back to top

There’s an option to display an assortment of your products on the homepage in a tabbed 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.

To set this up go to SMPL > Settings > Homepage > Product Tabs.

Homepage Tweet ↑ Back to top

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 settings.

To enable this go to SMPL > Settings > Homepage > Twitter.

You also need to enter your Twitter username in SMPL > Settings> Contact Page > Contact Information.

Homepage Portfolio ↑ Back to top

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

To enable this go to SMPL > Settings > Homepage > Portfolio.

Homepage blog and widgets ↑ Back to top

The final elements on the homepage are your 3 latest blog posts (these are included automatically), as well as a widgetised area (sidebar) to display any widgets you choose.

To display widgets in the homepage sidebar, go to Appearance > Widgets, and drag the widgets you want into the Homepage widget area on the right.

WooCommerce Options ↑ Back to top

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 ↑ Back to top

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 in SMPL > Settings > Contact Page > Contact Information.

Please note: The option to display store info in the footer will only work if at least one footer widget area is enabled. To learn more about how to add Widgets please see our tutorial here: How to Add Widgets.

Products ↑ Back to top

Here you can specify how many products to display per page. Simply input a whole number here (multiples of 3 will display best). The default is 6 which will display 6 products per page.

Layout ↑ Back to top

Here you can specify whether or not to display your primary sidebar on the shop archive pages. 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.

Finally you can choose whether or not to display a link to the cart in your header.

Setup The Portfolio ↑ Back to top

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.

Portfolio Page Template

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 image(s). 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. Publish the portfolio post.

Smpl Portfolio

Custom Shortcodes ↑ Back to top

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 ↑ Back to top


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] ↑ Back to top

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] ↑ Back to top

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.

Custom SMPL widgets ↑ Back to top

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.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment