Premium Prestashop 1.7 Theme


Created: 04 January 2018
by: Promokit Co.
email: support@promokit.eu

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

Getting Started

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:

  • "memory_limit" should be at least "64M"
  • "file_max_upload_size" to "16M"
  • "allow_url_fopen" should be set to “on”
  • "register global" should be set to "off"
  • "safe_mode" should be set to "off"
  • "magicquotes" should be set to "off"
  • "PHP acceletarion" should be disabled

Must-have PHP extensions:

  • GD
  • cURL
  • SimpleXML
  • SOAP
  • PDO_MySQL
  • mcrypt
  • OpenSSL
  • DOM
  • Zip
  • fileinfo

Permissions

  • Permissions for all files should be set to "664"
  • Permissions for all folders should be set to "755"

For following folders Prestashop ask to set CHMOD to 777:

  • "config" folder
  • "cache" folder
  • "sitemap.xml" file
  • "log" folder and subfolders, recursively
  • "img" folder and subfolders, recursively
  • "mails" folder and subfolders, recursively
  • "modules" folder and subfolders, recursively
  • "translations" folder and subfolders, recursively
  • "upload" folder and subfolders, recursively
  • "download" folder and subfolders, recursively

Please also check "Informaion" in "Configuration > 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.

Install via Prestashop

Log into your Prestashop Back-Office and browse to DesignTheme & Logo

Then click on the "Add new theme".
Next browse for the zipped theme file (make sure you take the “Installable zip” as this is what you would upload. “Installable zip” file is called venedor-v.X.X.zip”.)

Once Prestashop has unpacked and installed the theme, just click to Use this theme.

Here is short video what demonstrate installation process

Theme Update

Manual Update

  • Make backup of your shop.
  • Go to "Advanced Parameters" > "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
  • Upload "themes" and "modules" folders from "Archive/updates/LATEST_VERSION/ to the root of your prestashop.
  • Done

Automatic Update

Automatic update option only available for Venedor version 3.0.2 and above

  • Make backup of your shop.
  • Go to "Advanced Parameters" > "Performance" and set "Template compilation" to "Force compilation" and "Cache" to "no"
  • Go to "Theme Settings" module
  • Open "General" tab and scroll down
  • Find "Theme Updates" and see if any updates are available
  • Click "Run update" and wait while page will be reloaded
  • You will see a message "Theme update successful"
  • Done



Theme Options

General Settings

General Typography — section includes the general font for the site, thats the main body text, not including some elements like titles, prices, etc... what you can configure separately.

Titles Font — allows to set a font for all titles. Titles means all text inside h2, h3, h4, h5, h6 tags

Button Typograpy, Color, etc... — allows to configure all normal buttons of the theme. Button is an element with .btn class

Page Width — You can adjust page width as you like. This option define max-width of theme layout

Use Latin Extended Symbols — Use this option in case you have a language with extended symbols, like Spanish, French... This option request additional symbols from google fonts what is disabled by default.

Use Cyrillic Symbols — Use this option in case you have a language with Cyrillic symbols, like Greek, Ukrainian... This option request additional symbols from google fonts what is disabled by default.

Show Cookie Message — all websites across the EU are required to ask your permission to place cookies on your machine.

Google API Key — required to display Google Maps

Lazy Load — This feature allows to reduce the size of page. It downloads images only if it's necessary

Presets

Home Page

There are two options available to build your homepage.

First one is a native Prestashop modules positioning. You have to go to "Design" - "Positions". Find there "displayHome" hook and order existing modules inside the hook. You can also transplant other modules to the "displayHome" hook. Read more here http://doc.prestashop.com/display/PS17/Positions

You can also manage modules order directly in the "Theme Settings" module, like that shown at the screenshot below

Second way is to use "Page Builder". Make sure it's enabled in the "Home Page" tab. Then go to the "Promokit" - "Layout Builder" - "Page Builder". See the video to understand how to build your page.

Category Page

Product Page

Product Miniature

Social Accounts

Payment Icons

Demo Content

Customer CSS

Layout Builder

Page Builder makes it easy to build responsive grid-based page content that adapts to mobile devices with pixel perfect accuracy.

Build Content Blocks

Build Products Blocks

Build Images Blocks

Images Settings

By default Venedor theme has images aspect ratio 10:13, but you can change it as you like. The only one tip in case you will decide to chnge the ratio, is to keep it the same for each image type related to products. Here is the screen of image sizes by default:

Modules

A plugin is a piece of software containing a group of functions. They extend functionality and add new features to the theme. The list of plugins what comes with Hoki you can find below:

Category Tree List

Category Tree List - is a module which allows you to disaplay list of your categories. You can choose only specific categories to show.

To add category icons, you have to go to category settings and upload your image.

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".
Mandatory Hook: displayHeader. This hook contain .css and .js files of module.



Instagram Feed

Instagram module require API code to connect to your instagram account. This is a quick breakdown on the steps to get the Access Token.

  1. Visit https://www.instagram.com/developer and register a new app
  2. Go to Manage Clients, and hit ‘Register a New Client’ to register and gain API access. Fill out all necessary fields.
    YOUR REDIRECT URL MUST BE THE SAME IN YOUR BACK OFFICE AND INSTAGRAM ACCOUNT
    The URL looks like this: http://YOUR_DOMAIN_NAME.COM/modules/pk_instafeed/api.php
  3. Copy the "Client ID" and "Client Secret" and paste to the module settings.

  4. Leave "Matching Code" field empty and click to "Save" button. You will be redirected to a page with generated Matching code. Copy that code, click to "Back" link and paste it to this field
  5. Click "Save" button. You will get "Access Token" automatically

Text Block

This module allows to display your custom text. You can display different text in different hooks

First of all you need to select a hook which you want to edit. Click "Save Hook" before edit your text.

To make sure which hook you have to edit, just look at "Home Page" tab in "Theme Settings" module. You will see the following:

Product Page

Theme and Modules Translation

Modifying a Translation

The most important tool of the "Translation" page is in the "Modify translations" section. This is where you can choose to add a translation, and completely customize each and every sentence if you wish so. Go to "International" > "Translations" to get it

Select the part of the current translation that you wish to edit:

  • Back office translations. The text visible to you and your team from your store's administration panel.
  • Theme translations. The text visible to your customers when browsing your store.
  • Installed modules translations. The content from the modules. Note that modules which are available but not installed will not appear in the tool.
  • E-mail translations. The terms used in the default email templates.
  • Other translations. This category is meant to disappear in a coming version. It contains expressions that haven't been identified as being from the theme or the back office yet.

Modules translations

When you wish to translate a specific module, choose "Installed modules translations", then select the one module you want to edit. It will open a new page with the content from this module, and all its available strings.

SVG Icons

Change the icon

For example you want to change "facebook" icon.

  1. find "facebook" icon, it looks like this:
    <symbol id="si-facebook" viewBox="0 0 288.861 288.861">
    <path d="M167.172,288.861h-62.16V159.347H70.769v-59.48h.....">
    </symbol>
    				
  2. Find new icon, for example here: flaticon.com
  3. Download it and open in any Text Editor
  4. Copy all code between "<svg>" and "</svg>" tags
  5. Paste it into the file svg.tpl between "<symbol id="si-facebook" viewBox="0 0 288.861 288.861">" and "</symbol>"
  6. Copy SVG dimensions
    <svg viewBox="0 0 27.965 27.965">
    and update them in symbol tag like this
    <symbol id="si-facebook" viewBox="0 0 27.965 27.965">

Icons List

si-loading
si-updown
si-arrowdown
si-arrowright
si-arrowleft
si-cart
si-button-cart
si-search
si-cross
si-cross-thin
si-twitter
si-youtube
si-facebook
si-googleplus
si-gplus
si-twitter2
si-instagram
si-flickr
si-linkedin
si-skype
si-pinterest
si-left-arrow
si-right-arrow
si-left-arrow-thin
si-right-arrow-thin
si-top-arrow-thin
si-bottom-arrow-thin
si-star
si-compare
si-like
si-wishlist
si-account
si-eye
si-eye2
si-heart
si-headphones
si-email
si-password
si-money
si-login
si-comment
si-return
si-rocket
si-shuffle
si-support
si-gift
si-lock
si-lock2
si-back
si-menu
si-burger
si-grid
si-list
si-pencil
si-phone
si-fax
si-location
si-done
si-add
si-file
si-info
si-address
si-file2
si-file3
si-voucher

Performance

This section contain tips that might help you improve your shop's performance server-wise.

Recommended settings for working in production shop:

  • Template cache - Never recompile template files
  • Cache - Enabled
  • Caching type - File System
  • Clear cache - everytime something has been modified
  • Debug Mode - Off
  • Smart cache for CSS - On
  • Smart cache for JavaScript - On
  • Apache optimization - On

You can find full description of each option here

Support

If you are having any issues with the theme or have any questions regarding how to use the theme you can submit a ticket to our support https://support.promokit.eu. Tickets are moderated by the theme developer and a support staff. When you submit a ticket you will receive an email confirmation and once our staff has been able to review and respond to your ticket you should receive another email with our response.