Documentation for Prestashop Version

Navigation

Extensions

Customize Data

Other

Getting Started

Introduction!

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!
This document covers the installation and use of this theme, reveals some answers to common problems and issues. We encourage you to read throughout this document if you are experiencing any difficulties. If you have any questions that are beyond the scope of document, please feel free to contact us via our Support Tickets System.

Compatible with Prestashop

Market PrestaShop Theme is fully compatible with Prestashop version 1.6.x, 1.7.x

PrestaShop Information

To install this theme you must have a working version of Prestashop already installed. If you need help installing PrestaShop, follow below sites and tutorials from prestashop.com, hope everything that you need are there.

Installation

Prepare Installation

There are two ways to install SP Market Theme

  • Quickstart Installation: Suitable if you have your first installation and want to get a whole new fresh site as our Demo.
  • Manual Installation: Include of Theme layout Installation Packages.

Quickstart Installation

We provide Quickstart package for each theme which aims to ease the installation for users. It will help you save much time of installing and configuring if you plan to start your site from the beginning.
Please following steps below:

  • Step 1: Download the quickstart package of named as sp_market_quickstart_pl_p1.7.8.1_v6.0.0.zip
  • Step 2: Extract and Upload the whole Quickstart package to your server or localhost. In Quickstart folder you will see the extracted folder that include all sample data
  • Step 3: Create a Database for your PrestaShop site.
    • Market Prestashop Theme
  • Step 4: Start installation by opening browser and navigate to your URL.
    • Installation Assistant (Choose your 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.

Market Prestashop Theme

  • Installation Assistant (License agreements)

Market Prestashop Theme

  • Checking PrestaShop Compatibility

Market Prestashop Theme

  • Store Information

Now add required information for your store: Shop name, Main activity, Country, Shop timezone and add the account info: first name, last name, email and password. Click “Next” to next step.

Market Prestashop Theme

  • System Configuration

Enter your database in step 3, then click the “Test your database connection now!” button to make sure that the entered settings are correct. After that, click Next button.

Market Prestashop Theme

  • Finish installation: This process could take a few minutes

Market Prestashop Theme

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

And finally, go to the Frontend or Backend as you want:

Market Prestashop Theme

Theme Installation

Note: Before installing theme, you must disable the cache. In your back office, please go to CONFIGURE >> Advanced Parameters >> Performance >> find “Cache” parameter >> Set “No” to disable cache >> Click “Save”.

Market Prestashop Theme

SP Market Theme Installation

Install the “sp_market_template_p1.7.x_v6.0.0.zip” file.

1. Login to your Prestashop admin panel and navigate to IMPROVE >> Design >> Theme & Logo. At the top of the page click the Add a new theme button.

Market Prestashop Theme

2. Navigate to “Import from your computer” >> choose the zip theme file as named “sp_market_template_p1.7.x_v6.0.0.zip” >> Save.

Market Prestashop Theme

Note

  • If you get the message file is too large
  • You're use prestashop version 1.7 or higher

With either case, you must upload theme file in the "/themes" folder.

Market Prestashop Theme

- Login to your Prestashop admin panel and navigate to IMPROVE >> Design >> Theme & Logo. At the top of the page click the Add a new theme button.

Market Prestashop Theme

- Navigate to “Import from FTP” >> choose the zip theme file as named “sp_market_template_p1.7.x_v5.1.0.zip” >> Save.

Market Prestashop Theme

3. When your choice is successfully validated , the new theme will be shown in the section named as Select a theme for your “[name]” shop . Then Click "Use this theme" button to replace your current theme with SP Market theme.

Market Prestashop Theme


Note: After click button, your site may be broken. If your site was broken, please run this command: chown -R apache:apache sp_market

4. Click "Save" button and go to front-end and view your website.

How to use Elementor

How to use

Clever Elements is a visual page builder module for PrestaShop enabling the creation of web pages in a live, visual way.

Change your Home page

To change your homepage that you want please go to Admin panel >> Magentech >> Clever Element >> Theme Builder >> Theme Setting and choose Header, Footer and Homepage...
ego 17

Edit your Home page

Step 1: To use Clever Elements please login Admin panel then go to front-end to start using Clever Elements.
Step 2: To get started click the icon on the right
ego 17

Step 3: Click Edit with Creative Elements to enter Live Page Builder.

Main Areas

Main areas

The page builder includes these main areas:

  1. Header Panel: Choose a general style (colors, fonts) or use the search field to find a widget.
  2. Widgets / Widget Settings: Choose a widget and configure it.
  3. Preview Button: Enables you to preview the page. Once clicked it hides/shows the panel.
  4. Footer Panel: View page, Go back to Dashboard, Save page.
  5. Content Area: Drag & drop widgets and design your page.
  6. Add New Section / Template: Choose between creating a new section or inserting an existing template.

Add New Section

  1. Click this button to create a new section or simply drag a widget from the panel and drop it in the content area.
  2. Select Your Structure: Choose a structure for your section (Later, you can edit the exact width of every column).
Main areas

Section / Column Options

  • Section: You can edit, duplicate or delete a section. You can also save it as a template.
  • Column: You can edit, duplicate, add or delete a column. You can also drag & drop it anywhere on your page.
  • Widget: Click the content to edit, duplicate or delete a widget.
  • Resize Column: Drag right & left to change the width of your columns.
  • Add Widget: Drag a widget from the left panel and drop it into a column.
Section options

Edit Widget

  • To Edit a widget, click the pencil icon.
  • On the Panel header, you can choose to edit the widget's content and style.
  • Every Widget has a different setting.
  • You can Save your current changes at any stage.
  • When you have finished designing, click the 'X' button at the bottom panel and view the page.
Section options

Responsive Mode

  • To view how the page looks like on different devices, click on the Responsive Mode button, in the footer.
  • Choose between the different devices.
Section options

Edit with Creative Elements

Edit a New CMS Page

  • On the top left side of the PrestaShop backoffice, click Design > Pages > Add New Page
  • Fill out the required fields and Save the form
  • Click Edit with Creative Elements to enter live PageBuilder

Edit an existing CMS Page

  • On the top left side of the PrestaShop backoffice, click Design > Pages
  • Open the selected page for edit
  • Click Edit with Creative Elements to enter live PageBuilder

Edit Product description

  • On the top left side of the PrestaShop backoffice, click Catalog > Products
  • Open the selected product for edit
  • Click on description tab (only on PrestaShop 1.7.x)
  • Click Edit with Creative Elements to enter live PageBuilder

Edit Category description

  • On the top left side of the PrestaShop backoffice, click Catalog > Categories
  • Open the selected category for edit
  • Click Edit with Creative Elements to enter live PageBuilder

Edit any Position with Content Anywhere

  • On the top left side of the PrestaShop backoffice, click Creative Elements > Content Anywhere > Add New
  • Give a Title, choose a Position, then Save the form
  • Click Edit with Creative Elements to enter live PageBuilder

SP Theme Configuration

In your Prestashop Admin Dashboard, navigate to IMPROVE >> Modules >> Modules and Services >> go to Installed modules section, search for “SP Theme Configuration” module then click on Configure.

Listing page

In the SP Theme Configuration, choose “Listing Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

Market

+ Number of products in one row

Display number of product in one row (Show/Hide)

Frontend Appearance:

Market

+ Show product label (New/Sale)

Display product lable on Listing Page (Show/Hide)

Frontend Appearance:

Market

Product Pages

In the SP Theme Configuration, choose “Product Pages” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

Market

+ Thumbnails Type

-Horizontal Thumbnails

Market

+ Display thumbnails

Number of thumbnails be displayed.

Backend Settings:

Market

Custom Codes

In the SP Theme Configuration, choose "Custom Codes" to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

Frontend Appearance

- You can input css or javascript.

Examples code css


body{
	background-color: red;
}

Examples code Javascript


alert('This is demo javascript');

Advanced

- In the SP Theme Settings, choose “Advanced” to configure the parameters in this section. After finishing, you could go to the front-end to view the changes.

1. SCSS Compile

- Active: The system will automatically compile into CSS from SCSS when you refresh the website

Note: System will change css file theme-...css. Ex: theme-ff0000.css

Do not edit css file when active SCSS Compile

2. CSS Format

Css formatting after compile from sass.

  • scss_formatter: Css Normal
  • scss_formatter_nested: Css Nested
  • scss_formatter_compressed: Css Compressed

3. Edit file CSS

There are two instances to edit css file via ftp.

  • SCSS Compile: Disable
  • SCSS Compile: Enable

1. SCSS Compile: Disable

- You can edit css file of modules.

Example: "../themes/sp_Market/modules/spcustomhtml/views/css/style.css"

- You can edit css file of theme.

Example:

+) "../themes/sp_Market/assets/css/theme-0083c1.css"

+) "../themes/sp_Market/assets/css/theme.css"

2. SCSS Compile: Enable

- You can edit css file of modules. (Sample as Disable)

Note: The system will generate css file "theme-0083c1.css, theme-{color code}.css"

Your changes to this file will be lost

- You must edit file "*.scss" in the folder "_dev/css"

Example: "../themes/sp_Market/_dev/css/themestyles/_content.scss"

SP Vertical Configuration

SP Vertical

Click Here to view documentation of SP MegaMenu module.

Frontend Appearance:

1. Navigate to IMPROVE >> Modules >> Modules and Services go to Installed modules section and look for SP Vertical >> Click the Configure button to access the module configuration page.

2. In the SP Vertical Panel, you could Add New Module by click on the button like the following image:

Market

3. You could configure General Options then click "Save" or "Save and stay" button.

Market

4. After, scroll down you could configure Menu Information as follows

Market

5. Click Add New button to add items as you want.

6. Menu list of Mega Menu. You need to look at the menu list to configure easily.

7. To configure each item, you need to click Edit button.

Contact Page

Contact Page

Market

Backend Setting:

In the Prestashop Admin Panel, navigate to Shop Parameters >> Contact >> Tabs Stores >> Contact Details

Market

About us Page

About us Page

Frontend Appearance:

Market

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Design >> Pages

Step 2: In the “Pages” configuration page, click Market button in the right corner to “ADD NEW”.

Step 3: You could add new cms page like the illustration

Copy and paste the following code into the content:


<div class="rte">
<div class="about-us">
<div class="row">
<div class="col-md-5 col-sm-12 box-left">
<div class="about-image"><img src="/themes/sp_market2/themes/sp_market2/assets/img/aboutus.jpg" alt="#" /></div>
</div>
<div class="col-md-7 col-sm-12 box-right">
<div class="about-text">
<h3 class="title-text">Welcome to SP Market</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
</div>
</div>
</div>
<div class="our-content">
<div class="row">
<div class="col-md-3 choose-us">
<div class="content">
<h5 class="title">Why choose us</h5>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title"><i class="fa fa-check"></i><a class="collapsed" href="#collapseOne"> We provide the best products </a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingTwo">
<h4 class="panel-title"><i class="fa fa-check"></i><a class="collapsed" href="#collapseTwo"> We care about our customers </a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingThree">
<h4 class="panel-title"><i class="fa fa-check"></i><a class="collapsed" href="#collapseThree"> Labore et dolore magna aliqua </a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFour">
<h4 class="panel-title"><i class="fa fa-check"></i><a class="collapsed" href="#collapseFour"> Ut enim ad minim veniam </a></h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="headingFive">
<h4 class="panel-title"><i class="fa fa-check"></i><a class="collapsed" href="#collapseFive"> Sed ut perspiciatis unde omnis </a></h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 open-time">
<div class="content">
<h5 class="title">Open time</h5>
<ul>
<li><b>monday:</b><span>8:00 - 21:00</span></li>
<li><b>Tuesday:</b><span>8:00 - 21:00</span></li>
<li><b>Wednesday:</b><span>9:00 - 20:00</span></li>
<li><b>Thursday:</b><span>8:00 - 21:00</span></li>
<li><b>Friday:</b><span>10:00 - 18:00</span></li>
<li><b>Saturday:</b><span>11:00 - 17:00</span></li>
</ul>
<a href="#" class="about-button">get in touch</a></div>
</div>
<div class="col-md-6 customers">
<div class="content">
<h5 class="title">What customers say about us</h5>
<div class="owl-carousel">
<div class="item">
<div class="about-thumb"><img src="/themes/sp_market2/themes/sp_market2/assets/img/ourteam01.jpg" alt="image" class="img-circle" /></div>
<div class="about-content">
<h2 class="author">Katerina Huge</h2>
<span>Purschaser</span>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, explicabo. Accusantium, maiores. Provident, illum et. Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae? Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae Adipisci natus et eius quas obcaecati nostrum"</p>
</div>
</div>
<div class="item">
<div class="about-thumb"><img src="/themes/sp_market2/themes/sp_market2/assets/img/ourteam01.jpg" alt="image" class="img-circle" /></div>
<div class="about-content">
<h2 class="author">Katerina Huge</h2>
<span>Purschaser</span>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, explicabo. Accusantium, maiores. Provident, illum et. Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae? Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae Adipisci natus et eius quas obcaecati nostrum"</p>
</div>
</div>
<div class="item">
<div class="about-thumb"><img src="/themes/sp_market2/themes/sp_market2/assets/img/ourteam01.jpg" alt="image" class="img-circle" /></div>
<div class="about-content">
<h2 class="author">Katerina Huge</h2>
<span>Purschaser</span>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, explicabo. Accusantium, maiores. Provident, illum et. Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae? Adipisci natus et eius quas obcaecati nostrum, quisquam illum nesciunt nulla fugit beatae expedita molestiae Adipisci natus et eius quas obcaecati nostrum"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Languages

Management Languages

1. Add new Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations

Market

Step 2:

- At here, Scroll to block "ADD / UPDATE A LANGUAGE"

- Then, Select the language you want to add new, and click button "Add or update a language"

Market

2. Export Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- At here, Scroll to block "Export a Language"

- Then, Select Language and Your theme that you want Export, and click button "Export"

Market

3. Import Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- At here, Scroll to block "Import a language pack manually"

- Then, click button "Add file" and choose file language and select your theme, and click button "Import"

Market

4. Management Language

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Languages"

- You can edit or delete language on your store

Market

Step 2:

- If you want change language, click button "Edit".

Market

Currencies

Management Currencies

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Localization, and choose tab "Currencies"

Market

Step 2:

- In the "Currencies" configuration page, click button Market in the right corner to “ADD NEW”.

Step 3:

You could configure this module like the illustration

Translation

Management Translation

1. Translations Theme

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

  1. Choose "Type of translation" is "Theme translations"
  2. Choose "Select your theme" is your theme you want translated.
  3. Select your language you want translated

- Then click button "Modify"

Market

- Here, you can translate the text in the theme.

Market

2. Translations Modules

Step 1:

- In the Prestashop Admin Panel, navigate to IMPROVE >> International >> Translations (Same Add new Language)

Step 2:

- In the "Translations" configuration page, scroll to block "MODIFY TRANSLATIONS"

  1. Choose "Type of translation" is "Installed modules translations"
  2. Choose "Select your module" is your module you want translated.
  3. Select your language you want translated

- Then click button "Modify"

Market

- Here, you can translate the text in the module.

Market

Other

Support

SUPPORT - If you have any questions that are beyond the scope of this help file, please feel free to send us via: Support Tickets System
FAQs - Go to Here to view more the Frequently Asked Questions.


Change Log

Click here to view change log.