Health Care Prestashop 1.6 Template

What is one of the most value gift that is given to us by nature?
Of course it is our health. You can not buy it, but you can maintain it on a good level if you will follow some simple rules: do sport, eat quality food, try to avoid stress situations. We really glad to introduce to you a new Prestashop Health Care Theme that specially designed for businesses that sell stuff for healthy life, just like: food, juices, vitamins, supplements and many others.

Drop-down menu will let your customers easily navigate and find the right product for them and their relatives. Catalog filter assists to choose a fitting supplement or any other healthy product, that will help to keep the body young and healthy. By the way responsive template will make navigation and purchase much easier on any mobile device, such as phone or tablet. Just try the demo, to check this awesome template out, and make sure that this is 100% suits you.

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 Insatllation

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. BelVG Custom Blocks Usage

There are four static blocks available in Baby Store Prestashop 1.6 Theme.

1. Info Banner at the top. To change links path and text, select the "Source code" icon:

2. Content Banner below tabs content. To manage these images choose picture, it'll become blue, and then press Insert/Edit Image button.

3. Footer Features Banner. To manage this banner just click edit button. To change icons, choose any icon at Font Awesome and replace <i> tag with yours.

4. Footer Payment Logos. In order to change this image, select it. When the image is selected it gets blue. Now click Insert/Edit Image button and select a new image.

How to add new custom block?
To add New custom block, press the Add New button and fill the filds name and identifier, then select the hook in which you want this block to be displayed.

5. CMS Block Module

Default CMS Block Module is available in the theme. To manage it go to Modules and find CMS Information Block. Press Configure to edit module. To manage blocks press source icon and paste your text. Unfortunately during the installation process we unable to import content for this default module. So we provide it here. Just copy this code for blocks and paste instead of provided by default, then replace with your content.

Code Icons Block:

<ul> <li><em class="icon-truck" id="icon-truck"></em> <div class="type-text"> <h3>Delivery</h3> <p>Free Delivery on orders over $90</p> </div> </li> <li><em class="icon-phone" id="icon-phone"></em> <div class="type-text"> <h3>Contact Us 24/7</h3> <p>8-955-21-09-42</p> </div> </li> <li><em class="icon-credit-card" id="icon-credit-card"></em> <div class="type-text"> <h3>Payment</h3> <p>We accept cache or credit card</p> </div> </li> </ul>

Code About Us Block:

<h3>About Us</h3> <p><strong class="dark">Welcome to our store!</strong></p> <p><img src="yourimage.jpg" width="207" height="207"/> <br /><br />Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <p><a href="#">Read More</a></p>

6. 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, 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:

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() {'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.