Note: If you just want to setup your site like our demo site to start, read this section. Make sure you have WooCommerce active before importing the demo content - when it asks you can skip the WooCommerce page setup when it asks you.

Great Resources

Note: WooCommerce has extensive documentation, this guide is just for the basics to get started. For questions about using WooCommerce refer to:

For WooCommerece support use the above links, we don't / can't provide WooCommerce technical support, just the general integration with our theme is supported, not the features and usage of the plugin itself.

Thesis 2 - Skin Installation - Quick Start

  1. If you are new to Thesis 2 make sure to read the Thesis 2 docs listed above to get up to speed on the basics.
  2. Install skins by activating Thesis 2 and going to Thesis -> Manage Skins -> Upload Skin.
  3. If you want the skin to look like our demo site, read this. Also one of our customers, Jupiter Jim, put together a great video showing the general process of installing a Thesis 2 skin here.
  4. New to Thesis 2 and Themedy? Watch our Thesis 2 / Themedy Quick Start video first.

After Installation Tips

  1. Make sure your: "Settings -> Reading -> Front page displays" is set to "A static page (select below)" and both drop downs have a page selected. (just create two blank pages if you haven't yet - called Home and Blog for example, to choose here)
  2. You can activate the "Custom Tagline" feature in Thesis -> Skin Content -> Site Title & Tagline button (also uncheck Site tagline in that area if you are doing this).
  3. Visit "Thesis -> Skin Content" to find the skins options.
  4. Visit "Thesis -> Skin Design" to change the built in design options for this skin.
  5. Setup your navigation menu at: "Appearance -> Menus"
  6. Add your Header / Logo image at: "Thesis -> Header Image"
  7. Visit the Appearance -> Widgets area to add content where needed.
  8. You can set the featured image for a WooCommerce category in "Products -> Categories -> Edit a Category -> Thumbnail"

Special Widget Areas

  • Front Page: Bottom: This is shown just above the four bottom widgets on the front page, we used a text widget here on our demo site.

Image Sizes
Note that for the most part these are just suggested sizes, but they give you a starting point.

Slider: 1542x640px
Featured images under slider: 585x220px
WooCommerce Catalog Images: 274x345px (hard crop)
WooCommerce Single Product Image: 576x576px (hard crop)
WooCommerce Product Thumbnails: 133x150px (hard crop)

Themedy Settings Explained

You can view the Themedy settings by visiting "Thesis -> Skin Content" and "Thesis -> Skin Design"

Thesis -> Skin Content

Front Page - Introduction: The text under the Front Page - Lead Box 1 / 2. This is the "Patron for Thesis and Genesis has it all!" section seen on our demo site.

Front Page - Lead Box 1 / 2: These are the two featured areas located under the slider on the homepage. The images we used are option 1 and option 2.

Front Page - Product Section 1 / 2: These functions allow you to easily add some great WooCommerce sections to your front page. This is the "Our Latest and Greatest" and "Browse Our Categories" sections on our demo site.

Primary Navigation: This is where you set the navigation menu you want to use on your site - create it in Appearance -> Menus first.

Primary Nav Social List: Add your social media accounts here to have them show up at the top of your site.

Secondary Navigation: This is where you set the secondary navigation menu you want to use on your site - create it in Appearance -> Menus first.

Themedy Slider: This area controls the slider on the homepage. Create your slides under the WordPress Dashboard -> Slides area, the WordPress featured image will be used as the overall background image for the slider area. Or select the Blog Posts or Remove Featured Slider options from the drop down.

WooCommerce Shop Buttons: Option to show the cart / login buttons on the top right of your site.

Attribution: Customize the text shown in the footer area.

Thesis -> Skin Design

Use this area to set the various design options provided.