“Magik Shop” Documentation by “Magikcommerce” v1.0


“Magik Shop”

Created: 6/1/2014
By: Magikcommerce
Email: support@magikcommerce.com

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. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files

A) HTML Structure - top

This theme is in fixed or flexible layout. Here is the general template structure.

HTML Structure

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure - top

I'm using 6 CSS files in this theme.

1. responsive.css - Used for responsive layout.

2. lightbox.css - Contains lightbox style.

3. easySlider.css - Contains home page slider styles.

4. ios-slider.css - Contains home page slider styles.

5. font-awesome.css - Contains font styles.

6. styles.css contains theme specific stylings. The file is separated into sections using:

	/* === Header Section === */

	some code

	/* === Navigation === */
	
	some code
	
	/* === Sidebar Section === */
	
	some code

        /* === Product View === */

        some code

        /* === Brand Logos Silder === */

        some code
	
	/* === Footer === */
	
	some code
	
	etc, etc. 

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 imports 6 Javascript files.

  1. jQuery
  2. custom.js
  3. cloud-zoom.js / lightbox.js
  4. jqFancyTransitions.1.8.min.js
  5. easySlider1.7.js
  6. jquery_ios.js
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Home page banner slider, Herader cart section & Mobile navigation in this site is carried out from the custom.js scripts.
  3. Based on admin settings Cloud zoom or lightbox effect is carried out from respective js scripts.
  4. Remaining js files are used only if any special effect slider is used from admin settings in the theme

D) PSD Files - top

I've included five psds with this theme:

  1. Home
  2. Grid
  3. List
  4. Details
  5. Cart

If you'd like to change the logo image in the header section, open "home.psd", make the necessary adjustments, and then save file as "logo.png". Do the same for navigation bar gradient color, main banner image in the banner section, footer background color, facebook, twitter, G+ images in the footer section etc.

If you'd like to change the Brand Logos image in the brand logo section, open "home.psd", make the necessary adjustments, and then save the file as "b-logo1.png". Do the same for all brand logos.

If you'd like to change the sidebar section, open "grid.psd", make the necessary changes, and then save the file.


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.

Magikcommerce

Go To Table of Contents