“Pandora Responsive Shopify Theme ” Documentation by “Planetshine” v1.1


“Pandora Responsive Shopify Theme”

Created: 14/12/2012
By: Planetshine
Email: support@planetshine.net

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Layout
  2. CSS Files
  3. JavaScript
  4. Installing Theme
  5. Accessing theme settings
  6. Uploading your custom logo
  7. Creating dropwdown menu
  8. Setting up homepage slider
  9. Adding "SALE" icon to products
  10. Creating a contact form
  11. Binding variants and images
  12. Using color presets
  13. Setting up footer twitter feed
  14. Newsletter
  15. Using Google fonts with theme

A) 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.


B) CSS Files - top

This theme has two CSS files - main-stylesheet.css.liquid and a checkout css file (checkout.css.liquid).

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.


C) JavaScript - top

This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in global.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.


D) Installing Theme - top

For more information regarding Shopify theme setup, please refer to Theme Setting Guide.


E) Accessing theme settings - top

Open your Shopify admin panel and go to "Themes" -> "Theme Settings" in the top menu. There you will find all the settings available for this theme.

For more information regarding Shopify theme settings, please refer to Theme Setting Guide.


Go to theme settings and open tab "Header and Logo". There you will find a select box that allows to choose between using a textual logo and a picture. If you select the picture, you can upload it using the upload form right below. Don't forget to also write your shop's tagline.


To create a dropdown menu, first decide on which menu item in your Main Menu you would like to have as a dropdown. From the Navigation tab in the Shopify Admin, create a new "link list". The title of this "link list" must be the same as the title of the menu item from your Main Menu. For example, if you have a Main Menu with a link called "Collections", create a new "link list" with the title "Collections". Each link in this new "link list" will appear as a dropdown under "Collections".

For more information regarding Shopify drop down menus, please refer to this article.


H) Setting up homepage slider - top

You can setup homepage slideshow in theme settings page under the "Homepage Slider" tab. You can have at max 5 slides, whom you can enable one by one using checkboxes given.


I) Adding "SALE" icon to products - top

To add icon with text "Sale" to a product, you just have to specify a compare price in the management page for the specific product.


J) Creating a contact form - top

There is a special page template specifically for contact forms. To use this layout, you'll need to select the page.contact template when editing a page.


K) Binding variants and images - top

If you wish to bind/link some of your product variants with specific images, so that, when user clicks on a image a variant gets selected & the other way around, then follow these steps:

assoc

You can see an example here.


L) Using color presets - top

Pandora has 4 different setting presets included by default:

These presets allow you to use a different color stylings. To apply a preset, you must go to your theme settings and select a preset from the select box on your left.


M) Setting up footer twitter feed - top

Twitter has made changes to how embeded Twitter feeds work. This means, that from now on, you have register the widget in your twitter account and get a widget ID before it can be used with Pandora. The old twitter feeds may stop working any minute. The new embeddable timelines are interactive, so readers can reply, retweet and favorite tweets straight from your theme + it's scrollable.

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


N) 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:


O) Using Google fonts with theme - top

Pandora allows you to add one custom google font, that can be used for titles, menus and other texts in theme. To do that you must paste the include URL for your desired font in the text box for "Custom Google font URL" and the name of the font in the following box. Here's an example:

Now when you select a "custom font" option for any of the position in typography section, the font we added previously will be used.


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