FoodStories - Theme for Food Stores and Restaurants on CMS PrestaShop

Template documentation


Introduction

What is PrestaShop eCommerce?

PrestaShop is an eCommerce solution which is free for the basic kernel and open source. It supports payment gateways such as Google checkout, PayPal or payments pro via APIs.

PrestaShop is available under the Open Software License and officially launched in August 2007 for medium and small-sized business. The software, which is based on the Smarty template engine, is used by several thousands of shops worldwide.

What is PrestaShop template?

PrestaShop template is a theme for PrestaShop eCommerce solution. It provides you with vast variety of customization opportunities and allows you to create an online store that fully meets your needs.


Getting Started

Thank you for choosing our theme.
We hope you are enjoying the quality and the convenience of our theme!

Preparation

Before you proceed to setting up your PrestaShop eCommerce, please make sure you are fully prepared. Please check the following points:

Editing software

To feel comfortable working with your PrestaShop template, we recommend you to download all required applications. You can see the list of required software on the template preview page. Requirements may vary depending on the template. We're going to tell you in general what's needed:

  1. First of all, you need application to extract the password protected sources_#########.zip archive. You can use WinZip 9+ (Windows) and Stuffit Expander 10+ (Mac).
  2. You may also need Adobe Photoshop application. It's used to edit .PSD source files and it's necessary if you want to edit template design graphics and images.
  3. To edit the template source code files, you need some code editor like Adobe Dreamweaver, Notepad++, Sublime Text, etc.
  4. To upload files to the hosting server, you may need an FTP Manager like Total Commander, FileZilla, CuteFTP, etc.

Server requirements

Please make sure your hosting server meets the PrestaShop requirements:

  • System: Unix, Linux or Windows. Unix is highly recommended.
  • Web server: Apache Web server 2.2 or any later version, Microsoft's IIS Web server 6.0 or later, and nginx 1.0 or later.
  • We recommend PHP 7.1 or later.
  • MySQL 5.0 minimum, 5.6 or later recommended.
  • At least 128 Mb of RAM on your server (64 Mb is comfortable, the more the better).

PrestaShop will work with PHP 5.1 or later, but the versions lower than 5.4 have bugs which might prevent some functions from working as expected (like invalid date timezone).

In order to run PrestaShop 1.7.x properly, your PHP installation must feature the following settings:

  • magic_quotes_gpc=off
  • memory_limit=512M
  • max_execution_time=300
  • max_input_time=300
  • upload_max_filesize=100M
  • post_max_size=20M
  • max_input_vars=10000
  • allow_url_fopen=on
  • safe_mode=off

Using the local server

You can run PrestaShop locally on your computer using the local server. To create a local hosting server, please use the localhost applications, such as WAMP, AppServ, XAMP, etc. Any of those can be easily installed as any other program and used to run PrestaShop.


Downloading

To install PrestaShop, you need to download the PrestaShop engine package from the official website at www.prestashop.com/en/downloads

If you use the Quick Start Package, then you need to take the installation archive from the QuickStart folder of the purchased theme

Just insert your name and e-mail into the Download box input and click the 'Download' button.

Please make sure your version of PrestaShop engine matches the template requirements. All versions of PrestaShop are available at SourceForge.


Extracting Files

Once the PrestaShop engine package is downloaded, you will need to extract its files and folders from the archive.

This can be done with any archive manager like WinZip (Windows), StuffitExpander (Mac), etc.

Please check the following tutorials on how to extract files from the archives with WinZip (Windows) and StuffitExpander (Mac).

Please note: if your hosting control panel has the option to 'Extract' files, you can use it to extract the files directly on your server after the .zip file is uploaded.


Uploading PrestaShop engine files

If you have extracted the files locally to your computer, you will need to upload them to your hosting server.

This can be done using the hosting control panel File Manager or third party FTP Manager applications like FileZilla, TotalCommander, CuteFTP, etc.

You can check the detailed video tutorial on how to upload files to server using FTP manager and how to upload files to a server using cPanel (WebHost Manager, WHM).


PrestaShop engine installation

Please make sure your version of PrestaShop engine matches the specified version in "Technical Details" tab, mentioned as "PrestaShop Engine: 1.X.X.X".

When you are done with the files upload, you can start the PrestaShop engine installation. Open your web browser and type in the 'domain name/path to your PrestaShop directory' in the address bar, then reload the current page. You should see the welcome screen. Please follow the instructions below to install PrestaShop.


Installation Assistant (Choose your language)

Please select the installation language.

Please note: the installation language option will not affect your store language. By default, PrestaShop is offered in English. You can install additional localization packages to change the store language.

When you are done, click the 'Next' button.



Installation Assistant (License agreements)

  1. Please check the license agreement (1).
  2. When you are done, click the 'Next' (2) button.


System Compatibility

Check the PHP settings and directory permissions. In case of any errors, please contact your hosting provider for further assistance.

If everything is correct, click the 'Next' button.



Shop configuration

This step requires you to enter the store settings like Shop name, activity, country, timezone, etc.

All these settings can be changed later in your PrestaShop administration panel.



System Configuration

If you already have a MySQL database, please enter the database details into the appropriate fields below.

Otherwise, you can get the database details from your hosting control panel or by contacting your hosting provider.

When you are done, click the 'Next' button.



Installation is complete

This is the final step of the installation.

For security reasons you need to delete the /install/ directory on your hosting server.



Starting with version 1.5.4, PrestaShop takes care of renaming the administration folder for you: it becomes the word "admin" followed by 4 random digits, i.e. "admin8814." The renaming happens as soon as you reach the "admin" folder for the first time: PrestaShop renames it, then correctly accesses the renamed folder.

Log into the PrestaShop back office by going to your newly renamed "admin" folder, and start filling your catalog with your data.

If you face any difficulties, please check the official PrestaShop installation manual.

Template installation

Import theme

Note: this method does not provide sample data installation.

Template preparation

Before you proceed, please make sure you have already downloaded the template and extracted the files from the template package.

When the files are extracted, you can proceed to uploading the template.

Installation

Log into your PrestaShop admin panel and navigate to Design -> Theme & Logo. At the top of the page click Add new theme button (1).



Click Add file button (1) in Import from your computer section. Navigate to previously unzipped template package and open themeinstallator folder.

Select your theme .zip file and click Save (2).



The uploading process will be started. You will see the message that the theme has been successfully uploaded. Your new theme preview will appear in the list of installed themes.



In order to activate the theme, hover the cursor over the theme preview icon and click Use this theme.



Automatic installation with demo data

To import demo data, go to the modules tab Modules -> Module Manager

Find the Theme Manager module and click Сonfigure



Go to the Import Sample Configuration tab



Upload all files and folders from the downloaded archive located at /theme/img/ to the /img/ root directory installed by PrestaShop, navigate to it on your server and upload the files

Next, you need to clear the cache Advanced Parameters -> Performance by clicking on the button shown in the screenshot.



Congratulations, your demo store is installed.

Basic tutorials

How to change info about your store

Open the PrestaShop admin panel, go to Shop Parameters > Contact and open the tab Stores.

First you'll see the list of stores in Stores section. Here you can enable/disable, add/delete or edit each store.

How to change store name

In Contact Details block you can change the main info about your store - its name (1) and other contact details. Don't forget to press the 'Save' button (2) after editing.

To edit the info on one particular store, choose the store you want to edit in Store Contacts and click 'Edit' (1).

Here you can edit all info concerning your store contacts (such as store's name, address, status, picture, working schedule etc.)
After it's done, click the 'Save' button (1).

Layouts structure

Multipurpose Theme

Custom modules

Custom modules are modules developed by us and extend the functionality of the online store / theme. PrestaShop already has a lot of its own modules. In this section, we'll show you how to manage them and what each module is for.

Attention Some modules may not be included into your template package. This section describes configuration of all modules that are used in our templates. Each template pack is provided with a set of modules which is included into the design of this specific template.


Theme Manager

This module performs basic theme settings and is the main one. (main module of the theme)

  • General / Header / Category Page / Product Page / PWA / Checkout / Login social
  • PWA Setup
  • Import Sample Configuration



  • General - Lazy loading of images and main pages of the online store
  • Header - Configuring display and output in the site header
  • Footer - Basic settings for the site footer
  • Category Page - Configuring the display of categories with products on the page
  • Product Page - Configuring the display on the product card page
  • Checkout Page / Login - at PrestaShop there is a classic checkout page and ours is designed for user convenience and high conversion.
  • Speed Page - Allows you to make the speed of the online store much faster.
  • PWA - PWA settings so that your online store is displayed on mobile applications as a mobile application with the ability to install an application icon. More about technology More PWA

Colors and Fonts

This module allows you to customize the color of the theme and the main font.

  • General / Header / Footer / Content / Product / Fonts / Custom CSS
  • Color changing elements
  • Change the site font
  • Add your CSS style


Mega Menu

The main site menu with great features and flexible settings.

To add a menu item click on the add button




Next, you need to create the main menu item



If you need a dropdown menu, then pay attention to this setting



After saving the top menu item, you will be able to add a drop-down menu with the right



Homepage Blocks

Customizing the home page with a variety of options. You can customize the central part of the main page as you wish, the module

  • Product Carousel
  • Banners
  • Sliders
  • Brand slider
  • Category slider
  • Tab with products
  • And many other different elements

To add a new block to the main page, click the add button as in the screenshot



Set up a new block for display on the main page



Slideshow Home Page

Slider on the home page

To add a new slider, click the add button as in the screenshot



Fill in all the fields to display the slider on the main page



To add a thumbnail to the category in the settings, click on the link as shown in the screenshot



To add a thumbnail to a category, click on the add button as shown in the screenshot



Upload a picture and choose which category it belongs to



Column Blocks

Left or right column settings

  • Product slider
  • Html block
  • Banner

The module provides adding information to the right or left column of the site, where it is on the layout. For example, an advertising banner or a slider with promotional products.

To add a new element, click the add button as in the screenshot



Next, select the desired block display parameters, everything is intuitive, you can easily figure out these settings.



Product Extra Fields

Additional fields on the product page

This module provides additional output functions for the product card, for example, adding a new tab.

To add a new function for the card product, click on the add button as in the screenshot



Next, enter the settings you need, they are simple and you can easily figure it out



Compare Products

Adds product comparison function

The module allows you to compare products, is quite simple and has minimal settings, it works autonomously



Wishlist / Favorite products

Adds wish list / favorite products

The module allows you to add products to the wish list, is quite simple and has minimal settings, it works autonomously



Blog with stories

A real professional blog with stories

This module provides a real professional blog, with authors, subscriptions and the ability to become an author of an online store user.
The module has flexible settings and fast operation.

All settings are intuitive and you can easily figure them out.



City selection and geo-targeting

Definition of the city and output of the necessary information

The city is determined by ip through the service geoplugin.net

In order for the module to identify and match cities automatically, you need to fill them in, go to the cities tab



And add your city to the list of all cities



When adding, you can specify a phone number and it will change from the selected city

The same store and information in the selected hook will vary from city to city

The definition does not always work 100%, since the initial definition occurs by ip, but for a more accurate definition, Google Geocoder is used It determines by very many parameters and the accuracy of the location will be very high

In order to activate a more accurate definition of the user's city and location, it is necessary to register an access key to Google Geocoder

To register a key, use the documentation

Google Geocoder will also help you fill in the post code address of the location

Cookies Policy

Cookies are small text files which websites place on visitors' computers. They're typically used to identify that particular visitor and provide them with a better experience. Cookies are a crucial part of many website functions which we take for granted.

For instance, it's usually cookies which allow online shops to remember what items you have in your shopping trolley. They're also used to keep you logged in to a website, or to provide valuable usage statistics and information to website owners.

If you run a website, it almost certainly uses cookies. Their most likely function is to monitor visitor numbers and behaviours through tools like Google Analytics. They may also be used to display relevant adverts to visitors, or - if you sell online - to power key parts of your online shopping system.

26th May 2012 - The ICO released a change to the enforcement, "implied consent" is now allowed as long as you make it clear where your privacy/cookie policy is.

The "Theme Manager" module provides the ability to display a cookie notification on the website.
In the settings of this module on the "Footer" tab.



Addendum

Thank you for reading!
We hope you can create the stunning website with our themes.

Help and Support

We did our best to make this documentation as clear as possible. However, if you have any difficulties with the PrestaShop template or any suggestions on improving the template or the documentation, feel free to contact our support team.

Useful resources

W3C validation

Both HTML markup and CSS styles used in our templates are semantically correct and valid. However, some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern website technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.

The General Data Protection Regulation (GDPR) compliance

The GDPR is the official GDPR Compliance module, developed by PrestaShop team that aims to protect the personal data of EU citizens and applies to any organization doing business with EU data subjects. It offers a solution adapted not only for your site that processes the personal data collected by the PrestaShop solution, but also the modules installed in your store.

For the latest versions of the PrestaShop 1.7 templates, the module is available directly in your back office for free.