2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. Show Off

Show Off

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

Theme Overview ↑ Back to top

Show Off is a theme by Woo, developed in a modular format for complete flexibility. Use the pre-defined homepage layout settings, or select the widgetized homepage to place whatever modules you would like to display, in whatever order. With a slider powered by it’s own custom post type, styling for WooDojo, and full support for our eCommerce engine WooCommerce you can really build a powerful website. The theme also includes a Business Page Template which has built-in support for our premium slider plugin, WooSlider as well as our free plugins: Features & Testimonials!

Show Off Theme Demo: demo.woothemes.com/showoff

Installing your Theme ↑ Back to top

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

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to:
Show Off > 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.

Please reference the WooCommerce Helper Documentation to learn more.

Homepage Overview ↑ Back to top

show_off_overview

Main Layout ↑ Back to top

The Show Off theme is built with a unique ‘sidebar’ header where you will see the logo, optional Gravatar and About section, site navigation, the primary widget area and optional ‘sidebar custom text’. You can set this sidebar to display on the right or left side of your site by going to: Show Off > Settings > Layout > Global Layout and selecting the right or left sidebar/header from the Main Layout option.

Show Off - Layout Settings

Adding your Logo ↑ Back to top

You have two options when adding a logo to your site. You can either use a text based Site Title and optional Tagline or you can use an image based logo as shown in the demo.

To upload your own image based logo:

  1. Go to: Show Off > Settings > General Settings > Quick Start > Custom Logo
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Save All Changes.

If you don’t have an image based logo, you have the option to add your Site Title and Tagline, you will find the settings for this just below the logo image upload area.

To enable the text based Site Title and Tagline:

  1. Go to: Settings > General to enter your site title and tagline.
  2. Go to: Show Off > Settings > General Settings > Quick Start and check the box to enable the text based site title and tagline.
  3. Optionally Enable the site description and adjust the typography settings.
  4. Save All Changes.

Additional Header Options ↑ Back to top

Show Off has 2 additional options for the Header/Logo area of your site. You can optionally include an Avatar as your Gravatar image or an About section. To configure these settings go to: Show Off > Settings > Layout > Header.

Show Off - Header Settings

Be sure to Save All Changes once complete.

Additional Custom Text Option ↑ Back to top

There is one more region of custom text that you can add to display just below the sidebar navigation and primary widget area. To enable this go to: Show Off > Settings > Layout > Custom Text where you will see the following options to enable and enter your custom text:

Show Off - Custom Text

Here is an example of this text from the demo in the bottom left corner where it says “Thanks for checking out Show Off”:

Show-Off-Custom-Sidebar-Text

Set up The Homepage ↑ Back to top

The Show Off homepage is built as a module based layout with 6 available regions. To enable/disable these modules or to adjust the settings for each module go to: Show Off > Settings > Homepage > Homepage Setup

Show Off - Homepage settings

The 6 homepage modules are setup as follows:

Introductory Message ↑ Back to top

Show Off has an optional Introductory Message where you can welcome your site visitors and link them to a specific area of your site, like your shop, for example. Here is what it looks like on the demo:

ShowOff-Introductory-Message

Here are the settings available to edit the Introductory Message area:
Show Off - Intro Message settings

  • Enter your Introductory Message Heading and Content.
  • Add the Introductory Message Button Label.
  • Add the URL link for the button in the introductory area.
  • Save All Changes.

Features ↑ Back to top

To enable the Features homepage content:

  1. Download, install and activate the Features plugin.
  2. Go to: Show Off > Settings > Homepage > Features
  3. Add a title for the Features section.
  4. Save All Changes.
  5. Go to: Features > Add New.
  6. Add a Featured Image.
  7. Publish.
  8. Repeat to add a minimum of 3 Features to fill the width of the homepage region.
To learn how to install a plugin, please see our video tutorial: Installing Plugins

Testimonials ↑ Back to top

To enable the Testimonials homepage content:

  1. Download, install and activate the Testimonials plugin.
  2. Go to: Show Off > Settings > Homepage > Testimonials
  3. Add a title for the Testimonials section.
  4. Save All Changes.
  5. Go to: Testimonials > Add New
  6. Add a Featured Image or email linked to a Gravatar email account.
    The Featured Image will override the Gravatar image.
  7. Publish.
  8. Repeat to add a minimum of 3 Testimonials to fill the width of the homepage region.

Shop ↑ Back to top

  1. To enable the Shop area to show your most recent products you must first download and install WooCommerce.
  2. Follow the WooCommerce Installation Guide to setup.
  3. Add products.
  4. Go to: Show Off > Settings > Homepage > Homepage Setup and select the checkbox to Enable Recent Product section on the homepage.
  5. You can optionally rename the ‘Shop’ section and set the number of products by going to Show Off > Settings > Homepage > Shop to configure the settings.
  6. Save All Changes.
To control the order of Recent Products you can manually adjust the post date for each product. This is ordered from newest to oldest.

Hero Product ↑ Back to top

The Hero Product will feature one product on your homepage.

  1. To enable the Hero Product you must first follow the steps above for setting up WooCommerce and adding a product. Also ensure you’ve set a featured image for your product.
  2. Mark the product as featured by selecting the star on the Products page.
  3. Next, go to: Show Off > Settings > Homepage > Hero Product to select the product you would like to feature on your homepage.
  4. Optionally title this section.
  5. Save All Changes.

Homepage Content Area ↑ Back to top

The Content Area of your homepage can either be set as a Page of content or your most recent Blog Posts.

Adding Page Content to the Homepage ↑ Back to top

To add page content to your homepage:

  1. Go to: Page > Add New
  2. Add homepage title and content.
  3. Publish page.
  4. Go to: Show Off > Settings > Homepage > Content Area
  5. Set the Content Type to Page Content in the dropdown menu.
  6. Set the Page Content as your newly created page.
  7. To Show Sidebar on the homepage select the checkbox. The sidebar setting inherits the global layout, rather than the layout of the page selected.
  8. Save All Changes.

Adding Blog Posts to the Homepage ↑ Back to top

To add blog posts to your homepage:

  1. Go to: Pages > Add New to create your blog page template.
  2. Title the Page, example: Blog.
  3. Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
  4. Publish your new Blog Page Template.
  5. Go to: Posts > Add New and add a few posts.
  6. Go to: Show Off > Settings > Homepage > Homepage Setup and enable the Content Area option.
  7. Go to: Show Off > Settings > Homepage > Content Area and set the Content Type to Blog Posts in the dropdown menu.
  8. Select the Number of Blog Posts to display.
  9. Optionally chose to only show blog posts from one category.
  10. Save All Changes.

Exclude Blog Categories from the Homepage

To exclude categories from displaying on the homepage:

  1. Go to: Show Off > Settings > Layout > Category Exclude – Homepage
  2. Insert the category slugs to hide. The category slug can be found by going to Posts > Categories in the right Slug column.
  3. Save All Changes.
Please note: In order to display the Homepage Options listed above you must have Settings > Reading settings to ‘Your Latest Post’ rather than a static page. If you set your homepage to a static page, the homepage content/widget options will not work.

Using A Widgetized Homepage ↑ Back to top

Show Off - Homepage ComponentYou can optionally utilize the Homepage Widget area to setup your homepage. To add widgets/re-order the homepage go to: Appearance > Widgets in your dashboard and the drag widgets into the Homepage widget area in the right column.

There is also an option to add content via the Woo-Component widget, options for Show Off include: Blog Posts, Page Content, Intro Message, Hero Product and Recent Products.

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets
Please note! Using the Appearance > Widgets – Homepage widget area will automatically override the Homepage Theme Option settings once you add a widget into the Homepage widget area.

Business Page Template ↑ Back to top

The Show Off theme comes with a useful Business Page Template to help display additional content on your site, including support for the WooSlider plugin. You must purchase the WooSlider plugin separately in order to use it on the Business Page Template.

Go to: Show Off > Settings > Business Template to select the business page modules you would like to display.

To set the business page template:

  1. Go to: Pages > Add New
  2. Add a title and the page content.
  3. Go to: Page Attributes > Template just below the publish module to select the Business page template.
  4. Publish the page.

Setting the Business Page Template as the Homepage ↑ Back to top

To set the Business Page Template as your Homepage go to: Settings > Reading and select the Static Page – Front Page as your newly created Business Page (instead of the recent posts setting).

Please note! By manually setting a static front page in the Reading settings you will be disabling the Homepage widgetized area and the Homepage Theme Option settings.

To learn more about how Templates please see our video tutorial here: Page Templates

Including WooSlider in the Business Page Template ↑ Back to top

The Business Page Template slider uses the WooSlider ‘Attached Images’ slideshow type. After you have purchased, downloaded and activated the WooSlider to include the slider on your business page template:

  1. Go to: Show Off > Settings > Business Template to select Display WooSlider
  2. Next, go to: Pages > Edit to add images to your newly created business page.
  3. Select Add Media.
  4. Upload as many images as you’d like.
  5. Close (X) the Media Uploader pop-up window.
  6. Finally, save changes by selecting Update.

You must upload images directly to your business page template in order for the Business Page Template WooSlider feature to show.

Pro Tip! in the new WordPress 3.5+ Media Uploader you can select Uploaded to this Page from the dropdown to only view the images uploaded to this page and thus used in the featured slider (see below). Drag and drop the images from here to reorder if you’d like.

WooCommerce Settings ↑ Back to top

To review the following WooCommerce Homepage Options go to: Show Off > Settings > WooCommerce

Show Off - WooCommerce Settings

  • Upload a Custom Placeholder to be displayed when there is no product image.
  • Display a Header Cart Link in the main navigation.
  • Enable/disable the Header Product Search.

Don’t forget to Save All Changes once you are done adjusting the settings!

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Show Off. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Product > Product Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

  • Logo maximum width: 280px
  • WooSlider Business Slider suggested minimum width: 1064px – height will scale to fit
  • Testimonials icon images: 60px x 60px
  • Homepage Features images: 130px x 112px
  • Single Blog Post Page Images maximum width: 864px

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Product > Product Image Options; scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Recommended Product Image Settings are as follows:

  • Shop Page Catalog Images: 300px x 300px
  • Single Product Page Image: 518px x 518px
  • Hero Product Image Size: 300px x 300px
Due to the product layout on archive shop pages, square product images work best. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.

Example of where you edit WooCommerce > Settings > Product > Product Image Options with Hard Crop selected:
WC-Image-Size-Setting

To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and here Using the Appropriate Product Image Dimensions

Featured Blog Images ↑ Back to top

To set the Featured Blog Image size for the blog page go to: Show Off > Settings > Dynamic Images > Thumbnail Settings

Please note: The Blog Featured Image will only display on the Blog page. If you want an image on your single post page, then you should insert the image into your post.

To learn more about Featured Images please see our tutorial here: Featured Images

Subscribe & Connect ↑ Back to top

The Subscribe & Connect functionality for the Show Off theme can be used on single post pages, with the Subscribe & Connect widget, as well as featuring your latest posts.

To add social media icons to your single posts page go to: Show Off > Settings > Subscribe & Connect > Setup and select Enable Subscribe & Connect – Single Post.

Show Off - Subscribe and Connect

To setup Subscribe & Connect go to:

  • Subscribe & Connect > Connect Settings to link the icons to each social media page.
  • Subscribe & Connect > Setup to enable the related posts.
  • Subscribe & Connect > Subscribe Settings to setup the email subscription form.
  • Show Off > Settings > General Settings > Subscription Settings to enter your preferred RSS feed URL.

Here is an example of the Subscribe & Connect panel on a single post page with related posts enabled:
Show-off-Subscribe-Connect-Recent-Posts

Here is an example of the Subscribe & Connect Widget:
Show-off-Subscribe-Connect-Widget

Contact Page ↑ Back to top

To setup a Contact Page:

Adding a Contact Page

  1. Go to: Pages > Add New
  2. Title your Contact Page
  3. Go to: Page Attributes > Template just below the publish module to select the Contact page template.
  4. Publish your page.
  5. Go to: Show Off > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the information panel (see below), and enable the Subscribe & Connect panel to display your social icons (see demo example)
  7. Be sure to Save All Changes when finished.

Show Off - Contact Page settings

To learn more about how Page Templates work please see our video tutorial here: Page Templates

Contact Page Maps ↑ Back to top

Show Off - Maps

To setup Google Maps:

  • Enter your Google Maps coordinates. Example: -33.924868,18.424055 – To find the Google Cordinates, search for your location on a Google Map, right click the pin and select “What’s Here”. This will input the Google Coordinates in the search box.
  • Optionally disable mousescroll for all the Google Maps on the site. This could improve usability on your site.
  • Set the map height.
  • Set the Default Zoom Level.
  • Select the Map Type: Normal, Satellite, Hybrid or Terrain.
  • Enter Map Callout text to be shown when you click on the map marker for your location.

Custom Show Off Widgets ↑ Back to top

The Show Off theme includes 5 custom widgets in addition to the Woo – Component widget mentioned above. Here are the other 5 custom widgets:

  • Woo – Adspace
  • Woo – Blog Author Info
  • Woo – Embed/Video
  • Woo – Flickr
  • Woo – Subscribe/Connect

To learn more about how to add Widgets please see our tutorial here: How to Add 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