Top

FLATSOME THEME DOCUMENTATION

A how-to guide and general information to help you get the most out of your new theme.

This document covers the installation and use of this theme and often reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to send us a support ticket

Docs version 1.9
Last Update 27/03/2014
Created by UX Themes
Online Demo http://flatsome.uxthemes.com

Contents

  1. 1. Theme Installation
    1. 1.1 Install Theme
    2. 1.2 Install plugins
    3. 1.3 Setup Woocommerce
      1. - Change catalog image sizes
      2. - Regenerate thumbnails
    4. 1.4 Install demo content(optional)
  2. 2. Pages
    1. 2.1 Page templates
    2. 2.2 Homepage / blog setup
  3. 3. Navigation
    1. 3.1 Menu locations
    2. 3.2 Menu dropdown
  4. 4. Shortcodes
    1. 4.1 Shortcodes overview
    2. 4.2 UX Banners Shortcode
    3. 4.3 UX Sliders Shortcode
  5. 5. Widgets
    1. 5.1 Widget areas
    2. 5.2 Custom UX Themes widgets
  6. 6. Custom post types
    1. 6.1 Blocks Custom Postype
    2. 6.1 Featured Item Custom Postype
  7. 7. How-tos / Guides
    1. 7.1 How to add a newsletter box in footer
    2. 7.2 How to add payment icons to footer
    3. 7.3 How to enable Catalog Mode
    4. 7.4 How to enable Facebook Login / Registrer
    5. 7.5 How to Translate theme
    6. 7.6 How to add and edit content on top of pages
    7. 7.7 How to setup Wishlist correctly
    8. 7.8 How to add top banner to a category page
  8. 8. How to update theme!
  9. 9. Get support!

1.0 Theme installation

1.1 Install Theme

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  1. FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server
  2. WordPress Upload: Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your chosen theme.

1.2 Install plugins

This theme comes bundled with many plugins. Some are required and some are optional.

Install all bundled plugins

Once plugins are installed, they need to be activated at Plugins > Installed plugins

Install WooCommerce pages

1.3 Setup WooCommerce

Change image sizes

This theme uses image sizes other than WooCommerce normal sizes. Go to WooCommerce > Settings > Products and change sizes to these:

Note: You dont have to use the same heights. But its recommended to use the same widths

Regenerate thumbnails

After image sizes are set, you'll need to resize all images. We can do this automaticly with the plugin: "Regenerate Thumbnails".

  1. Go to Tools > Regen. Thumbnails
  2. Click Regenerate All Thumbnails

You'll need to install "Regenerate Thumbnails" if you cant find it under Tools.

1.4 Install demo content (Optional)

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

  1. Go to Tools > Import
  2. Click "WordPress" to install the WordPress importer.
  3. On 'Import Wordpress' screen click 'choose file' and select the file /themefolder/Dummy data/flatsome_demo_content.xml
  4. Click Upload file and import and wait for it to import

2.0 Pages

2.1 Page templates

Here is a list of pages templates that are included in this theme

Default template

- Default content template with a title top left.

Default Template (no-title)

- Default content template with no title. Useful if you want a homepage thats inside a container (not full-width)

Full Width (100%)

- 100% width template. Use this if you want to have sliders or content that goes all the way to screen edges

Left Sidebar

- Default content with a left sidebar

Right Sidebar

- Default content with a right sidebar

My Account Sidebar

- template that includes the My Account navigation in sidebar. It also has a nice image of loged in user top-left. Use this template for Account pages.

Checkout Page

- Use this for Cart and Checkout page. This template adds a nice Checkout breadcrumb to the top.

2.2 Homepage / Blog setup

  1. Go to Settings > Reading
  2. Select "A static page"
  3. For Front page select the Homepage page you want in the select box. If no demo content is uploaded you will need to create a new page.
  4. For Post page select a page called "Blog". This could be any blank page. WordPress will render it as a blog.

3.0 Navigation

3.1 Menu locations

This theme has 4 menu locations

Main Menu

This is main navigation thats located in the header

Top bar Menu

This is located at the top bar. This menu does not support dropdown

Footer Menu

This is located at the bottom above copyright text. This menu does not support dropdown"

My Account Menu

This menu is visible for logged in users at the left of mini cart. Menu is also located at the my account page template.

3.2 Menu Dropdown

This theme has a built-in multi column menu system. Menus are created using the core WordPress Menu manager. These images shows how you should structure your menus.

Creating a Simple dropdown
Creating a multi-column dropdown
Creating multi-column dropdown with image
Cant see CSS Classes or Description?

You need to enable these checkboxes to view field for CSS classes and Description:

Add custom labels

Add these CSS classes to your menu setting to get labels:

Avaible classes: "label-new" , "label-sale", "label-popular", "label-hot"

4.0 Shortcodes

4.1 Shortcode overview

We strongly belive in Shortcodes and we built the theme around shortcodes. All layouts, banners, sliders etc. are built using shortcodes. You'll find alot of shortcode examples by browsing the theme demo. These codes can be copy and pasted into the page editor. A simple shortcode inserter is also included.

Here is a list of all our shortcodes:

4.1 UX Banner Shortcode

UX Banners are responsive animated banners used for slides and banners. Banners like this is the future of eCommerce banners. The banners are structured like this: [ux_Banner] HTML content [/ux_banner]

Example of UX Banner shortcode

[ux_banner bg="http://imageurl" height="560px" link="" animation="flipInX" text_align="center" text_pos="center" text_color="light" text_width="80%" hover="zoom"] CONTENT [/ux_banner]

bg: Enter background image URL or #hex code
height: Height of banner. Width is 100% and adjusted to the container banner is inserted into.
link: Enter where banner should be linked
animation: Available text animations: fadeIn, fadeInLeft, fadeInRight, fadeInUp, fadeInDown, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig, flipInX, flipInY, bounceIn, bounceInDown, bounceInLeft, bounceInRight, rotateInUpLeft, rotateInUpRight, rotateInDownRight
text_align: Enter align of text. left, right or center
text_pos: Enter where text should be positioned on the banner left, right or center
text_color: Choose between light or dark text color.
text_color: Choose between light or dark text color.
text_width: Change the width of the text container
hover: Add hover effect. Available effects: zoom, fade
parallax: Creates a parallax effect to the banner. parallax="1" is weak effect, and parallax="9" is strong effect. Select any number between.
effects: Adds an effect overlay to the banners. Avaible: snow, sliding-glass, confetti, sparkle
video_mp4: , video_ogv: , video_wbm:, Adds a background video to the banner. You only need to use one of the parameters, but recommended to use all.

4.1 UX Slider Shortcode

UX Sliders are inserted with a Shortcode Generator. Its possible to slide almost anything by wrapping [ux_slider] [/ux_slider] around the content. Slides can be shortcodes, divs or images.

Example of UX Slider shortcode

[ux_slider timer="4500" arrows="false/true" bullets="false/true" auto_slide="false/true" hide_nav="false/true" nav_color="dark/light"] SLIDES [/ux_slider]

timer: Change how long each slide lasts if auto_slide is true. 45000 = 4,5 secounds
arrow: Show arrows or not (true/false)
bullets: Show bullets or not (true/false)
auto_slide: Auto slide or not (true/false)
hide_nav: Hide nav before mouse hover (true/false)
nav_color: Light or dark bullets and arrows (light/dark)
Example of how to create a slide

5.0 Widgets

5.1 Widget areas

Here is a list of pages templates that are included in this theme

Sidebar

The default sidebar visible on Blog and Pages with sidebar template

Shop Sidebar

Sidebar for shop category pages. Visible if category with sidebar is selected in Theme Option Panel

Footer 1 (4 colum)

Top footer. Only visible if widget is added. Add a widget to create a column. 4 widgets = 4 columns.

Footer 2 (4 colum)

Bottom footer. Only visible if widget is added. Add a widget to create a column. 4 widgets = 4 columns

Footer Payment images:

Footer payment images is just html added in Theme Option Panel under > Footer. Add any text or image here

5.1 Custom UX Themes widgets

Flatsome Recent Posts

Displays a list of recents blog posts

6.0 Custom post types

6.1 Blocks Custom Postype

The block postype let you create "HTML Blocks" that can be inserted to pages, widgets, and Theme Options using Shortcodes. An example could be to create the homepage slider as a "Block" and insert it to the homepage page with a shortcode like [block id="homepage-slider]

How To create a block:
  1. Go to Blocks > Add New
  2. Add title, insert content and save.
  3. Copy the [block] shotcode and insert it wherever you want.

6.2 Featured Item Custom Postype

Featured Item Post type lets you create "portfolio" style pages. This can be used to create lookbooks, or feature your products in various ways. Featured Items can be grouped in categories.

How To create a featured item:
  1. Go to Featured Item > Add New
  2. Insert images in main content field.
  3. Write featured item description in the "Excerpt" field.
  4. Select featured image that will show in Featured Item grid.

To display the featured items you need to create new a page and select a "Featured Items" template.

TIP: To create a image slider simply insert images and wrap [ux_slider] shortcode around the images.

7.0 How-tos / Guides

7.1 How to add a newsletter box in footer

Newsletter box seen on demo page is powered by "Ninja forms". We have included a example form you can import into ninja forms and add to footer.

  1. Go to Forms > Import / Export
  2. Import this file: themefolder/Dummy data/Ninjaforms_Newsletter_signup.nff
  3. Now you can drag "Ninja Form Widget" into footer widget area and select "Newsletter signup"

7.2 How to add payment icons to footer

Follow these steps to add payment icons:

  1. First you need a image file of the payment icons. Check themefolder/Assets/Icons
  2. Upload the image file here: Media > Add new
  3. Go to Apperance > Theme Options > Footer
  4. Look for "Footer bottom right content"
  5. Add '<img src="http://url_of_image" />' and save.

7.3 How to enable Catalog Mode

Go to Theme Option Panel > Catalog Mode to enable Catalog mode

TIP: Adding an Enquery form to product page


  1. First you need to create a form with Ninja Forms (Forms in wp-admin)
  2. Then go to Theme Option Panel > Catalog Mode
  3. Add this code to "Add to cart replacement"-field
[accordion]
  [accordion-item title="Send us an enquiry"]
	[ninja_forms_display_form id=4]
  [/accordion-item]
[/accordion]

TIP: Adding search or social icons to header

Go to Theme Option Panel > Catalog Mode and look for "Cart / Account replacement"

To get a search field enter this:

[search]

To get a social icons enter this:

[follow twitter="http://twitter.com/uxthemes" facebook="http://facebook.com/uxthemes"
 email="[email protected]" pinterest="http://pinterest.com/uxthemes"]

7.4 How to enable facebook login / register

  1. Enable the plugin "Nextend Facebook Connect"
  2. Go to Settings > Nextend FB Connect and follow the instuctions
  3. Go to Theme Option > Social and enable facebook
  4. Facebook login will now be visible for non logged in users on login screen.

7.5 How to translate the theme

The easiest way to translate this theme is to use "Codestyling Localization" plugin. http://wordpress.org/plugins/codestyling-localization/. Install that plugin and follow these steps:

  1. Go to Tools > Localization
  2. Click on "Themes" tab.
  3. Find "Flatsome" and click "Add new language"
  4. Click "Rescan" on the language you added
  5. Now you click edit and search for "Cart" or any other word in the mini cart dropdown
  6. Click "Generate MO-file" when you are done translating.
  7. You need to add or remove something from cart to see the changes in mini-cart. The cart is cached!

Learn more about translating WooCommerce here: http://docs.woothemes.com/document/woocommerce-localization/

7.6 How to add and edit content on top of pages

Content added to the "Excerpt" box gets placed on top of pages outside of the selected page template. This lets you make nice full width top banners.

  1. Enable the excerpt box by go to "Screen Option" at top of the page
  2. Look for the "Excerpt" box and add or content.

7.7 How to setup Wishlist correctly

First create a page and insert the shortcode [yith_wcwl_wishlist]. Using the "My account" template is recommended. Select this page in WooCommerce > Settings > Pages > Wishlist Page.

  1. Go to WooCommerce > Settings > Wishlist
  2. Change "Position" to "Use shortcode"
  3. Enable "Show "Add to Cart" button"
  4. Enable "Show Unit price"
  5. Disable "Use buttons"
  6. Enable "Use theme style"

7.8 How to add top banner to a category page

Adding a banner or HTML content to a category header requires the plugin: Taxonomy Metadata. Follow these steps to add a Top banner to category pages:

  1. Go to Products > Categories
  2. Edit the category where you want to add top banner
  3. Add content to "Top Content".
  4. We recommend you add a [ux_banner] shortcode here.

8.0 Update the theme

Please note: make a backup of the theme prior to updating.

The theme is located in wp-content/themes/flatsome.

Go to http://themeforest.net/downloads to download latest version of the theme. The theme is located inside the downloaded zip in "Theme files" folder.

Unzip the theme zip file (flatome.zip) into wp-content/themes/ folder. Make sure this folder is named "flatsome" (replace with old).

It seems scary but you really won’t loose any of your data. The only exception is if you have made edits to theme files like header.php, footer.php etc. These changes will need to made again to the new files. But all of your content and theme settings are preserved.

Alternatively, you may want to use a plugin to automate backing up your current theme and uploading the new version: http://wordpress.org/extend/plugins/easy-theme-and-plugin-upgrades/

9.0 Support

Need support? Please email us at [email protected]