USER GUIDE

Flower Kiosque Prestashop 1.6 Template

Flowers are the best gift for women and a universal gift for any celebration either. If your business is connected with flowers delivery then you will be glad to know all the advantages of our new Prestashop 1.6 Flower Kiosque Responsive Template. This theme is visually glorious and it has very rich functional at the same time. Represent your best offers and new arrivals on a big slider and beautiful gallery on the homepage.

Customers can easily look through the products with quick view option. Extended filter in catalog will help your customers find the right bloom box or flower bouquet that will be ideal surprise for loved ones. With a help of rating and reviews option on a product page your customers can simply share their opinions about your product. Flower Kiosque Theme will make your webstore look perfect, professional and reliable. Besides, responsive template allows your webstore quickly shape up to any device with any screen size and format. All of the blocks are flexible, whether it is a text or images, everything could be perfectly adapted to required screen. Take your sales to the next level with awesome appearance and functionality.

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 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.