USER GUIDE

SELLON Prestashop 1.6 Template

What do you expect from the online store that sells fashion clothes and accessories? I think that is a full and clear perception of the product. When a customer is 100% sure that the certain item perfectly suits him, he has no doubts whether to buy it. So give this perception to your clients with our new Sellon Prestashop 1.6 Responsive Theme.
Place any information easily in static blocks on the homepage. Every customer will appreciate the beautiful product-list, which gives a perfect presentation of the items. And after a customer has had a first quick look at the product, he needs much more information exactly on a product page. Product page with vertical product thumbnails orientation gives a 360 degree overview of a product. Additionally responsive design adjusts the theme to any screen, whether it is mobile phone or tablet.

1. Prestashop 1.6 Theme Installation

In order to install a new theme from Admin Panel, please follow these steps.
Go to Preferences–> Themes and press Add new theme button.

Upload Zip of the theme in the next window.

2. BelVG Custom Blocks Installation

Important!  First go to Modules, find BelVG Custom Blocks and Press Reset Button.

Module will appear in Dropdown Modules List and will available for configuration.


P.S. In case you've made design changes and these changes have broken custom blocks (if the changes were incorrect), simply reset the module, and the blocks will look as they used to.

3. How to change product grid?

In order to change product grid from 3 products to 4 or 6 products, you need to edit product-list.tpl file in homedsgn theme folder. Prestashop uses boostrap grid, so you can change column class to change grid. Find this code: < li class="ajax_block_product {if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-4{else} col-xs-12 col-sm-6 col-md-4{/if}> . Change col-md-4 to col-md-3 and you'll get 4 col grid. Also you need to change number of products per line in the beginning of product-list.tpl file. More information about how to change prestashop product grid read in the article at blog.belvg.com

4. Sass Compiling

The theme supports Sass CSS preprocessor. .scss files available for compilation located in SASS Theme folder. It's easy to change main color, buttons border-radius, header or body background using variables that are described in _theme_variables.scss file. Just change $primary-color value to yours and the website will turn to a new color after Sass compilling. You can also change the $btn-border-radius value which now is 35px to yours and all the buttons will change its radius. The same way you can change any variables that are described in _theme_variables.scss file.

How to compile Sass?

You can compile Sass locally on your machine, using programs like CodeKit, Scout, Koala and others described here sass-lang.com, and then upload your css files to server. Also you can use Gulp to compile Sass and upload css to a server.

To install gulp you first need to install “Node Package Manager”: nodejs.

After installing Node Package Manager, install gulp following gulp getting started doc: https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

Then go to your local Prestashop directory and create file: “gulpfile.js”, where you can write gulp configuration using javascript. Here is configuration which will upload css to server.

// Required modules var gulp = require('gulp'), runSequence = require('run-sequence'), sftp = require('gulp-sftp'); // Upload files to server. We use gulp-cached to upload only changed files. gulp.task('upload-css', function() { return gulp.src('css/**/*.css') .pipe(sftp({ host: 'host', port: port, user: 'user', pass: 'pass', remotePath: '/path/' })); }); gulp.task('watch', function() { gulp.watch('css/**/*.css', function() { runSequence('upload-css'); }); }); // Set watch as default gulp task gulp.task('default', ['watch']);

Open terminal and run gulp task, it will upload compiled css files to remote server.