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