Theme Documentation

If you have any questions that are beyond the scope of this documentation, please contact us via email.
Please note that we only provide support in case of errors in our product or to advise You about using our product’s features.


Table of Contents

  1. Getting started
  2. Accessing theme settings
  3. Uploading your custom logo
  4. Setting up homepage
  5. Uploading sample content
  6. Installing woocommerce
  7. Shortcodes
  8. Setting up homepage slider
  9. Setting up footer twitter feed
  10. Setting up newsletter
  11. Layout
  12. CSS Files
  13. JavaScript Files
  14. Color settings

A) Getting started - top

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.

You have two options for uploading the theme - to use FTP or upload tool in Wordpress admin.

1) Upload via FTP:

First you must unzip the file you downloaded from Themeforest. There you will find a file named pandora.zip. Now unzip this file also. You should see a folder named "pandora". Upload this to /wp-content/themes/ in your wordpress installation.

2) Upload via Wordpress admin:

Open your Wordpress admin; Go to Appearance and choose Add New Themes. Click Add new. Upload the pandora.zip. Do not upload the zip archive you downloaded from themeforest. Upload only the pandora.zip file. If you have a "missing stylesheet" issue you are uploading the wrong file!

Activation

Once upload has finished, activate your theme in Appearance > Themes. Once activated Pandora will create two pages - Blog and Homepage. These will be assigned as your new front page and posts pages. You can later edit these settings under Pandora > Visual editor > Static Front page.

More info here.


B) Accessing theme settings - top

Open admin section for your wordpress blog. You can find it by typing your domain name + /wp-admin/. Once you have opened the admin, you have to click on "pandora" at the bottom left corner of screen. There you will find theme settings.

admin

Theme settings have 5 sections:


Go to theme settings and open the General tab. There you will find section called "Logo". Enable logo, by selecting On, and 2 extra fields will appear - file upload and alt text field. Click on the "browse" button and select your logo from your computer. Click save on the bottom of page and that's it! You should also provide an ALT text which will be show if your image ever fails to load on the front page.


D) Setting up homepage - top

When you activate theme, Pandora will auto create a page that's used for homepage. This page will be called "Homepage" and you can find it and edit it under "Pages" in your wp-admin.

Slider

Homepage slider is not visible when you first load the theme, since no slides are added to it. You can add images to homepage slider by going to "Slider" section in your wp-admin and creating new slides. For each slide you should set featured image (1980 x 500px), title, link and excerpt.

Homepage blocks

Homepage is set up using various shortcodes that are included with the theme. Copy and paste the shortcodes seen below to make your front page to look like the ones shown on Pandora demo page. This is the full version with everything, that can be included on the front page. If you decide to, for example, remove the row of banners, just delete the corresponding shortcode - in this case "[banners title="Very Special Offers" /]". These shortcodes have various options, that you can read more about here.

[welcome title="Welcome to Pandora, responsive Wordpress theme" image="[YOUR IMAGE LINK HERE]"]
Congratulations on starting your own e-commerce store!
Pandora is an elegant & responsive Wordpress theme which dynamically adjusts for all screen sizes and devices. Your shop will look great and will be easy to use on desktops, laptops, tablets and mobile smartphones.[/welcome]

[product_catalog type="latest" count="8" title="Featured products" /]

[banners title="Very Special Offers" /]

[columns_wrapper]
[post_column /]
[product_column /]
[about_column title="INFO" phone="7-685-531-2605" email="info@planetshine.net"]
Mecenas quis porta in, condimentum eget arcu. Fringilla aliquam ultricies pellente sque vel turpis nec leo tincidunt sollicitudin ac non risus. Ves tibu lum ultrices feugiat velit, quis tincidunt velit volutpat nec. Vivamus pharetra fringilla augue, elementum ante ultrices tincidunt. Aenean consequat tincidunt.
Quisque scelerisque augue eu turpis condimentum iaculis. Cras adipiscing lobortis convallis. Nam eu augue lorem.
[/about_column]
[/columns_wrapper]

E) Uploading sample content - top

To make things easier with initial setup, we have provided you with sample content that you can import in your wordpress site. It is located in the folder you downloaded from Themeforest. It's called pandora.wordpress.xml. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose the aforementioned file and upload it.


F) Installing woocommerce - top

Woocommerce is a powerfull Wordpress plugin, that enables anyone to use your WP website as an online shop. To get these awesome features you first have to download and install this plugin. For more information on how to install woocommerce read this.


G) Shortcodes - top

Pandora includes several shortcodes that make styling pages, such as front page easier.

Product catalog

You can include product catalog in any page by pasting this code:

[product_catalog type="latest" count="8" title="Latest products" url="URL TO YOUR COLLECTION" /]

This will output full width list of 8 latest products. The url parameter is optional, it will default to your shop main page. And as you can probably imagine, this product catalog will have a title "Latest products". To change title or product count just edit the attributes "count" and "title". The "type" property has 3 possible values:

You can also filter product by using attributes "tag" and "category". For example if you have a clothing shop and want to select men clothes with blue color you can do this:

[product_catalog category="Men" tag="blue" count="8" title="Featured products" /]

The above shortcode will select product from category "Men", that have been tagged as "blue". You can also just use one of the attributes - "tag" or "category".


Banner row

Pandora offers you the option to create banners and include them anywhere in the theme. There are 3 default banner templates, but you can also just use any images you like. Banners look like this:

banners

To show your banners on front page you must first create them in admin. To do that just go to "Banners" section in your wp-admin and click "add new". There are 2 ways to make a banner - upload an featured image (your chosen banner picture) or set title, excerpt and color (for pandora custom banner). No matter which you choose, you have to add a link.

Before clicking save pay attention to field "banner group". This allows you to group your banners for specific purposes. Say, you want to have separate collections of banners for men and women clothing. Adding group "men" will let you have that.

[banners title="Very Special Offers" count="6" /]
[banners title="Very Special Offers for men" group="men" /]

The above shortcodes will output two sets of banners. The first will show 6 banners with no group. The second will show 3 (if no count specified, default 3 is used ) banners with group value "men".


Content columns

Pandora frontpage has columns that show products, blog posts and some additional info. These too are shortcodes. You can change this show, for example, 3 columns of different selections of products, or just blog posts, etc.

banners

See the shortcodes below:

[columns_wrapper]
  [post_column /]
  [product_column /]
  [about_column title="INFO" phone="7-685-531-2605" email="info@planetshine.net"]
  Quisque scelerisque augue eu turpis condimentum iaculis. Cras adipiscing lobortis convallis. Nam eu augue lorem.
  [/about_column]
[/columns_wrapper]

Everything is wrapped with [columns_wrapper], which add the markup needed to display these items as columns. This shortcode is essential.

[post_column /] show 3 latest posts by default. You can modify it using attributes "title". "count", "tag" and "category", similar to how you edit the product_catalog shortcode.

[product_column /] show 3 latest products by default. It has exactly the same options as product_catalog shortcode.

[about_column /] shows text that's embeded between opening and closing tag. Has attributes "title", "phone" and "email". Adding the last two will output styled phone number/email as seen in the screenshot above.


H) Setting up homepage slider - top

Homepage slider is disabled by default. You can enable it in General theme settings. But first you have to add some slides. To do that go to "Slider" section in your wp-admin and add new slide. The slider image should have the size 1920x500px. You can add the image using "featured image" wizard on the right hand side.

Make sure you add title, excerpt and link to your slides.


I) Setting up footer twitter feed - top

First you have register the widget in your twitter account and get a widget ID before it can be used with Pandora.

To get your twitter widget ID follow these steps:

Example:
After you pressed the "create widget" button you were redirected to URL that's similar to this one (look at the address bar of YOUR browser): https://twitter.com/settings/widgets/340149507968868352/edit?focus_textarea=1¬ice=WIDGET_CREATED

The number you need to copy is the one in bold - 340149507968868352


J) Setting up newsletter - top

We are using MailChimp to configure our newsletter form, but there are a lot of services and plugins you can use. Follow these steps:


K) Layout - top

This theme has a Responsive layout with one or two columns (varies for different sections). All of the information within the main content area is nested within a div with a class of "main-content-wrapper". The general template structure is the same throughout the template.

This theme has 3 different layout modes - normal (for 960px or wider screens), tablet ( for screens smaller than 960px ) and mobile (for screens smaller than 768px). Adjust your browser window size to explore them closer.

Pandora uses HTML5, so it will NOT support legacy browsers such as Internet Explorer 6 & 7. Theme is usable with IE8, but not to full extent.


L) CSS Files - top

All the CSS files are located in theme/assets/css/ folder. Most of the theme's CSS is in main-stylesheet.css, but there are others. Checkout.css get used for checkout specific styling, but woocommerce.css contains various overrides of woocommerce default stylesheet.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.


M) JavaScript - top

All the Javascript files are located in theme/assets/ja/ folder. This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in theme.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name. For instance to edit product lightbox, you have to edit "initProductLightbox" etc.


N) Color settings - top

The demo page has 5 different colors options. You can replicate these by setting the following values in your theme visual editor.

Ruby (default):

Blue:

Gray:

Green:

Orange:


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Planetshine

Go To Table of Contents