Theme
Documentation

Important Note:
To make sure you're using the latest version of this help file, please check out the Online Documentation →.

Documentation Version: 1.2.5
Last Update: June 20, 2013
Created By: Get Bowtied
Theme Demo: View Demo
Support Forum: Ask a Question


Congratulations!

You’re The New Owner of 'The Retailer' …
Now What?

 

The scope of this documentation file is to provide you with the information you need to help you get started with your new theme. From the first steps of installing the theme, to creating custom pages and styling the whole thing for your needs.

Should you have any questions that are beyond the scope of this help file, please feel free to post them to on our Support Forum.


Getting Started

The first step would be to get familiarized with the zip file you have downloaded from Theme Forest. The zip includes the theme files and all the assets that come with it. Here is a brief description of the theme deliverables.

Theme Files

Theme Requirements

In order to proceed with the theme installation, you need to make sure you have the latest version of WordPress (3.5+) on your self-hosted site. The theme has been built to work with the latest version of WooCommerce (2.0+) as well as with older versions (1.6+).

Click here to read more about what you need to run WordPress on your host.

 

Need Help with WooCommerce?
In case you're new to WooCommerce and you need help with the Installation and the Administration of your WooCommerce based shop, you should check out the WooCommerce User Guide →.


Theme Installation & Configuration

This is the full video tutorial that will assist you in installing and configuring your new theme. It covers the following few section of this documentation file:


Theme Installation

Step 1: Upload and Activation

There are two ways to install WordPress theme, either by uploading the zipped theme file via the WordPress admin theme installer, or by uploading the unzipped theme folder containing all the theme files via FTP.

OPTION 1: Using WordPress Theme Installer

  1. Log into your WP Admin dashboard and browse for AppearanceThemes.
  2. Now go to the secondary tab: Install Themes and click the Upload link option.
  3. Follow the instructions by choosing the file "theretailer.zip", which you can find inside the .zip downloaded from Themeforest ('Theme Files' folder) and click Install now.
  4. Click Activate once the upload has finished and you're ready for the next steps.

OPTION 2: Using FTP

  1. Log into your site via FTP and browse for your WordPress themes folder wp-content/themes
  2. Upload the main theme folder called "theretailer" (unzipped), found inside the .zip file downloaded from Themeforest (in the 'Theme Files' folder).
  3. Once the upload has finished, log into your WP Admin dashboard and browse for AppearanceThemes to activate your new theme.

 

Step 2: Plugin Installation

A yellow notice at the top of the screen will now suggest to continue with the recommended plugins installation. Click 'Begin installing plugins' and select the plugins you need to install from the list. All plugins must be activated once the installation has finished.

Required Plugins:

 

Recommended Plugins:

 

Step 3: WooCommerce Image Options

You need to make sure the default WooCommerce image sizes are the correct ones for your newly installed theme. These settings affect the actual dimensions of your product images in the shop pages.

  1. Navigate from your WordPress Dashboard to WooCommerceSettingsCatalog and find the "Image Options" section at the bottom of the page.
  2. Update those values with the following ones:
    Catalog Images: Width = 190, Height = 243
    Single Product Image: Width = 510, Height = 652
    Product Thumbnails: Width = 114, Height = 145

Installing on a site with existing content?
If you are not installing the theme on a fresh WordPress instance, you probably already have posts, pages or products added to your site. After activating the theme, you'll need to have WordPress recreate all image thumbnails to make the sizes fit with your new theme. You don't need to do it manually, Regenerate Thumbnails WP plugin can automatically handle this job for you.

 

Optional Dummy Data Import

The theme comes with a .xml file containing demo content you can import into your WordPress site to populate your database. This will help you get started, in case you are running on a fresh WordPress installation with no content at all.

The XML file includes Demo Blog Pages, Demo Blog Posts, Demo Homepages, Demo Comments, etc. The XML file does not include any of the images in the demo or Revolution Slider data.

  1. From your WP Admin Dashboard, navigate to ToolsImport.
  2. Select the .xml file in the Assets\Dummy Data\ folder from the zip-file you've downloaded from Themeforest.


Navigation Setup

Setting Up New Menus

Follow the next steps to define menus for each of the theme's menu locations. In each menu, you can add as many items you need: links, pages, posts, custom links, shop categories, direct links to products, internal or external link.

  1. Navigate to AppearanceMenus and click Add Menu.
  2. Name it, define your menu links and click Save Menu.
  3. Assign a Menu Location for your newly created menu, by selecting it for the preferred Theme Location.

 

Menu Locations

The theme comes with 4 custom menu locations. You must define your menu items for each menu location, once you have created your pages.

  1. Top Header Menu
  2. Primary Menu
  3. Secondary Menu
  4. My Account Menu


Theme Options

The Theme Options Panel

The Theme Options Panel helps you easily take control over your site, by allowing you to upload your logo, style the appearance of the theme with your custom colors, change fonts, turn features on and off, without having to write any code.

To access the Theme Options panel, navigate to AppearanceTheme Options.

Note: Clicking 'Options Reset' button will replace your current settings with the default ones. You might consider creating a backup for your options.

 

Backup and Restore Your Options

After you create a set of settings, you might want to save your work. This is useful if you want to experiment with the options while keeping the old settings in case you need them again.

Navigate to the Backup section in the Theme Options Panel and click the 'Backup Options' button. Once the options page has reloaded, you will be able to restore your options by clicking the 'Restore Options' button.

 

Transfer Theme Options Data

You will find this feature useful in case you need to transfer the saved options data between different WordPress installs, or you just want to save/import/export different backup versions of your theme options.

Navigate to the Backup section in the Theme Options Panel and paste your code in the 'Transfer Theme Options Data' textbox. Click 'Import Options' and your options should be imported and activated instantly.


Setting Up Pages

Create a New Page

For your flexibility, all pages in the demo are built using a combination of shortcodes and a page template. Take the following steps to create new pages for your site.

  1. Navigate to PagesAdd New.
  2. In the Page Attributes section, select one of the Templates from the list.
  3. Start adding content in the text editor or paste one of the shortcodes combinations (see below) for a pre-defined layout (see below).

 

Available Page Templates:

 

Homepage Setup

To set one of the pages you have create as a Homepage, navigate to SettingsReading, select "A static page" and choose "Your Homepage" as the Front Page.

Using a Pre-Defined Homepage Layout:

You can quickly build a homepage using one of the pre-defined layouts you can see in the demo, by following the instructions below. All homepage options are created by using a combination of shortcodes and a page template.

 

Homepage v1

Create a New Page and select the template '100% Width'. Paste the following code in the WordPress text editor.

 

Homepage v2

Create a New Page and select the template '100% Width'. Paste the following code in the WordPress text editor.

 

Homepage v3

Create a New Page and select the template '100% Width'. Paste the following code in the WordPress text editor.

 

Homepage v4

Create a New Page and select the template '100% Width'. Paste the following code in the WordPress text editor.

 

Homepage v5

Create a New Page and select the template '100% Width - Single Footer'. Paste the following code in the WordPress text editor.

 

Homepage v6

Create a New Page and select the template '100% Width'. Paste the following code in the WordPress text editor.

 

Homepage v7

Create a New Page and select the template '100% Width'. This page is created using a slider only. Paste the shortcode for your slider in the text editor and you're ready to go.

 

Homepage v8

Create a New Page and select the template '100% Width - Single Footer'. Paste the following code in the WordPress text editor.

 

Blog Setup

To set up a blog page you have created, navigate to SettingsReading, select "A static page" and choose your "Blog" page as the Posts Page.

To start adding posts to your blog, navigate to PostsAdd New.

 

Portfolio Setup

To set up a portfolio, you just need to select the template of choice for listing the portfolio items in your portfolio page. You can choose to list your items on a two, three, or four column layout. Find the template options by navigating to Page Attributes when editing your Portfolio page.

 

Add New Portfolio Items

Start adding portfolio items, by navigating to PortfolioAdd New.


Using Pre-defined Page Layouts

All pages are conveniently created using shortcode combinations, to maximize the theme's flexibility. The following shortcode combinations will help you get started with creating pages, based on our demo pages. Just copy/paste the code and make sure you're on the "text" tab of the WordPress text editor.

About Us V1

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

About Us V2

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

FAQs

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

Contact Us – No Map

Create a New Page, then paste the following code in the WordPress text editor. The contact form is handled by 'Contact From 7' WP plugin. Leave the 'Default Template' selected for this page.

 

Contact Us – With Google Map

Create a New Page, then paste the following code in the WordPress text editor. The contact form is handled by the 'Contact From 7' WP plugin. You can create this page using the 'Default Template', the '100% Width' template or the'100% Width - Single Footer' selected for this page. The Google Maps Shortcode can be used in with full width, as well as inside a specific number of columns you can set using the Columns shortcodes. The height of the map is customizable as well for maximum flexibility. Style the map easily by specifying a main color in the shortcode.

 

Our Team

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

Features

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

Services

Create a New Page and just paste the following combination of shortcodes in the WordPress text editor.
Leave the 'Default Template' selected for this page.

 

Archive

Create a New Page and just select the 'Archive page' template in Page Attributes.
No shortcodes are required to build this page.

Sidebars & Widget Areas

If you navigate to AppearanceWidgets in your admin panel, you will see four widet-ready areas for this theme:

  1. Sidebar: this sidebar will be displayed on the Blog as well as on the pages that use the 'Page With Sidebar' template.
  2. Product Listing: this sidebar will be displayed on the shop pages only, in case the shop sidebar is turned on from the Theme Options panel.
  3. Light Footer: displayed in the lighter, top part of the footer.
  4. Dark Footer: displayed in the darker, lower part of the footer.

To setup you widgets, just drag one widget at a time and drop it in the desired widget area from the list above.

Please note that you can define unique widgets per page for any of the widgetized areas mentioned above, using the WooSidebars plugin that comes with the theme.


Sliders Setup

Creating a New Slide

The sliders are built using the powerful premium wp plugin, Slider Revolution, which comes with this theme. The slides you're creating can be placed on any page of your website, using shortcodes. This quick tutorial will teach you how to set up slides for your site.

 

Need Help with Slider Revolution? In case you're new to Slider Revolution and you need help with creating your slides, you should check out the Slider Revolution Documentation, included in the theme files.


Shortcodes

The theme comes with a built-in library of shortcodes that will help you create custom pages or display specific content inside your posts. All shortcodes are accessible in the Post/Page Editor, in a select box, near the 'Add Media' button.

On our Demo Site, you can find examples of usage for all shortcodes, along with descriptions and attributes for each one. You can easily create something similar, by copying the code provided in each shortcode page then pasting it in the text editor of your page.

Shortcode Demos


Translations Update 'How to' for V.1.6.5.

You asked, we listened.


In V 1.6.5 we have added better support for the way The Retailer handles translation to other languages. This part of the theme was fully re-built in reponse to the numerous requests recevied via our Support Forum.

Important notice for users who translated The Retailer:
After updating, the terms should be reviewed, some new terms may have been added that might require translation. Based on the routine used to translate the theme, follow the steps that relate to your case to help you get started.

Case 1: For WPML users

 

Case 2: For Multilingual websites (more than 1 language)

 

Case 3: For .po users


Credits

WordPress / WooCommerce / jQuery / Slider Revolution (Premium) — A fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. Fully responsive and mobile optimized. / iOS Slider (Premium) — Touch Enabled jQuery Horizontal Slider Plugin. / Slightly Modded Options Framework — SMOF is a back-end framework for creating and managing options. / TGM-Plugin-Activation — It allows users to install plugins in singular or bulk fashion using native WordPress classes, functions and interfaces. / hoverIntent — A plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! Instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call. / html5shiv — The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x. / customSelect — This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. / Superfish — An enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu and adds the following much-sought-after enhancements./ Respond.js — The goal of this script is to provide a fast and lightweight script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. / Footable — A jQuery plugin that aims to make HTML tables on smaller devices look awesome. / Linecons — Linecons Free is a set of remarkable free vector icons. The set contains 48 fully scalable vector icons with outline styles. / Simple WP Retina — Seamlessly replaces images with @2x versions on Retina and other high pixel density screens. Change is performed server side saving requests..

 

 

▲ Top