1. START
  2. INSTALLATION
  3. MAKE THE THEME LIKE ON THE DEMO
  4. 1. Default Image Sizes
  5. 2. Module Setup and Positions
  6. 3. Edit Main Slider
  7. 4. Edit Banners
  8. EDIT CONTACT DETAILS
  9. EDIT SOCIAL ICONS
  10. EDIT FOOTER
  11. PSD FILES
  12. HAVE MORE QUESTIONS?
  13. CONCLUSION
  14. UPDATES

Kids Planet

Responsive Retina OpenCart Theme


Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me via Support ticket . I will respond within 24h. Thank you!

INSTALLATION


Install a fresh copy of OpenCart on your server. This template is compatible with OpenCart version 1.5.5.1. Here is a video about how you can install OpenCart 1.5.5.1 on your server.

Once the installation is done, upload the folder called “kids” on your server in this location: /catalog/view/theme/
After that, upload the admin folder on your server (main directory). The "admin" folder is already exist there, so you just need to replace it.
Inside the "social-module" folder you will find other 2 folders. Upload those 2 in your public_html folder (main directory). This will create another module where you can enable the Facebook and Twitter tab widgets.

Finally, login to your admin area then choose System -> Settings and edit your default store by clicking on the right side Edit button. After you clicked the Edit button, choose the Store tab then choose kids from your Template drop down menu. The Default Layout will be setup as default.

Congratulations! Now you have the theme installed and setup as default, you can open your website and you will see the theme working.

MAKE THE THEME LIKE ON THE DEMO

1. DEFAULT IMAGE SIZES

To have an exact look as in the sample website (demo), please follow the next steps:

Setup the size of the images as follows. In the admin area, please click on System -> Settings, then click on Edit to make changes to your default store, then choose the Image tab. On this tab you can change the logo too. Your image sizes should look like this:

2. MODULE SETUP AND POSITIONS

Activate the following modules from your admin area and make the right settings. See the sceeenshots below:

Account Module

Affiliate Module

Banner Module for Layout 1 (Main slideshow + 3 right side banners)

Banner Module for Layout 2 (Full width main slideshow + 3 banners under)

Bestsellers Module

Category Module

Featured Module

Latest Module

Slideshow Module for Layout 1 (Main slideshow + 3 right side banners)

Slideshow Module for Layout 2 (Full width main slideshow)

Theme Settings Module
In this module you can adjust the background color, background pattern, layout type, menu items font and headings font.

Social Settings Module
Fill the fields like show below and add layouts (pages) where you'd like to show the Social module.

3. EDIT MAIN SLIDER (SLIDESHOW)

The theme allows to use 2 sizes of main slider. 2/3 slideshow size (main slider + 3 right side banners) and fullwidth slideshow. The default size of the image for the 2/3 slideshow is 1540 x 940px (in retina mode) or half of the size 770 x 470px (in normal mode) so it is better to keep the same size on your website too. The default size of the image for the fullwidth slideshow is 2340 x 940px (in retina mode) or half of the size 1170 x 470px (in normal mode) so it is better to keep the same size on your website too.

1. Go to your admin area and choose System -> Design -> Banners.
2. Click on the Insert button on the right side.
3. Type the name of the new Slideshow add an image by clicking on the Add Banner button.
4. Once you do that, you will be able to browse for the image you need. You can add multiple images to a banner container in order to make a slideshow.
5. Finally, assign this new created banner to your Slideshow module in the Extensions -> Modules -> Slideshow -> Edit area.

4. EDIT BANNERS

The default banner size is 740 x 340px (in retina mode) or half of the size 370 x 170px (in normal mode) so it is better to keep the same size on your website too.

1. Go to your admin area the choose System -> Design -> Banners.
2. Click on the Insert button on the right side.
3. Type the name of the new Banner then add an image by clicking on the Add Banner button.
4. Once you do that, you will be able to browse for the image you need. You can add multiple images to a banner container in order to make a slideshow.
5. Finally, assign this new created banner to your Slideshow module in the Extensions -> Modules -> Slideshow -> Edit area.

EDIT CONTACT DETAILS


1. Login to your admin area.
2. Choose System -> Settings and edit your default store by clicking on the right side Edit button.
3. Fill in the fields

4. Click the Save button at the top right corner.

EDIT SOCIAL PROFILES


1. Please go to /catalog/view/theme/kids/template/common/.
2. Open the footer.tpl file with any text editor.
3. Find the following code:

and instead of # insert the link to your profile.
4. Save the file, then upload it back on the server.

PSD Files


There are 10 well-organized layered PSD files which can be edited with Adobe Photoshop program:

HAVE MORE QUESTIONS?


Please visit the online documentation. There you will find all the info about the essentials tools used for managing your store front through the administration side. It will walk you through the important sections of the administration interface: Catalog, Extensions, Sales, Systems, and Reports. Moreover you will get to know which part of your store front each section is responsible for, and how you can modify them in the administration side to meet your store’s needs. Important store procedures, such as adding products to your store, keeping track of sales, managing customers, changing layouts, adding extensions, and more is explained in this guide.

CONCLUSION


As we are on the last lines of this documentation, I would like to thank you again for purchasing this theme. If you have any questions or you need any help, please feel free to contact me via Support ticket . I will do my best to answer to your questions as soon as possible.

Also, please keep in touch because I will post updates and they are FREE for any client. Thank you!

Please don't forget to rate & comment this file on ThemeForest (choose your downloads tab then click on the 5 star :D ), it really will help everyone! :)

UPDATES


Version 1.1.
FIXED: IE8 and IE9. The header.tpl file needs to be replaced on your FTP: catalog/view/theme/kids/template/common/.

Version 1.2.
ADDED: Theme settings admin module.

IMPORTANT: Before uploading it on the demo server, please make a backup of the current template files.
How to make the update:
1. Upload the "admin" folder on your server, it should add some files in your admin folder for the "ThemeSettings" module.
2. Replace the template files with the new one (the "kids/kids" folder).
3. Go to your admin area, Extensions - Module and install the "ThemeSettings" module.
4. Play with the settings and enjoy!

Version 1.2.1
ADDED: Pagination to the main slider.

How to make the update:
1. Replace the slideshow.tpl file in catalog/view/theme/kids/template/module folder.
2. Add the pag.png file in the catalog/view/theme/kids/image folder

Version 1.3
ADDED: arrows to the main slider.
ADDED: "Sale!" label to the products with a discount.
ADDED: Full width slider and 3 banners under the slider.
ADDED: Font settings. Now it's possible to set any Google web font for the menu and headings.
ADDED: social module: Twitter feed and Facebook tabs.
ADDED: a dummy image in case a product doesn't have an image.

IMPORTANT: Before making the update please make a backup of your website.

How to make the update:
1. Upload the "admin" folder in the public_html folder on your server.
2. Upload the "kids" folder in the catalog/view/theme folder. Or upload the new image folder (added the dummy image and the 2 arrows for slideshow), the module folder, the style.css file, the common folder.
3. Inside the "social-module" folder you will find other 2 folders. Upload those 2 in your public_html folder. This will create another module, different than Theme Settings module, called Social Settings, where you can enable the facebook and twitter option. See how to adjust the Social Settings Module in the MODULE SETUP AND POSITIONS chapter.
4. After uploading all the files, first uninstall the existing Theme Settings module if it existing on the website, then install it back - it must do some updates in the database.
5. When you want to use the Layout 2 (full width slider), you must set the "Banner" module position to "Content Top" and Sort order as 10, 11, 12. When you use Layout 1 (normal slider with 3 banners on the right side), you must set position to banners on "Column Right".
6. The "Sale!" label will appear only for the products where you set a special price.
7. You must set the demo panel to be hidden from the Theme settings module before you see any changes.

Version 1.3.1
FIXED: product carousels on the homepage for mobile devices.
FIXED: product image carousel on the product page.

IMPORTANT: Before making the update please make a copy of the product.tpl, script.js and style.css files in case you made any changes in those files before.

How to make the update:
1. Replace the product/product.tpl file on your server.
2. Replace the js/script.js file on your server.
3. Add the js/owl.carousel.js file to the js folder on your server.
4. Replace the stylesheet/style.css file on your server.
5. Add the stylesheet/owl.carousel.css file to the stylesheet folder on your server.