Documentation by “24WebGroup”

Vista - Premium Responsive OpenCart Theme

Updated: 18/07/2014
By: 24WebGroup
www: http://24webgroup.com
Email: 24webgroup@gmail.com

Thank you for purchasing my theme! If you have any questions that are beyond the scope of this help file, please contact with our 24WebGroup. Thanks so much!

Subscribe for FREE themes updates and news: Twitter

Table of Contents

  1. Overview
  2. Theme installation
  3. Page layout setting
  4. Home Slider Setup
  5. Home Feature Box setup
  6. Vista Module Configuration
  7. Theme Admin module usage
  8. Add Twitter API
    9. Advanced information:
  9. Project structure
  10. Contacts and support

A) Overview - top

Vista - Premium Responsive OpenCart 1.6.x,1.5.5.x,1.5.4.x theme with stylish design and powerful backend.

Vista is a brand new premium responsive OpenCart theme which is fully customizable and suitable for any kind of OpenCart store on any device. Vista OpenCart theme is perfect for all creative stores to showcase products, art, photos or other inspiring content. The design is easy and clean with a lot of white space which means that your content, products are in focus in a stylish way. Vista comes packed with great features and options such as responsive design making the theme adapt and scale to look perfect on any devices. It include a theme options panel, custom styles, ready for translation and much more. This responsive theme is a multi purpose responsive theme which can be highly customized and tailored for any heavy OpenCart store.

Clean and modern theme design allows you to use this theme for every kind of online shop.

Unlimited theme colors, with 1 Addons included with modern design, powerful backend and it’s created with using the latest HTML5 and CSS3 features. Theme Editor with easy navigation and dozens of configuration options allows you to change every thing in Theme Setting Panel. You can manage colors of theme elements also available 3 color skin ,You can change all settings in every Skin in Theme Setting Panel.

Please, dont forget to leave a stars rating for this theme! Go to "Downloads" tab in your ThemeForest account ( http://themeforest.net/user/YOUR-LOGIN/downloads - change YOUR-LOGIN to your nickname), find my theme and click to rate! This helps for making future theme updates and new features!

B) Theme installation - top

  1. I recommend you to read OpenCart documentation to get know how to use all features in this engine.
  2. If you are using Windows based (XAMP/MAMP/Other) hosting/server be shure that PHP settings "short_open_tag" is set to ON. Contact your hosting probider if you dont know how to set this PHP value, before installing theme. If your short_open_tag = OFF you will get error "unexpecting end of file" after theme installation on Windows based server.
  3. First of all install latest (1.5.6,1.5.6.x) official Open Cart version from Open Cart website. If your have older OpenCart update it to 1.5.5.1 or newest version.
  4. Open folder UPLOAD from purchased archive and upload all content inside it (folders image, catalog and admin) to your installed Open Cart directory:

    You can Drag and drop the admin, image and catalog folders into your site using your favourite FTP client (If you don’t have one, we recommend Filezilla).

    You will be asked if you want to replace some of the files from your current installation - you must click YES to replace all files.
    Don't worry - no core files will be replaced, all your old modules and themes will works as always.

    If you are Mac OS user we strongly recomend to use FileZilla client for theme upload, becouse MacOS finder can replace folders with files incorrect!
  5. Go to your Open Cart admin panel System > Settings > Edit. Click Store tab and choose vista theme for "Template" option. This action will activate your new theme.
  6. Go to your Open Cart admin panel System > Settings > Edit. Click Image tab to open Image settings.
    Setup this image sizes:
  7. IMPORTANT: If you want that your product images and thumbnails will fit theme nice (like on demo site) we recomend your to use 1000x1000 px image size for your product photos! (or other size proportional to this size).
  8. Go to your Open Cart admin panel System > Settings > Edit. Click Option tab and set Default item per page value to 10:

  9. In your Open Cart admin go to Extensions > Modules.
    In ANY module with product display (Features, Latest,Bestsellers, , etc) that you want to use now or later you must set correct image size (228x319) for product display:

  10. In your Open Cart admin go to Extensions > Modules and click Install near to "24WebGroup Theme Setting Panel" module:
  11. In your Open Cart admin go to Extensions > Modules and click Edit near to "24WebGroup Theme Setting Panel" module. You will open Theme Setting Panel.
  12. Click "Save theme settings" button first time, because you use this module firstly.
    Now module is setuped to work with Theme, but you need to configure some features that you need in this Theme Setting Panel.

C)Page layout setting - top

Home page layout setting might like live preview sept by step

Header

The following block identifiers can be used to display blocks in the header section of the store:

  1. Currency block Module
  2. Language block Module
  3. OpenCart default links on header
  4. OpenCart default my account link on header
  5. Vista logo Login to your back-office and go to System->Settings->Click edit go to Image section like screen short you can add all logo for your shop
  6. OpenCart default search on header
  7. OpenCart default menu on header
  8. Vista navigation block ->24WebGroup Theme Setting Panel->Main Menu tab->Show Custom HTML block into Main menu
  9. Cart block Module
  10. Facebook like box -> 24WebGroup Theme Setting Panel->Footer tab->Facebook Like Box under Facebook Page URL

Home page content section blocks

The following block identifiers can be used to display blocks in the content section of the store home page:

  1. Vista navigation block ->24WebGroup Theme Setting Panel->Home slider tab->Add home slider
  2. Features box ->24WebGroup Theme Setting Panel->General theme settings tab->Show Custom HTML block into Main menu
  3. Featured Products module
  4. Latest products module
  5. Banner Module
  6. Best Seller Products module
  7. Carousel Module

Footer

The following block identifiers can be used to display blocks in the content section of the store home page:

  1. About us ->24WebGroup Theme Setting Panel->Footer tab->Footer Contact Information->About us info page on Footer
  2. Customer Service OpenCart default on footer
  3. My account OpenCart default on footer
  4. Footer Contact Information ->24WebGroup Theme Setting Panel->Footer tab->Footer Contact Information->contact info page on Footer
  5. Social icons ->24WebGroup Theme Setting Panel->Footer tab->Social icons link add
  6. Twitter ->24WebGroup Theme Setting Panel->Footer tab->Twitter Feed box.
  7. Powered by ->24WebGroup Theme Setting Panel->Footer tab->Powered by
  8. Payment Icons links ->24WebGroup Theme Setting Panel->Footer tab->Payment Icons links

Product page layout setting might like live preview sept by step

The following block identifiers can be used to display blocks on the product page::

  1. Product custom block ->24WebGroup Theme Setting Panel->General theme settings tab->Product page->Sidebar custom content
  2. Custom tab ->24WebGroup Theme Setting Panel->General theme settings tab->Product page->Tab content/Tab title
  3. Related Product from product section.
  4. Featured product module.

Category view layout setting might like live preview sept by step

The following block identifiers can be used to display blocks in the category view:

  1. Categories block module
  2. My account block Module
  3. Category Page view mode ->24WebGroup Theme Setting Panel->General theme settings tab->Category page ->Category Page view mode

D)Home Slider setup - top

  1. Go to Extensions > Modules > 24WebGroup Theme Setting Panel (click Edit button at the Top). You will see Theme Setting Panel.
  2. Click Home Slider section in top menu.
  3. Copy to code and paste your editor with change your slider text code below to Slides code textarea in admin panel:

  4. You should see something like this now:


    This is Sample Content Slider code with 3 sample slides with different animations and effects.

  5. Click Save theme settings button.

  6. All sample Slider images located at "catalog/view/theme/vista/image/slider" , you can change just it and change links on links/buttons in sample sliders code.

E)Home Feature Box setup - top

  1. Go to Extensions > Modules > 24WebGroup Theme Setting Panel (click Edit button at the Top). You will see Theme Setting Panel.
  2. Click General theme setting->Layout section in left menu.
  3. Copy to code and paste your editor with change your slider text code below to Slides code textarea in admin panel:

  4. You should see something like this now:

  5. Click Save theme settings button.

F)Vista Module Configuration - top

Featured,Latest,Banner,Bestsellers,Carousel,Account,Affiliate,Category,Information Modules

Featured module

  1. Go to Extensions > Modules > Featured module->(click Edit.
  2. You can manage featured product module .

Latest module

  1. Go to Extensions > Modules > Latest module->(click Edit.
  2. You can manage Latest product module .

Banner module/Carousel are like same system you can made it

  1. Go to System > Design >>(click Banner made for banner module.
  2. Then (click insert button.
  3. Then (type your banner module name also add your banner image on here.
  4. After click save button .
  5. Now Go to Extensions > Modules > Banner module->(click Edit and select your banner module name like below system.

Bestsellers module

  1. Go to Extensions > Modules > Bestsellers module->(click Edit.
  2. You can manage Bestsellers product module .

Account module

  1. Go to Extensions > Modules > Account module->(click Edit.
  2. You can manage Account module .

Category module

  1. Go to Extensions > Modules > Category module->(click Edit.
  2. You can manage Category module .

Information module

  1. Go to Extensions > Modules > Information module->(click Edit.
  2. You can manage Information module .

G) Theme Admin module usage - top

  1. In your Open Cart admin go to Extensions > Modules and click Edit near to "24WebGroup Theme Setting Panel" moduie. You will open theme control panel.
  2. Use top and left tabs to access all theme features settings and setup what you want.

    3. body font,heading font style change, use two type of font system or google,More than 500+ google fonts are included, ,product page in sidebar or without sidebar in all product box show the rating, quick view , sell and new icon button style, category page products default view style, unlimited theme color, you can change all text and bg color without css and html , background Images show hide. You can upload custom Pattern and change a background for your online shop now have , you can add social media facebook like box,twitter feed box you can add to custom HTMl for online shop product page, footer link and copyright information,you can add the payment icon link

    General theme settings

  3. Dont forget to click "Save theme settings" to apply your changes!

H) Set Twitter API - top

Go to catalog/view/theme/vista/image/twitteroauth/index.php need to open on your editor after find out this function like below code

  • public function __construct() {
  • $this->consumer_key ="b9XpzI3Yq1s6Y9xtbKdlnA";
  • $this->consumer_secret ="mrst4y7MhV49yoFNnha3DzdxPGgNrGQ9f7zSIGGkJ7I";
  • $this->user_token ="1695668072-gEIQdYw9hfqnSdvpLGuZAaFqNCNofYMBUZBnNwX";
  • $this->user_secret ="8fr1Y6bxWdeiUB3M8CsXzHmTFONT1sFdcUh3pFSAIOhqj";
    • }

    I) Project structure - top

    J) Contacts and support - top

    Once again, thank you so much for purchasing this item. 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.

    Please, dont forget to leave stars rating for my app on ThemeForest. You can do this in Downloads section in your profile.

    24webgroup

    Go To Table of Contents