Search

Superstore

Theme Overview ↑ Back to Top

Welcome to Superstore! This theme requires WooCommerce and includes support for our Features & Testimonials plugins. The Superstore also has a built-in Business Page Template that is built to work with the WooSlider plugin (not included).

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

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

Activate your Theme License

After you install your theme, be sure to activate your theme license by downloading and installing the WooThemes 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 WooThemes Helper Documentation to learn more.

Installing WooCommerce ↑ Back to Top

In order to populate the homepage of your site as you see in the Superstore demo you will need to first download, install and activate the WooCommerce plugin. Please read more about this here: Getting Started with WooCommerce

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: Superstore > 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: Superstore > 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.

Homepage Overview ↑ Back to Top

The home page of Superstore comes with two options for setup, using either the theme settings or the Homepage Widgetized region.

superstore-overview

Superstore Homepage Theme Settings

The Superstore hompage is built as a module based layout with 5 available regions. To enable/disable these modules or to adjust the settings for each module go to: Superstore > Settings > Homepage.

Superstore-Homepage-Settings

Please note: If you do not see product options in the Homepage settings you must first download, install and activate the WooCommerce plugin. Please read more about this here: Getting Started with WooCommerce

The 5 homepage modules are setup as follows:

Product Categories

  • Go to: Superstore > Settings > Homepage > Product Categories to set the number of categories to display.
  • Go to Products > Categories > Edit to set the product category description and add a featured image.
  • The product categories are ordered by default, if you would like to change the order of the products go to: Products > Categories and drag and drop them into your preferred order.
  • To learn more about setting up product categories please see our WooCommerce docs here: Managing Product Categories, Tags and Attributes
Please note: The image size for the Product Categories is set using the Product Image size setting which you can find in WooCommerce > Settings > Products > Product Image Sizes The demo image sizes are shown below.

Superstore-WC-Image-Settings

Featured Products

  • To setup go to: Superstore > Settings > Homepage > Featured Products.
  • To mark a product as featured go to: Products > Products and select the Star in the featured column (see below).
  • You can alternatively select the Quick Edit option to see the Featured product box.
  • To set the number of featured products on the homepage go to: Superstore > Settings > Homepage > Featured Product.
Select the Star in the featured column to mark featured products.

Select the Star in the featured column to mark featured products.

Recent Products

As soon as you start adding products you will see the Recent Products populate the homepage region. To set the number of displayed recent products go to: Superstore > Settings > Homepage > Recent Products.

Testimonials

To enable the Testimonials homepage content:

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

Homepage Content Area

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

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: Superstore > Settings > Homepage > Content Area > Page Content
  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

To add blog posts to your homepage:

  1. Go to: Superstore > Settings > Homepage > Content Area > Page Content
  2. Set the Content Type to Blog Posts in the dropdown menu.
  3. Set the number of blog posts to display.
  4. To Show Sidebar on the homepage select the checkbox.
  5. Save all Changes.

To exclude categories from displaying on the homepage:

  1. Go to: Superstore > 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.

Brands Extension

In order to show the Brand logos on your homepage like shown in the demo, it will require the Brands Extension. Once you’ve installed and activated the plugin, you can use the Widgetized Homepage to help set this up with your Brands Thumbnail widget.

Using A Widgetized Homepage ↑ Back to Top

Superstore-Homepage-Widgets

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

To learn more about how to add Widgets please see our tutorial here: How to Add Widgets

You can include any of the available widgets to the Homepage Widget Area including the Superstore modules as widgets. Here’s a list of the included Superstore widgets:

• Superstore – Featured Products Loop
• Superstore – Best Selling Products Loop
• Superstore – Product Categories Loop
• Superstore – Recent Products Loop

The Best Selling products are determined as soon as you start selling products. You will not see anything in this widget until you start selling products.

The Product Categories widget displays the first 4 parent categories in your store (sub categories are not displayed). To change which categories appear here go to the Category management screen in the WooCommerce settings then drag and drop to change the order.

Please note! Using the Appearance > Widgets – Homepage widget area will automatically override the default homepage modules and settings once you add a widget into the Homepage widget area.

Homepage Featured Slider ↑ Back to Top

To enable the Homepage Featured Slider go to Superstore > Settings > Featured Slider. From here you can set the number of slides to display on the homepage, optionally choose a Slide Group (category), or whether to show a title on Video slides or what order the slides should display.

Superstore-Featured-Slider-Settings

To add slides:

  1. Go to Slides > Add New.
  2. Add slide content in the main content area, including a title and description.
  3. Add a Featured Image for the slide.
  4. Scroll down to review additional options in Superstore Custom Settings for URL to link to or to add video embed code.
  5. Publish slide to save.
Please note! The Homepage Featured Slider for Superstore does not utilize the WooSlider plugin even though it uses similar functionality. After you purchase and install the WooSlider plugin the Slides menu option will be listed as Slideshows instead. The plugin is required if you would like to display a featured slider on your Business Page Template.
Slideshows Menu - WooSlider Installed

Slideshows Menu – WooSlider Installed

Slides Menu - WooSlider not installed

Slides Menu – WooSlider not installed

Business Page Template ↑ Back to Top

The Superstore 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: Superstore > 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

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

The Business Page Template slider in the demo example is utilizing 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: Superstore > 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.

ImageUploader-AttachedtoPost

WooCommerce Theme Settings ↑ Back to Top

To review the following WooCommerce Homepage Options go to: Superstore > Settings > WooCommerce > General.

Superstore-WooCommerce-General-Settings

Here you can:

  • Upload a custom placeholder to be displayed when there is no product image.
  • Display a link to the cart in the main navigation.
  • Enable/disable the product search in the header.
  • Hide Navigation on checkout – Hiding distracting elements like the navigation can increase conversions at the checkout.

Product Archives

To adjust settings for the Product Archives pages go to: Superstore > Settings > WooCommerce then scroll down to Product Archives. Here is an example of a product archive page from the demo.

Superstore-WooCommerce-Product-Archives

Here you can:

  • Display the product archive in a full-width single column format, removing the sidebar.
  • Set the number of product columns to display on product archive pages.
  • Set how many products to display on product archive pages.
  • Optionally, enable infinite scroll, which will automatically load the next set of products via AJAX when the customer scrolls to the bottom of the page.

Product Details

To adjust settings for the single product page go to: Superstore > Settings > WooCommerce then scroll down to Product Details. Here is an example of a single product page from the Superstore demo.

Superstore-WooCommerce-Product-Details

Here you can:

  • Choose to show related products on the product details page.
  • Set the maximum number of related products to display.
  • Display product page as full-width, removing the sidebar.

Related products are determined by the product categories/tags. To group related products, add them to the same category/group.

Image Dimensions ↑ Back to Top

Here are the ideal image dimension to use for Superstore. 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. 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

  • Featured slider/WooSlider Business slider suggested minimum width: 1050px – height will scale to fit
  • Ad Image: 468px x 60px
  • Blog featured images: 800px x 300px

WooCommerce Product Images

To adjust the Shop Image settings go to WooCommerce > Settings > Product > Product Image Options and 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.

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

To set the Featured Blog Image size go to: Superstore > Settings > Dynamic Images > Thumbnail Settings. If you change this setting after you’ve uploaded images, you must Regenerate Thumbnails for the change to take effect.

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

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

To setup go to:

  • Subscribe & Connect > Connect Settings to link the icons to each social media page.
  • Subscribe & Connect > Setup to enable the related posts in the Subscribe & Connect box (see below).
  • Subscribe & Connect > Subscribe Settings to setup the email subscription form.
  • Superstore > 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:

Superstore-SubscribeandConnect-Panel

Social Media Icons in the Header ↑ Back to Top

To add your contact information and social media icons in the header, go to Superstore > Settings > Contact Page > Contact Information and select the Enable Subscribe and Connect field.

Superstore-Contact-Subscribe-Setting

In order for this to show in the header area, please make sure that you have both menus activated. This can set up in via WordPress Dashboard > Appearance > Menus. If you are unsure how to set these up, check out our WooThemes Menu Documentation.

Advertising ↑ Back to Top

The ad region is located in the header of your theme and will push the search box (if enabled) and account module below the logo and ad region. Here is an example of how it would look:

Superstore-Advertising-Settings

To enable the header ad region:

  1. Go to: Superstore > Settings > Advertising.
  2. Upload your ad image.
  3. Then set the Destination URL for where you would like the ad to link to.
  4. Save All Changes.

To setup the header ad region with Adsense enter your adsense code (or other ad network code).

Superstore-Advertising

Contact Page ↑ Back to Top

To setup a Contact Page:

Contact-Page-Setting

  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: Superstore > Settings > Contact Page to enter the Contact Form Email address.
  6. From here you can also enable the contact information panel (see below), enter your Twitter username to show your latest tweet and enable the Subscribe & Connect panel to display your social icons (see demo example)
  7. Be sure to Save All Changes when finished.

Contact-Page-Theme-Settings

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

Setting up this information will also setup the Contact Bar in the footer:

Superstore-Contact-Footer

Contact Page Maps

Scroll down on the Contact Settings to find the following Google map options:

Contact-Map-Settings

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 Superstore Widgets ↑ Back to Top

The theme includes 5 custom widgets, in addition to the 4 Superstore widgets mentioned above, that you can add to any of your 5 widgetized regions.

The custom Woo widgets included are:

  • 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

Replicating the Demo Website ↑ Back to Top

The Superstore demo homepage was created by using the widgetized layout in combination with a few extra plugins. The link below will take you to our Knowledge Base where we will guide you through the process of replicating the demo website home page:

How to setup Superstore like the demo

FAQ ↑ Back to Top

The brand logos in the widget on the homepage are too small, how can I fix that?

These logos have their height restricted to preserve the layout and provide retina support. There are two ways to ‘fix’ this issue;

  1. Try not to upload brand logos that have a lot of whitespace around them. If this cannot be avoided however;
  2. You can adjust the logo max-height by adding the following snippet to your custom.css file or child theme
Back to the top