TopShop - WordPress ecommerce theme

# TopShop

## WordPress ecommerce theme

- Created: 08/19/2013
- latest Update: 08/19/2013
- By: UFO themes

### Theme Installation

NOTE: You need to have a copy of self-hosted WordPress installed on your own server in order to install the theme. You can not install custom themes or plugins on the accounts hosted at WordPress.com

#### Installing with WordPress

1. Log in to your WordPress Dashboard and go to Appearance -> Themes.
2. Click "Install Themes" tab and then click "upload" link , select TopShop.zip file and click "Install Now".
3. After theme is installed go to Appearance -> Themes to find and active this theme.

#### Installing with FTP

To install themes via FTP, you need to have a FTP software. If you don't know much about FTP read this FTP tutorial.

1. Extract the theme zip on your local computer
2. Connect to your server via FTP
3. Go to the WordPress root folder on your server, then go to "wp-content > themes" folder
4. Upload the theme folder that you extracted from the zip onto the "themes" folder
5. Next login to WordPress admin, go to Appearance > Themes
6. Click on the "Activate" link to activate the theme (see screenshot below)

### Plugin Installation

This theme comes with two slider plugins. Revolution slider and Layer Slider plugin. You will find plugin zip files inside "recommended plugins" folder which is located inside main TopShopTheme zip file.

#### Installing with WordPress

1. Log in to your WordPress Dashboard and go to Plugins
2. Click "Add New" tab and then click "upload" link , select plugin zip file and click "Install Now".
3. After plugin is installed go to Dashboard -> Plugins to find and active the plugin.

#### Installing plugins with FTP

To install plugins via FTP, you need to have a FTP software. If you don't know much about FTP read this FTP tutorial.

1. Extract plugin zip on your local computer
2. Connect to your server via FTP
3. Go to the WordPress root folder on your server, then go to "wp-content > plugins" folder
4. Upload the plugin folder that you extracted from the zip onto the "plugins" folder
5. Next login to WordPress admin, go to Plugins
6. Click on the "Activate" link to activate the plugin.

### Install WooCommerce

This theme requires WooCommerce plugin. Additional Extensions such as wishlist, more payment gateways, impoter, etc. are available. Once you installed the WooCommerce plugin, you may customize the plugin settings as you like.

More info on Woocommerce plugin : WooCommerce

### Adding Product Images

To add multiple product images simply edit or create a product and add images to Product Gallery section. You can drag and drop images to reorganize.

### Custom Menus

This theme supports 2 Theme Locations for your Menus: Primary Menu (the main navigation for your website ) and Top Menu ( secondary navigation menu ).

1. Navigate to Appearance → Menus section
2. Click on "+" to create a new menu
3. Press "Save Menu" button to register your newly created menu.
4. Add Pages, Categories or Custom Links to your menu.
5. Drag and drop item from your menu to put them in the order you want or to create sub-menus. Don't forget to save your modifications.
6. To create dropdown menu, drag the menu item to the right (the item will be indented)
7. Assign your menu to a theme location, or create a new custom menu if your theme has more than one navigation.

### Sliders

This theme includes 3 types of sliders. Flexslider, Revolution slider and Layer Slider 4.0.

You can find slider documentation inside included folders called "layer slider documentation" and "revolution slider documentation".

### Megamenu

1. Navigate to Appearance → Menus section
2. Click Screen Options ( top right corner). Make sure CSS Classes is checked under "Show advanced menu properties" section.
3. Create your menu item.
4. Assign CSS class to it called "megamenu" as depicted in the screenshot.
5. To organize the menu, drag the menu item to the right (the item will be indented)

### Theme Options Panel

You can configure the appearance and functionality of the theme by changing it's options. You can change color scheme, logo image, theme layout, change fonts, add social media icons or your Google Analytics code and much more.

To access theme options go to Appearance -> Theme Options.

#### General

- Custom Favicon

  Favicon is the 16 x 16px image which appears beside the address bar and in the bookmark, history menus, etc.

- Logo Image

  You can upload a custom logo image. The logo will appear at the top left of the site header. For best results logo images should be transparent png format.

- Headline Font
  Select a font for all your headlines in the theme.
- Body Font
  Select a font for your body text.
- Google Analytics
  Paste your Google Analytics code for statistics tracking.

#### Appearance

- Sidebar Position

  Show sidebar on left or right side.

- Portfolio Layout

  Select number of columns for your portfolio pages.

- Search Bar

  Show or hide header search bar.

- Full Post Content

  Show full posts or truncated posts on your blog.

- We Accept ...

  Select payments method that you accept and it's icon will be displayed in the footer area.

- Custom CSS
  You can add your custom CSS code here. No need to edit any of the stylesheet files. Just add your CSS code and it will be applied to the theme.

#### Thumbnails

- Thumbnails

  Show or hide thumbnail images on different pages.

#### Colors

Customize theme colors. You can customize accent color throughout the theme.

#### Homepage

- Homepage Message

  Show or hide message banner on the homepage. Just enter text for Homepage message line one and line two (optional)

- Team

  Display team on homepage.

- Portfolio

  Display recent portfolio items on homepage.

- Homepage content page

  Display a page if your choice on the homepage. You can select up to 2 pages or you can display none.

- Homepage Products

  Select a number of recent products to show on the homepage. You can select Featured and/or Recent products. Select number of products to display for each one.

#### Homepage Slider

You can select from 5 different homepage sliders. Flexslider, Flexslider with thumbnails, Laptop Slider ( uses flexslider), Revolution Slider or Layer Slider.

- Homepage Slider

  Show or hide the image slider on homepage

- Automatic Animation

  Enable or disable automation transition between images

- Slider Effect

  Select image transition effect : Fade or Slide

- Slideshow Speed

  Select time between transitions. 1 second = 1000 milliseconds.

- Slideshow Images

  Here you can add/remove and organize your slider images. Click "edit" in the top left corner of the image to change it's Caption, Title, Link and Button text.

  To add new slide just click Add Another Slide Button, upload your image or select one from Media Library.

  Drag & Drop to reorganize the slides.

### Logo

To display a logo image instead of text:

1. Go to Appearance -> Theme Options -> Logo Image
2. Upload a logo image or select one from Media Libray

The logo will appear at the top left of the site header. For best results logo images should be transparent png format.

### Widgets

There are 3 widgetized areas in TopShop (Homepage, Sidebar, Footer). You can add a variety of Widgets to this theme on the Appearance -> Widgets tab in WordPress.

To add/remove widgets:

- Go to Appearance > Widgets
- Drag the widgets from the Available Widgets panel located on the left side to the widget area panel on the right (eg. Sidebar, Homepage, Footer, etc.)
- To remove the widgets, drag the widget from the widget area panel back to the Available Widgets panel. If you want to keep the widget setting for future use, drag it to the Inactive Widgets instead of the Available Widgets panel. It will save your widget settings. To retrieve the widget, drag the widget from Inactive Widgets panel instead of the Available Widgets panel.

### Page Templates

TopShop comes with 11 page templates. You can select page template from page Template dropdown. You can select any page you created as your homepage.

- Blog with sidebar
- Blog fullscreen width
- Page with sidebar
- Portfolio 1 column
- Portfolio 2 column
- Portfolio 3 column
- Portfolio 4 column
- 404 ( not found ) page
- Sitemap page
- Team list layout
- Team grid layout

To set the page template as your homepage, go to wp-admin > Settings > Front Page, select the page as your front page:

### Creating your Team/Staff.

To add team members you need to create a user profile for each team member and check them as staff. You can do that by going to WordPress dashboard > Users. Edit a user and check "Staff member" option under "Profile Information" section.

You can choose to display staff member on homepage, team page or both by checking "Display on homepage" and "Display on team page" options.
To add social media icons for each member simply fill out Twitter, Facebook, Google +, YouTube, Vimeo fields.

### Thumbnail Images

To add thumbnail image to your posts and pages you would need to set a Featured Image.

1. When you are on editing post or page, click on "Set featured image" on the right sidebar.
2. On the next screen you'll be asked to upload a picture from your computer or selecting one from previously uploaded images. After uploading your image, click on the "Use as featured image" link and your image will be used for thumbnails.

Detailed instructions for setting Featured Image can be found here.

If you are switching from a different theme you may need to regenerate your thumbnail images that you previously uploaded. You can do that using this plugin: Regenarate Thumbnails

### Custom Background

You can easily change background color or set a custom background image in the theme.

Visit the Appearance -> Background or the Appearance -> Customize link to change background colors or upload your own custom background image. Here is more info on adding custom backgrounds.

### Shortcodes

This theme comes with a variety of shortcodes that help you manage and organize your content. You can find a full list of shortcodes and examples here.

### Icons

This theme comes with 258 retina ready icons.

To add an icon add this shortcode to your post/page content area. [icon type="earth" size="16px" color="#000000"]

To display a different icon you need to change "type" parameter. For a complete list of icons please see this page.You can change size and color parameters to change icon size and color. Size and color parameters are optional.

### Localization

You can translate this theme into a different language by translating the included .po file which is located inside "lang" folder.

You can use POedit program to translate this language file. You can find it here.