Premium Prestashop 1.7 Theme


Created: 05 May 2017
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 alysum-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

Homepage Structure

Alysum has following order of hooks. Each of your modules can independently hang on available hooks and display information.

See more details how to manage homepage modules here

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 Alysum version 5.0.7 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 require to be defined "No-picture image"
Go to "International" > "Localization". Select "Languages" tab. Click "Edit" on your language. Upload "No-picture image".


"No-picture image" is displayed when no image is found. It must have the same proportions like your images

Presets

Home Page

Category Page

Product Page

Product Miniature

Social Accounts

Payment Icons

Demo Content

Customer CSS

Images Settings

By default Alysum 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

Frequently Asked Questions

  1. There are no search results

    Go to "Shop Parameteres" > "Search" and click "Re-build the entire index"

  2. Can't add/edit menu item

    The issue appears because your server blocking menu request to file modules/pk_flexmenu/ajax/queries.php.
    To fix that you need to make folder "/ROOT/modules/" writeable by group. If you have no idea how to do that please apply to your hosting support.
    Here is closed ticket from a customer who fix the issue

    Please check "mod_security" as well, there could be some rules what blocks requests.

  3. How to edit contact page details?

    Go to back-office > "Shop Parameters" > "Contact". There are two tabs available, "Contacts" and "Stores". Go to "Stores" tab and find all available contact details.

  4. Index Page Layout changes every time

    The issue appears in the default Prestashop theme as well. To fix it, you need to define necessary layout for the "index" page in the /config/theme.yml file. It must look like this:

    theme_settings:
      default_layout: layout-full-width
      layouts:
        index: layout-left-column
        category: layout-left-column
        best-sales: layout-left-co...
    
    you have four available layouts to use:
    layout-full-width
    layout-left-column
    layout-right-column
    layout-both-columns
    

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.