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

Topmart PrestaShop Theme is fully compatible with Prestashop version 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 Topmart 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_topmart_quickstart_pl_p1.7.6.1_v1.2.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.
  • Topmart 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.

topmart Prestashop Theme

  • Installation Assistant (License agreements)

topmart Prestashop Theme

  • Checking PrestaShop Compatibility

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

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

topmart Prestashop Theme

  • Finish installation: This process could take a few minutes

topmart 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:

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

topmart Prestashop Theme

SP Topmart Theme Installation

Install the “sp_topmart_template_p1.7.x_v1.2.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.

topmart Prestashop Theme

2. Navigate to “Import from your computer>> choose the zip theme file as named “sp_topmart_template_p1.7.x_v1.2.0.zip >> Save.

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

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

topmart Prestashop Theme

- Navigate to “Import from FTP>> choose the zip theme file as named “sp_topmart_template_p1.7.x_v1.2.0.zip >> Save.

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

topmart 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_topmart

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

Layout Position

Position Home page

home 1 Home Style 1
home 2 Home Style 2
home 3 Home Style 3
home 4 Home Style 4

Homepage Configuration

Frontend Appearance:

bestshop

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> look for “SP Newsletter Block” module.

Step 2: You could configure its settings like the illustration. You can Enable/Disable button "Enable Newsletter Popup" to Show/Hide popup.

Background image: You could override in folder "../themes/sp_topmart/assets/img/bg_popup.jpg"

a. SP Currencies Block

Frontend Appearance:

topmart

Backend Settings:

In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Currency Block>> click “Enable” button to enable this module.

b. SP Languages Selector Block

Frontend Appearance:

topmart

Backend Settings:

In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Languages Selector Block >> click “Enable” button to enable this module.

SP Search Pro

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Search Pro” module >> click “Configure” button to configure.

Step 2: In the “SP Search Pro” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration.

SP Mini Cart Pro

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “ SP Mini Cart Pro module >> click “Enable” button to enable this module.

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:

<div class="keywords">
<ul>
<li><a href="#">Laptop</a></li>
<li><a href="#">Eye Makeup</a></li>
<li><a href="#">iPad Cases</a></li>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Galaxy S10+</a></li>
<li><a href="#">Tattoo Kits</a></li>
<li><a href="#">iPhone XS</a></li>
</ul>
</div>

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<h5>+1-214-472-222</h5>
<p class="add"><span>Email: </span>Marketing@MagenTech.Com</p>

SP Slider for your homepage

Frontend Appearance:

zoro

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “Sp slider for your homepage module >> click “Configure” button to configure.

Step 2: In the “SP Slider For Your Homepage” configuration page, click zoro button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Step 4: In the last part named Slides List of this configuration page, click zoro button in the right corner to add new slide and edit slide’s information as follows:

  • Sample 1: Please click Here to view

SP Banner

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Banner module >> click “Configure” button to configure.

Step 2: In the “SP Banner” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Note: Do the same with other banner: Banner2, Banner3...Banner 12

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="services-list clearfix" style="margin-bottom: 40px;">
<ul>
<li>
<div class="item">
<div class="item-icon" style="background-color: #ff5656;"><img src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/services/icon-1.png" alt="Service Image" width="60" height="60" /></div>
<div class="item-info">
<div class="item-title">Free Shipping</div>
<div class="item-des">on orders over $49</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-icon" style="background-color: #2cc97a;"><img src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/services/icon-2.png" alt="Service Image" width="60" height="60" /></div>
<div class="item-info">
<div class="item-title">Money Guarantee</div>
<div class="item-des">30 days money back</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-icon" style="background-color: #b487db;"><img src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/services/icon-3.png" alt="Service Image" width="60" height="60" /></div>
<div class="item-info">
<div class="item-title">Online Support</div>
<div class="item-des">24/24 on day</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-icon" style="background-color: #fcbd27;"><img src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/services/icon-4.png" alt="Service Image" width="60" height="60" /></div>
<div class="item-info">
<div class="item-title">Gift Promotion</div>
<div class="item-des">money back guarantee</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-icon" style="background-color: #72a4ff;"><img src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/services/icon-5.png" alt="Service Image" width="60" height="60" /></div>
<div class="item-info">
<div class="item-title">Payment Method</div>
<div class="item-des">online 24/24 on day</div>
</div>
</div>
</li>
</ul>
</div

SP Categories

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Categories module.

Step 2: In the “SP Categories” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

SP Filter Products – DEAL OF THE DAY

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Filter Products module.

Step 2: In the “SP Filter Products” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like these illustrations General Setting

SP Listing Tab

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Listing Tab module.

Step 2: In the “SP Listing Tab” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like these illustrations General Setting

Note: Do the same with other hook: displayListingtab2, displayListingtab3

SP Filter Products – TOYS, KIDS & BABY

Frontend Appearance:

topmart

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Filter Products module.

Step 2: In the “SP Filter Products” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like these illustrations General Setting

Note: Do the same with other hook: displayFilterproducts3

SP Manufacture Slider

Frontend Appearance:

smarket

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Manufacture Slider module.

Step 2: In the “SP Manufacture Slider” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="newsletter-title-footer">SIGN UP FOR NEWSLETTER % GET <span class="text-theme-color text-bold">25% OFF</span> FIRST ORDER</div>>

SP NewsLetter Block

Frontend Appearance:

autostore

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Newsletter block module.

Step 2: In the “SP Newsletter block” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Frontend Appearance:

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Theme Configuration module.

Step 2: In the SP Theme Settings, choose “Contact Info” to configure the parameters in this section.

funihome

Information

Frontend Appearance:

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules look for “SP Footer Links module >> click “Configure” button to configure.

Step 2: In the “SP Footer Links” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Note: Do the same with other hook: displayFooterLinks2, displayFooterLinks3.

Store information

Frontend Appearance:

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Theme Configuration module.

Step 2: Choose “Social” tab to configure the parameters in this section.

topmart

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="block-footer block-seo">
<div class="title-footer">MOST SEARCHED FOR ON TOPMART:</div>
<div class="block-footer-content">
<ul class="clearfix">
<li><a href="#">iPhone XS Max</a></li>
<li><a href="#">Laptop Sony</a></li>
<li><a href="#">Sale Off</a></li>
<li><a href="#">Washing Machine</a></li>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Samsung Galaxy Note 9</a></li>
<li><a href="#">Redmi Note 7S</a></li>
<li><a href="#">Nikon Camera</a></li>
<li><a href="#">Google Pixel 3XL</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Nokia 7610</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Gaming Laptop</a></li>
<li><a href="#">Macbook Air</a></li>
<li><a href="#">Men Clothing</a></li>
<li><a href="#">Women Dresses</a></li>
<li><a href="#">Sunglasses</a></li>
<li><a href="#">Camera Accessories</a></li>
<li><a href="#">Bestsellers</a></li>
<li><a href="#">Durex Condom</a></li>
<li><a href="#">Auto Parts</a></li>
<li><a href="#">Oppo Mobile</a></li>
<li><a href="#">Best Of Season Sale 2019</a></li>
<li><a href="#">DIR-819 Router</a></li>
<li><a href="#">Sex Toy</a></li>
<li><a href="#">LG Refrigerators</a></li>
<li><a href="#">Sony TV</a></li>
<li><a href="#">Samsung TV 4K</a></li>
<li><a href="#">iPhone XS Max</a></li>
<li><a href="#">Laptop Sony</a></li>
<li><a href="#">Sale Off</a></li>
<li><a href="#">Washing Machine</a></li>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Samsung Galaxy Note 9</a></li>
<li><a href="#">Redmi Note 7S</a></li>
<li><a href="#">Nikon Camera</a></li>
<li><a href="#">Google Pixel 3XL</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Nokia 7610</a></li>
<li><a href="#">Computer</a></li>
<li><a href="#">Gaming Laptop</a></li>
<li><a href="#">Macbook Air</a></li>
<li><a href="#">Men Clothing</a></li>
<li><a href="#">Auto Parts</a></li>
<li><a href="#">Sunglasses</a></li>
<li><a href="#">Camera Accessories</a></li>
<li><a href="#">Bestsellers</a></li>
<li><a href="#">Durex Condom</a></li>
<li><a href="#">Women Dresses</a></li>
<li><a href="#">Oppo Mobile</a></li>
</ul>
</div>
</div>

SP Custom HTML

Frontend Appearance:

topmart

Backend Setting:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Custom HTML module >> click “Configure” button to configure.

Step 2: In the “SP Custom HTML” configuration page, click topmart button in the right corner to “ADD NEW MODULE”.

Step 3: You could configure this module like the illustration

Copy and paste the following code into the content:


<div class="app-footer">
<div class="app-title">Download Our App</div>
<div class="app-list">
<ul>
<li><a title="AppStore" href="#"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/app/app-1.jpg" alt="App Image" /></a></li>
<li><a title="Google Play" href="#"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_topmart/pub/media/wysiwyg/app/app-2.jpg" alt="App Image" /></a></li>
</ul>
</div>
</div>

Frontend Appearance:

Backend Settings:

Step 1: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules Manager >> Modules look for “SP Theme Configuration module.

Step 2: In the SP Theme Settings, choose “Social” to configure the parameters in this section.

autostore

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.

General Settings

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

Layout Settings

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

Background Settings

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

Fonts

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

Note: Please copy and paste the following line into Font Selector tab:

1.


body, h5.product-name, .price-box, #attributes .attribute_list select, h1.product_name

2.


.sp-megamenu .navbar-nav  li li a

3.


h1,h2,h3,h4,h5,h6,.content_sortPagiBar_top label, .content_sortPagiBar_bottom label,.content_sortPagiBar_top div.selector span, .content_sortPagiBar_bottom div.selector span

4.


.title_font

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.

topmart

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.

topmart

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');

Custom Codes

- 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_topmart/modules/spcustomhtml/views/css/style.css"

- You can edit css file of theme.

Example:

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

+) "../themes/sp_topmart/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_topmart/_dev/css/themestyles/_content.scss"

SP Megamenu Configuration

SP Megamenu (displayMenu)

Click Here to view documentation of SP MegaMenu module.

Frontend Appearance:

1. Navigate to IMPROVE >> Modules >> Modules Manager and look for SP Mega Menu >> Click the Configure button to access the module configuration page.

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

autostore

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

autostore

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

5. Examples. Create megamenu as the demo.

bestshop

  • Step1: Create menu "Feature" level 1. Scroll down you could configure Menu Information as follows:
  • Step2: Create submenu item.
  • Step 3: After each step, click "Save config" button and finally go to the front-end to view.

  • SP Vertical Megamenu Configuration

    SP Vertical MegaMenu (displayverticalmenu)

    Click Here to view documentation of SP Vertical MegaMenu module.

    Frontend Appearance:

    bestshop

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

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

    bestshop

    3. You could configure General Options as follows

    bestshop

    4. Menu list of Vertical Megamenu. You need to look at the menu list to configure easily.

    bestshop

    5. Examples. Create vertical megamenu as follows.

    bestshop

  • Step1: Create menu "Fashion" level 1. Scroll down you could configure Menu Information as follows:
  • Step2: Create Submenu.
    - Create submenu item (Parent ID is "Smartphones & Tablets"). In this step, you can do the same to create other items.
  • Step 3: After each step, click "Save config" button and finally go to the front-end to view.

  • Other Modules

    Click here to view Backend Setting
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Custom Html module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP One Step Checkout module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Slider For Your Homepage module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Search Pro module.
    Click here to view Frontend Appearance
    Click here to view Frontend Appearance
    Click here to view Frontend Appearance
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Footer Links module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Listing Tabs module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Categories module.
    Click here to view Frontend Appearance
    Click here to view Backend Setting
    Click here to view documentation of SP Filter Products module.

    Blog Page

    Blog Page

    Backend Settings:

    Step 1:

    • Install the "smartblog.zip" file.
    • Install the "smartblogcategories.zip" file.
    • Install the "smartbloghomelatestnews.zip" file.

    Step 2: In the Prestashop Admin Panel, navigate to IMPROVE >> Modules >> Modules and Services >> Installed Modules

    Step 3: You could configure this module like the following image.

    - Smart Blog

    bestshop

    - SmartBlog Home Latest

    bestshop

    Please read more guide for Smartblog at here. SmartBlog Module

    Contact Page

    Contact Page

    topmart

    Backend Setting:

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

    topmart

    You can change the Google map iframe by modifying this file: "themes/sp_topmart/templates/contact.tpl"

    topmart

    About us Page

    About us Page

    Frontend Appearance:

    topmart

    Backend Setting:

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

    Step 2: In the “Pages” configuration page, click topmart 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="about-container">
    <div class="about-image"><img src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/about-image.jpg" alt="About Image" /></div>
    <div class="row">
    <div class="col-lg-8">
    <div class="block-welcome">
    <div class="bonus-title"><strong>Welcome to Topmart</strong></div>
    <div class="bonus-content">
    <p>Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus. Donec eu dolor dui, vel posuere mauris. Nulla auctor mauris ut dui luctus semper.</p>
    <p>Pellentesque semper congue sodales. In consequat, metus eget con sequat ornare, augue dolor blandit purus, vitae lacinia nisi tellus in erat. Nulla ac justo eget massa aliquet sodales. Maecenas mattis male suada sem, in fringilla massa dapibus quis. Suspendisse aliquam leo id neque auctor molestie. Etiam at nulla tellus.</p>
    <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>
    </div>
    </div>
    </div>
    <div class="col-lg-4">
    <div class="block-whychoose">
    <div class="bonus-title"><strong>Why Choose Us</strong></div>
    <div class="bonus-content">
    <div class="accordion" id="accordionExample">
    <div class="card">
    <div class="card-header accordionCms" id="headingOne"><a class="title-collapse collapsed"> Shipping & Returns </a></div>
    <div id="collapseOne" class="collapse">
    <div class="card-body">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus.</div>
    </div>
    </div>
    <div class="card">
    <div class="card-header accordionCms" id="headingTwo"><a class="title-collapse collapsed"> Secure Shopping </a></div>
    <div id="collapseTwo" class="collapse">
    <div class="card-body">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus.</div>
    </div>
    </div>
    <div class="card">
    <div class="card-header accordionCms" id="headingThree"><a class="title-collapse collapsed"> International Shipping </a></div>
    <div id="collapseThree" class="collapse">
    <div class="card-body">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus.</div>
    </div>
    </div>
    <div class="card">
    <div class="card-header accordionCms" id="headingFour"><a class="title-collapse collapsed"> Affiliates </a></div>
    <div id="collapseFour" class="collapse">
    <div class="card-body">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus.</div>
    </div>
    </div>
    <div class="card">
    <div class="card-header accordionCms" id="headingFive"><a class="title-collapse collapsed"> Group Sales </a></div>
    <div id="collapseFive" class="collapse">
    <div class="card-body">Nulla auctor mauris ut dui luctus semper. In hac habitasse platea dictumst. Duis pellentesque ligula a risus suscipit dignissim. Nunc non nisl lacus. Integer pharetra lacinia dapibus.</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="our-member">
    <div class="bonus-title"><strong>Why Choose Us</strong></div>
    <div class="bonus-content">
    <div class="nav-style-1 hover-to-show absolute-nav">
    <div>
    <div class="owl-carousel owl-theme">
    <div class="item">
    <div class="member-image">
    <div class="image-content"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/member/item-1.jpg" alt="Member Image" />
    <ul class="member-social">
    <li><a class="icon-facebook" href="#" title="Facebook"> <span class="hidden">Facebook</span> </a></li>
    <li><a class="icon-twitter" href="#" title="Twitter"> <span class="hidden">Twitter</span> </a></li>
    <li><a class="icon-instagram2" href="#" title="Instagram"> <span class="hidden">Instagram</span> </a></li>
    </ul>
    </div>
    </div>
    <div class="member-info">
    <div class="member-name">Mark Levinson</div>
    <div class="member-job">Founder & CEO</div>
    </div>
    </div>
    <div class="item">
    <div class="member-image">
    <div class="image-content"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/member/item-2.jpg" alt="Member Image" />
    <ul class="member-social">
    <li><a class="icon-facebook" href="#" title="Facebook"> <span class="hidden">Facebook</span> </a></li>
    <li><a class="icon-twitter" href="#" title="Twitter"> <span class="hidden">Twitter</span> </a></li>
    <li><a class="icon-instagram2" href="#" title="Instagram"> <span class="hidden">Instagram</span> </a></li>
    </ul>
    </div>
    </div>
    <div class="member-info">
    <div class="member-name">Ria Sakurai</div>
    <div class="member-job">Testing</div>
    </div>
    </div>
    <div class="item">
    <div class="member-image">
    <div class="image-content"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/member/item-3.jpg" alt="Member Image" />
    <ul class="member-social">
    <li><a class="icon-facebook" href="#" title="Facebook"> <span class="hidden">Facebook</span> </a></li>
    <li><a class="icon-twitter" href="#" title="Twitter"> <span class="hidden">Twitter</span> </a></li>
    <li><a class="icon-instagram2" href="#" title="Instagram"> <span class="hidden">Instagram</span> </a></li>
    </ul>
    </div>
    </div>
    <div class="member-info">
    <div class="member-name">Shiego Tokuda</div>
    <div class="member-job">Marketing</div>
    </div>
    </div>
    <div class="item">
    <div class="member-image">
    <div class="image-content"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/member/item-4.jpg" alt="Member Image" />
    <ul class="member-social">
    <li><a class="icon-facebook" href="#" title="Facebook"> <span class="hidden">Facebook</span> </a></li>
    <li><a class="icon-twitter" href="#" title="Twitter"> <span class="hidden">Twitter</span> </a></li>
    <li><a class="icon-instagram2" href="#" title="Instagram"> <span class="hidden">Instagram</span> </a></li>
    </ul>
    </div>
    </div>
    <div class="member-info">
    <div class="member-name">Tom Lymaskira</div>
    <div class="member-job">Designer</div>
    </div>
    </div>
    <div class="item">
    <div class="member-image">
    <div class="image-content"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/member/item-2.jpg" alt="Member Image" />
    <ul class="member-social">
    <li><a class="icon-facebook" href="#" title="Facebook"> <span class="hidden">Facebook</span> </a></li>
    <li><a class="icon-twitter" href="#" title="Twitter"> <span class="hidden">Twitter</span> </a></li>
    <li><a class="icon-instagram2" href="#" title="Instagram"> <span class="hidden">Instagram</span> </a></li>
    </ul>
    </div>
    </div>
    <div class="member-info">
    <div class="member-name">Tom Lymaskira</div>
    <div class="member-job">Developer</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="our-client-say">
    <div class="nav-style-1 hover-to-show absolute-nav">
    <div>
    <div class="owl-carousel owl-theme">
    <div class="item">
    <div class="client-image"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/client/item-1.png" alt="Client Image" /></div>
    <div class="client-info">
    <div class="client-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    <div class="client-name-localtion"><span>Amanda Cerny</span> San Francisco</div>
    </div>
    </div>
    <div class="item">
    <div class="client-image"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/client/item-1.png" alt="Client Image" /></div>
    <div class="client-info">
    <div class="client-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    <div class="client-name-localtion"><span>Amanda Cerny</span> San Francisco</div>
    </div>
    </div>
    <div class="item">
    <div class="client-image"><img class="mark-lazy" src="http://magento2.magentech.com/themes/sm_venuse/pub/media/wysiwyg/about-us/client/item-1.png" alt="Client Image" /></div>
    <div class="client-info">
    <div class="client-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    <div class="client-name-localtion"><span>Amanda Cerny</span> San Francisco</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

    topmart

    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"

    topmart

    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"

    topmart

    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"

    topmart


    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

    topmart

    Step 2:

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

    topmart

    Currencies

    Management Currencies

    Step 1:

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

    topmart

    Step 2:

    - In the "Currencies" configuration page, click button topmart 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"

    topmart

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

    topmart

    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"

    topmart

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

    topmart

    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.