“Callisto Responsive Shopify Theme ” Documentation by “Planetshine” v1.0

“Callisto Responsive Shopify Theme”

Author: Planetshine
Support: Support Forums
Newsletter: Subscribe

If you have any questions that are beyond the scope of this documentation, please contact us via our support forums.
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. Layout
  2. CSS Files
  3. JavaScript
  4. PSD Files
  5. Installing Theme
  6. Accessing theme settings
  7. Uploading your custom logo
  8. Switching theme styles
  9. Creating dropwdown menu
  10. Setting up homepage slider
  11. Adding "SALE" icon to products
  12. Creating a contact form
  13. Binding variants and images
  14. Setting up footer twitter feed

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.

B) CSS Files - top

This theme has two main CSS files - one for each theme style (main-stylesheet.css.liquid and dark.css.liquid), two extra files for Internet Explorer compatibility in both styles(ie.css.liquid and ie-dark.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 global.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) PSD Files - top

E) Installing Theme - top

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

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

H) Switching theme styles - top

You can switch between dark/light theme styles at any time, using the radio buttons under "Theme Style" in your Theme settings. However it is recommended that you do it by switching presets instead. Presets can be changed using select box in the right side of Theme settings page. It is very important that you save/overwrite your settings to presets once you have finished making changes, because switching to a preset will replace all your settings with those stored in a preset.

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

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.

J) 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. Each slide can display either a text or a price tag. You can select type using select box "description type".

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

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

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


You can see an example here.

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

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

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.


Go To Table of Contents