Venedor - Premium Responsive Prestashop Theme


This document covers the installation and use of this theme and reveals answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. You can find always fresh version of this documentation by this URL

To install this theme you must have a working version of Prestashop already installed. For information in regard to installing the Prestashop platform, please see the Prestashop Documentation

Requirements

PHP configuration:

Optional PHP extensions:

Permissions

Please also check "Configuration Informaion" in "Advanced Parameters" of your BO. All parameters should be "OK", like this:

If you don't know how to check these requirements, ask your hosting provider.

Video installation tutorial

Look at this video of installation process:

Automatic theme installation

To install this theme automatically do the following steps:

  1. Extract downloaded archive.
  2. Login to your back-office and go to "Preferences" > "Themes" page.
  3. Select archive from extracted folder "themes", and click “Save” button.
  4. On this step click “Use this theme” button.
  5. On this step you will get information about theme installation status. All modules should be checked. Click “Save” button
  6. Next step will inform you about modules installation status and images settings update. Click “Finish” button
  7. Go to "Preferences" → "Images". Click to "Regenerate thumbnails" button, and wait till it’s done.

Congratulations! You have installed your new theme! To check it out go to the front-end of your online shop and take a look at it!

You can choose the type of product images that will suit your products the best. Images can be vertical rectangular (a form well suited for clothing), square (the best for shoes, accessories, electronics, etc.) or horizontal rectangular (furniture, auto, etc.).

By default Venedor theme has the following proportions of product images 0.75:1. We advise you to set the rectangular image dimensions according to the following screenshot:


If you decide to use square (with proportions 1:1) images set following dimensions:


For horizontal rectangular images with proportions 1:0.7 use following dimensions:


Please notice that "small_default" type is required for back office images, so it should exist as well.

  1. General Settings
  2. Background
  3. Logo
  4. Buttons
  5. Typography & Colors
  6. Home Page
  7. Category Page
  8. Product Page
  9. Custom CSS
  10. Email Settings
  11. Social Accounts
  12. Coming Soon Page
  13. Payment Icons

Presets — We have prepared several presets to make your life easier. Each preset has his own set of modules, their position, and color scheme. You can choose any preset and edit it as you like.

Icons for main categories — This feature allows you to upload icons for main (top level) categories, and show them in the "Category block" module

Show a message about using cookies — This option intends to deal with the EU Directive on Privacy and Electronic Communications that comes into effect in the UK on 26th May 2012. From this date on, you run the risk of enforcement action if you are not compliant or visibly working towards compliance. More information can be found here: cookielaw.org

Contact block in the header — You can show or hide contact information what located in the header section

Position of search block — Choose position of seach block, left or right side of header

Scroll to Top — allows you to quickly jump back to the top of any page! Once you scroll far enough down on a page, the button will appear in the bottom right corner. Click it, and you will be taken to the very top in no time!

Stylized tooltips — allows you to style native browser tooltips easily.

Allow to hide modules content on mobile devices — This feature can be usefull to make your shop more compact on mobile devices. You will get "+" buttons near the module block title which allows your customers show or hide module content.

Map on the bottom of the shop — shows a map with pointer to your address. To change address to yours just type it in the field.

Map at the Contact Page — shows a map with pointer to your address.

Text in the footer section — put your text to the footer, for example copyright. You can use HTML tags in that field.

Theme Updater — this function will update Venedor theme and Venedor modules to latest version automaticaly.

Please be careful, automatical update will override some files of theme and modules. You can lose your custom code. To avoid that please make a backup.


Background color — defines the background color of your shop.

Background image. You can add your images as background. Image can be showed in center, on the right, on the left, and repeated horizontally, vertically or in both dimensions.


Patterns. Select one of predefined patterns. You can use it along with the background color, in this case you will get overlay effect.


Logo type — You can display your logo as a text or as an image. If you already have your logo, just upload it. Or you can generate your logo directly in the sections below.

Logo options — Type the name of your shop, choose a color, font-family, font-size and line-height.

Slogan options — The same parameters for slogan.

Align center — Allows you to align logo by center

Logo position — You can manage the position of your new logo by clicking to the arrows.


In the section above you can configure the view of theme buttons


There are two main fonts using in the venedor theme. Oswald is for main text of the theme like headings, and PT Sans is for subheadings, prices, etc...

Theme Color. Venedor has two basic colors. You can change them in this section.


Homepage Column. By default the column on homepage is disabled, but you can enable it if you need.

This section allows you to configure the modules on your homepage. Just click to "show" button to display that module. Each module has a button "Edit" to go to the module settings.

Please be sure the module you have enabled is active, in other case you will not see it on your front office


Listing View — You can specify the default view of product listing (List of grid). This option can be overridden by buttons on category page.

Category title and image on the category page — You can hide or show category title and image.

Show subcategories — You can hide or show subcategories, for example if you have a lot of subcategories.

Show layout control buttons — You can allow your castomers to change the view of product listing.

"Reduced Price" label — Allows to hide "reduced price" label if you need.

Color labels — Allows to hide color labels.


Product Video — You can disable video section if you don't use it. To add or change the video open the product settings "Catalog" > "Products" > "Edit (Your Product)" and find the tab "Venedor theme settings".

Custom Tab — You can disable additional custom tab if you don't use it. You can add any text or images to a custom tab.

Size Selector Type — You can display product options like a default radio button view, our custom view.


Add your custom css into this textarea.


This section defines email settings. Just fill all the fields you need and all settings will appear in the emails that your customers receive. In the very bottom you can find the button "Fix it". You can use it, for example, after the update of your prestashop to the latest version, or if you have some problems with emails (broken images, no confirmation emails, etc...).


Fill your social account information. You can show icons in the footer and use these accounts in the email templates.


Here you can manage your "Coming Soon" page. Select a time when your shop will be open. Write a message what you want your customers read.


Here you can choose what payment systems accepted in your shop. and show them in the footer.

You have two ways to update Venedor to latest version, automatically or manually:

The fisrt way to update Venedor automatically

  1. Go to the settings of "Theme settings" module
  2. Open first section "General settings"
  3. Find in the very bottom "Theme Updater" function.
  4. Click to "Update Theme" button
  5. Enjoy

The second way to update Venedor manually

  1. Make backup of your shop.
  2. Go to "Advanced Parameters" > "Performance" and set "Template compilation" to "Force Compile" and "Cache" to "no"
  3. Upload "themes" and "modules" folders from latest version "Archive/updates//X.X/ to the root of your prestashop.
  4. Enjoy

The list of modules:

  1. Theme Settings (pk_themesettings)
  2. Banners Carousel (pk_bannercarousel)
  3. Blocks of features (pk_features)
  4. Bottom Products Carousel (pk_productsCarousel_bottom)
  5. Column Slider (pk_columnslider)
  6. Custom Links (pk_customlinks)
  7. Custom blocks (pk_reinsurance)
  8. Facebook LikeBox (pk_facebooklike)
  9. Featured Categories (pk_featuredcategories)
  10. Flex Menu (pk_flexmenu)
  11. Fun Facts (pk_funfacts)
  12. Isotope Product Filter (pk_isotopeSort)
  13. Livechat PureChat (pk_purechat)
  14. Manufacturers Carousel (pk_manufacturersCarousel)
  15. Message Block (pk_message)
  16. Product Carousel with Tabs (pk_productsCarousel)
  17. PromoBanner block (pk_banner)
  18. Promo Minic slider (pk_minicslider)
  19. Revolution Slider (revsliderprestashop)
  20. Simple Blog (ph_simpleblog)
  21. Single Product Carousel (pk_productsCarousel_single)
  22. Sequence Slider (pk_sequenceslider)
  23. Customer Testimonials (pk_testimonials)
  24. Twitter Block (pk_twitterwidget)
  25. Vertical Flex Menu (pk_vertflexmenu)

Banners Carousel

This module allows you to display three advertising banners on your homepage. You can look at slider settings below:

Recommended image width in "Carousel" mode is 370px

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "displayHome".



Blocks of features

Show your main shop features to your customers. This module looks like this:

You can look at module settings below:


Recommended image dimensions is not over 100X100 pixels.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "displayHome".



Bottom Products Carousel

This is the same carousel module as "Product Carousel with Tabs", but specified to display only one type of products.

HOOK: Default hook of this module is "bottom_content".



Column Slider

This small slider allows you to advertise your products, categories, services, etc... in the left/right column.

Recommended image width is 268px.




This module allows you to create custom links and display them in the header. Module already has four predefined links with dropdown function.


You can add your custom links, or use predefined links with dropdown sections.
"Order list" function works for custom links only.

  • Watch List — displays five latest products you watched as dropdown list
  • My Favorites — displays your favorite products as dropdown list
  • My Wishlist — displays your wishlist products as dropdown list
  • My Account — has no dropdown option. Just a link to your account page
  • Compare List — displays products which are in the comparison list
HOOK: Default hook of this module is "DisplayNav".



Custom blocks

This module has the same settings like Blocks of features but looks like this:
Recommended image dimensions is not over 100X100 pixels.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "displayHome".



Facebook Like Box

Display your facebook fans in the footer section. Just put your account name.


HOOK: Default hook of this module is "footer".



Featured Categories

This module allows you to show your featured categories to promote them


HOOK: Default hook of this module is "wide_middle_section".



Flex Menu

Flex Menu allows you to create unique submenu for each menu item. You can look at demonstration video:



The view of main page of Flex Menu. Here you can add new menu items, change their position, and remove them.


The view of subpage of Flex Menu Item.

Item — choose the main link of current menu item
Active — allows to deactivate current menu item
Narrow Menu — make dropdown menu as a simple list of links
Background — add background image to the right bottom corner of dropdown section
Content — this is a scheme of sections of dropdown menu
    Button — enable/disable current section
    Section Name — allows to enter to section settings by click


Links — Select any available link in your shop. If you choose a category what has subcategories, all subcategories will be shown.
Products — Select any products you want to show in dropdown section.
CMS Pages — Choose one of CMS page to show content.
Video — Put the link to your video (youtube or vimeo).

You can add advertising images to promote some products or category. Show manufacturers images to simplify select for your customers. Select and show products in different sections to promote them. Add custom links and show theme in any section.

HOOK: Default hook of this module is "menu".



Fun Facts

This module allows you to show some interesting facts from your shop or team, like the number of sold products, registered customers, working time, etc...
You just neeb to write a title of the fact and a number.


HOOK: Default hook of this module is "wide_section" and can be placed to "displayHome" hook as well.



Isotope Product Filter

This module allows you to show New/Special/Featured/Bestsellers in one place and switch between them. You can add products to module section automatically. You only need to put the number of products you want to see at your frontpage.


Or you can manually pick a products.


Modules will automatically determine whether the product is "new", "featured", "special" or "bestsellers" and separate them by sections. If you set the number to 5 (for example) the module will take the last 5 products of each type (new/featured/special/bestsellers) and in total you should get 20 products. But if some type doesn't has 5 products, you will get lesser number

SCRIPT: Module animation based on Isotope.
HOOK: Default hook of this module is "Top_carousel", but it can also be hooked into the "DisplayTop (Top of Page)".



Livechat PureChat

100% Free Live Chat For Your Website
To add chat to your shop, you need to create an accout on following service: https://www.purechat.com.



Manufacturers Carousel

Display carousel of manufacturers images. The quantity you can specify in the settings.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "Top_carousel", but also can be hooked into the "DisplayTop (Top of Page)".



Message Block

This module has the same settings like Blocks of features but looks like this:
HOOK: Default hook of this module is "displayHome".



Product Carousel with Tabs

Product carousel allows you to show featured, special, bestsellers or new products as carousel. If you select more than one product type you shall get carousels in tabs. You also can specify which tab should appear first.

To make your carousels "lighter", you can disable "hover effect" which load additional product images.

SCRIPT: Module animation based on Flexisel.
HOOK: Default hook of this module is "displayHome".



PromoBanner block

This module gives you an option to show simple advertising banner. Look at module settings:
You can put your link and small description for your advertising banner.

HOOK: Default hook of this module is "displayHome".



Revolution Slider

Full slider documentation is here

HOOK: Default hook of this module is "displayHome". But module can be used in the "displayTopColumn" hook



Simple Blog

Full blog documentation is here

HOOK: Default hook of this module is "displayHome". But module can be used in the "displayTopColumn", "middle_content" and "bottom_content" hooks.



Single Product Carousel

This is the same carousel module as "Product Carousel with Tabs", but specified to display only one type of products.

HOOK: Default hook of this module is "displayHome".



Promo Minic slider


This slider can display two additional advertising banners on the right side of main slider. Here is the screenshot of main options of the Promo Minic slider.

HOOK: Default hook of this module is "displayHome".



Sequence Slider

This module allows you to animate each slide layer. It has powerful customization capabilities. Just look at slider demo and you will understand what kind of animations available for you, and all of these you can create in the back office.

Images Settings

Main image will be used as background for the slides composition. You can upload additional images. Each image has following settings:

  • Position before showing. This is the position of an image regarding the slider viewport before the slide will be shown.
  • Position on showing. This is a position of image regarding the slider viewport when the slide will be shown.
  • Position after showing. This is a position of image regarding the slider viewport after the slide will be shown.

- "top", "left" are the values in the percentage. For example left:30% means the position of image will be on the left on 30% of viewport width.
- "duration" is a duration of image animation from one position to another.
- "rotation" is a rotation of image in the current position.
- "opacity" is a opacity value in percentage from 0 to 100.
- "delay" is a delay in seconds before the image animation will start.

 

Text Settings

You have an opportunity to use additional style of your text by adding html tags. For example <h4>your title</h4> will show the title with dark background.
You can add the width of text container to manage the text animation.
All options to configure text position before/on/after works the same as for images.

SCRIPT: Module animation based on Sequencejs.
HOOK: Default hook of this module is "top_slider".



Customer Testimonials

This module allows your customers to add their testimonials to your shop. You need to approve each testimonials manually in the module settings. Just select needed testimonials to display manage buttons (Enable/Disable/Delete/Update).
To add a captcha you need to get API keys. Full information about that you can read here.
HOOK: Default hook of this module is "wide_section". But it can be placed to the left column.



Twitter Widget

This module displays your latest tweets from your twitter account. You need to get Twitter API keys and put them to necessary fields. Go to the following link https://dev.twitter.com/
This video shows how to get Twitter API keys.


HOOK: Default hook of this module is "footer_top". But it can be placed to the footer section as well.

Vetical Flex Menu

This menu has the same settings like Flex Menu but has only three sections (Left section disabled)

HOOK: Default hook of this module is "left_columns". But it can be placed to the right_column section as well.


Venedor has custom hooks. To see them you need to enable "Display non-positionable hooks" checkbox on the "Modules" > "Positions" page.


Modules order in "Venedor" skin



Modules order in "Blue" skin



Modules order in "Dark Blue" skin



Modules order in "Brown" skin



Modules order in "Yellow" skin



Modules order in "Red" skin



Modules order in "Orange" skin



Modules order in "Dark Cyan" skin



Modules order in "Pine Green" skin



Please note, "Not Active" state of module means that module is disabled by prestashop. But you can enable it just in one click to "Show" button.

There are 12 hooks available to use in the theme homepage. You can see their disposition at the image below. Default modules can't be located in Venodor additional hooks without code modification.

Please note some hooks like "middle_content", "bottom_content", "footer", etc... has fixed width 1200px. And some hooks has full width ("displayBaner", "top_slider", "wide_middle_section", "wide_section" and "footer_top").

Venedor has available only left column, but you can change its position to right in the "General" tab of "Theme settings".
We are recommend to use following states of columns for each pages of your shop.

If you encounter any problems or have questions once you purchased the theme feel free to drop us a notice at http://support.promokit.eu/