SP Zana | MagenTech Documentation Area

9.1 How To Create Categories Menu

Step 1: Creating a new category

• Log into your PrestaShop Admin Panel.
• Navigate to the Catalog >> Categories menu.
• To create a new category, click the Add New button.

• When the page with the category settings appears, enter the data required:
  • Name: give your category a name. You can also put category titles for different languages in this field if you’re using a multi-language store.
  • Displayed: choose to enable or disable your category.
  • Parent Category: if you wish to create a subcategory for a category other than the home page, choose the category under which it will appear.
  • Description: add the content you need to the new category. You can use the visual editor to format your text, insert images, and turn on the source HTML code of the description.
  • Image : click the Add file button to upload an image from your computer.
  • Thumbnails : you can add three thumbnail images that will be shown in the menu drop down on your front end.
  • Meta title: the title that will appear on the search engines when a request is made by a customer.
  • Meta description: your category description that will appear in search engine results.
  • Meta Keywords: keywords to make your store recognizable by search engines. You can enter several of them, separated by commas, as well as expressions which must be indicated in quotation marks.
  • Friendly URL : enables you to rewrite the addresses of your categories as you wish.
  • Group access : the option to restrict access to the category and its products for certain customer groups.

• Click the Save button to save your new category. For illustration as below:

Step 2: Adding a new category link to the top menu

• Navigate to Modules -> Modules and look for Top horizontal menu.

• Click the Configure button to access the module configuration page.
• The left column displays current menu elements and the right one displays available menu elements. You will see the list of all your categories, CMS pages, manufacturers and suppliers as well as the option to add the link to the product page. You may also add custom links to the menu list using the Add a new link section.

• To add a new element to the frontend menu, you should select the required element on the right and click the Add button.

• Click Save to confirm adding a new menu item for the top menu.

• Please check your web-store front-end. We added a new category and linked it to the top menu successfully.

9.2 How To Configure Extensions

Note: Please readmore here about How to work with prestashop modules

With DisplayTop1 Position

1. SP Custom HTML Module: Offer

Frontend Appearance:

Backend Settings:

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

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

Step 3: The configuration of “Offer” Module as the illustration.

With Position DisplayTop2

1. SP Custom HTML Module: My Account

Frontend Appearance:

Backend Settings:

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

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

Step 3: The configuration of “My Account” as the illustration.

With DisplayCart Position

1. SP Cart block Module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Cart block” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Cart block” module as the illustration.

With DisplayTopNav Position

1. SP User info block Module

Frontend Appearance:

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “user info block” module >> click arrow down in the right corner, it will display a list box that you can configure such as “Disable on mobiles, Disable on tablets, Disable on computers, Reset, Uninstall, Mark as favorite, Delete”.

• Disable on mobiles: This will disable the front-office view of the module only for mobile devices (smartphones, etc.).
• Disable on tablets: This will disable the front-office view of the module only for tables.
• Disable on computers: This will disable the front-office view of the module only for desktop computers.
• Reset: This will restore the module’s settings to their defaults.
  
• Uninstall: This will disable the module and delete its data
• Mark as favorite: This will add the module to your Favorites list
• Delete: This will remove the module from the modules list, and delete its files and folders from your server.

Note: “SP Language block“; “SP Currency block” & “SP Quick Search block” configure the same with “SP User info block” as above.

With DisplayTop4 Position

1. SP Custom HTML Module

Frontend Appearance:

Backend Settings:

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

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

Step 3: The configuration of “SP Custom HTML” module as the illustration.

With DisplaySlideshow Position

1. SP Image Slider Module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Image Slider” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Image Slider” module as the illustration.

With DisplayHome Position

1. SP Theme Configurator module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Theme Configurator” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Theme Configurator” module as the illustration.

With DisplayBottom1 Position

1. SP Deal module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Deal” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Deal” module as the illustration.

2. SP Custom HTML module

Frontend Appearance:

Backend Settings:

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

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

Step 3: The configuration of “SP Custom HTML” module as the illustration.

3. SP Super Category module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Super Category” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Super Category” module as the illustration.

4. SP Categories module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Categories” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Categories” module as the illustration.

With DisplayBottom2 Position

1. SP Super Category module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Super Category” module >> click “Configure” button to configure.

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

Step 3: The configuration of “SP Super Category” module as the illustration.

2. Smartblog Home Latest module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Smartblog Home Latest” module >> click “Configure” button to configure.

Step 2: In the “Smartblog Home Latest Module” configuration page, click button in the right corner to “ADD NEW MODULE”.

Step 3: The configuration of “Smartblog Home Latest” module as the illustration.

3. SP Custom HTML module

Frontend Appearance:

Backend Settings:

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

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

Step 3: The configuration of “SP Custom HTML” module as the illustration.

With DisplayBottom3 Position

1. SP Manufacturer Slider module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Manufacturer Slider” module >> click “Configure” button to configure.

Step 2: The configuration of “SP Manufacturer Slider” module as the illustration.

2. SP Social block module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Social block” module >> click “Configure” button to configure.

Step 2: The configuration of “SP Social block” module as the illustration.

3. SP Newsletter block module

Frontend Appearance:

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “SP Newsletter block” module >> click “Configure” button to configure.

Step 2: The configuration of “SP Newsletter block” module as the illustration.

With DisplayFooter Position

Frontend Appearance:

1. Categories block module

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Categories block” module >> click “Configure” button to configure.

Step 2: The configuration of “Categories block” module as the illustration.

2. Contact information block module

Backend Settings:

Step 1: In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “Contact information block” module >> click “Configure” button to configure.

Step 2: The configuration of “Contact information block” module as the illustration.

3. My Account block module

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “My Account block” module >> click “Enable” button to enable this module.

4. CMS block module

Backend Settings:

In the Pretashop Admin Panel, navigate to Modules >> Modules >> look for “CMS block” module >> click “Configure” button to configure this module.

5. SP Custom HTML module - Payment

Backend Settings:

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

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

Step 3: The configuration of “SP Custom HTML” module as the illustration.

6. SP Custom HTML module - Footer Links

Backend Settings:

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

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

Step 3: The configuration of “SP Custom HTML” module as the illustration.

Note: The modules configuration in “The Layout2″ & “Layout3″ are nearly the same with “Layout1″. Please note that only the little difference is the hook selection for the module and the shop selection.

9.3 How To Edit Logo

Frontend Appearance:

In your Administrator Page, navigate to PREFERENCES >> Themes >> in Logo tab, you add logo image file as you want.