PrestaShop Advanced Slider with Hotspots Instalation and Configuration Guide

Website: http://orange35.com

Email: [email protected]

RIGHT SOLUTIONS FOR YOUR BUSINESS

PrestaShop Advanced Slider with Hotspots Installation/Configuration Guide

Contents

1. Installation a. Adding a hook b. How to clear Smarty cache

2. Configuration a. Manage Slides b. Edit Slide c. Manage Hotspots

i. Hotspot Appearance d. General Settings e. Hotspot Popup Theme

3. Additional Instructions

1

http://www.google.com/url?q=http%3A%2F%2Forange35.com&sa=D&sntz=1&usg=AFQjCNF1OmXa1jgyGXmSXK48Yhmyyh6Ozg


mailto:[email protected]




How to disable standard modules How to reorder modules on the Homepage

Visit DEMO Website Bug Reporting/Feature Request

Installation

1. On your back end, go to Modules → Modules menu and hit Add a new module button. 2. Hit Browse button and select advancedhotspotsliderv1.0.zip archive file. 3. Hit Upload this module button.

4. Finally, in the Front Office Features section, find "Advanced Slider with Hotspots"

module and hit Install button next to it. If for some reason, the slider is still not showing on your website, you may have to add a hook or clear Smarty cache. Just follow the steps listed below:

Adding a hook

1. In the Front Office Features section find “Advanced Slider with Hotspots” module and click Configure link underneath it.

2. Click Manage hooks link at the top of the page and then hit Transplant a module button.

3. Select the following option in the Hook into dropdown: for prestashop 1.5.4 and newer: ‘displayHome (Homepage content)’ for prestashop 1.5.3 and older: Homepage content known as ‘displayHome’

2




https://docs.google.com/a/orange35.com/document/d/196qkIJamFXVBxsaGe3m5ftccGsZ5U6jMpBKCl-wlgAc/edit#heading=h.j27e41spsd1w

https://docs.google.com/a/orange35.com/document/d/196qkIJamFXVBxsaGe3m5ftccGsZ5U6jMpBKCl-wlgAc/edit#heading=h.htcn4p10x5xx

https://docs.google.com/a/orange35.com/document/d/196qkIJamFXVBxsaGe3m5ftccGsZ5U6jMpBKCl-wlgAc/edit#heading=h.9dsgjrhgwe23

https://docs.google.com/a/orange35.com/document/d/196qkIJamFXVBxsaGe3m5ftccGsZ5U6jMpBKCl-wlgAc/edit#heading=h.dttuv61b0ylo




4. Hit Save button. You can transplant a module into different places of your website using other than ‘displayHome’ hooks. The following hooks are supported by the module:

‘displayTop’, ‘displayHeader’, ‘displayRightColumn’, ‘displayLeftColumn’, ‘displayRightColumn’, ‘displayFooter’.

Adding process is the same as for adding the ‘displayHome’ hook.

How to clear Smarty cache (see a screenshot below)

1. On your back end, go to Advanced Parameters → Performance section. 2. Hit Clear Smarty cache button.

Configuration

1. Under Modules → Modules menu, in the Front Office Features section, find "Advanced Slider with Hotspots" module and click Configure link underneath it.

2. On the module page, you will see the following three sections: a. Manage Slides.

3







b. General Settings. c. Hotspot Popup Theme.

Manage Slides This section (see a screenshot below) is for managing slides themselves and their hotspots. It shows a list of slides with their preview images, titles and links (if there are any) and

icons that serve for different management purposes: Enabled/Disabled

Edit Manage Hotspots Delete Drag and drop function for reordering slides is available:

Edit Slide (see a screenshot below)

On the Edit Slide form, you can configure a specific slide in the following way:

add a title to a slide that’s being edited; add an image (required); link the slide with a certain page; choose which language store to apply the changes for; enable/disable the slide itself on the front end.

4







Manage Hotspots (see a screenshot below)

1. On the list of slides, hit the Manage Hotspots icon on the slide you need. 2. You will get to the Manage Slide's Hotspots form. 3. Hit green Add New Hotspot button to add a hotspot. 4. The square appearing on the slide picture is your hotspot, which you now have to

adjust as needed. Your hotspot can be adjusted in the following way (make sure the hotspot you want to edit is active):

a) the hotspot can be placed anywhere within a picture; b) hotspot’s size is adjustable by dragging hotspot’s border; c) hotspot’s parameters are adjustable in the Active Hotspot Settings:

shape is adjustable via Shape Radius option; you can enable/disable hotspot’s shading effect; you can indicate a link to have your hotspot linked with a certain page; you can add a short description for the hot spotted area (html is allowed); you can indicate a button name and have a button displaying in the hotspot popup.

5







1. You can delete one active hotspot with the Delete Active Hotspot button or delete

all the hotspots within a slide with the Delete All Hotspots button. Note that in case there are different hotspots set for different language stores, you will have to delete hotspots separately for each store.

2. Hit Save or Save and Stay Here button after you’re done with the changes, otherwise hit Cancel and Go Back to get back to module’s main configuration page.

6







Hotspot Appearance Hotspot appearance can vary based on how it is configured on the back end. Below are hotspot appearance specifications:

any hot spotted area within a slider will be guided with the pointer cursor if a hotspot has a link, description and a button name specified on the back end -

it will be represented with a popup with description and a button on the front end, where a hot spotted area isn’t clickable but the button is:

if a hotspot has only link and description specified - it will be represented with just

a popup with description with no button on the front end, where a hot spotted area is clickable:

if a hotspot has only link and button name specified - it will be represented with

just a popup with the button with no description on the front end, where a hot

spotted area is not clickable, but the button is: if a hotspot has description with/without button name specified - it will be

represented with a popup showing just description with no clickable hot spotted area

or button: if a hotspot has only a link specified - it will be represented with no popup just the

7







clickable hot spotted area:

if a hotspot has only button name specified - it will be represented with no popup

and no clickable hot spotted area, however the hotspot can have a shading effect on a mouseover if enabled via back end.

General Settings This section (see a screenshot below) serves for configuring module’s general options:

Set slider's width and height; Choose transition effect; Define transition speed and pause; Enable/disable automatic transition; Enable/disable infinite loop, pagination and navigation arrows.

8







Hotspot Popup Theme This section (see a screenshot below) serves for choosing one of the six available popup themes of different colors to match your website style.

9







Note that if you’ve applied any changes to the slider, however don’t see them on the front end, make sure to clear site Smarty cache (see above how to do so) to have them displaying.

Additional Instructions Below are some additional guidelines that may be helpful for adjusting the homepage of your online store.

How to disable standard modules you don’t want to have showing on the homepage:

1. On your back end, go to "Modules" > "Positions" section:

10







2. Find "Homepage content" section on the list and remove all the unnecessary modules:

How to reorder modules on the Homepage 1. On your back end, go to "Modules" → "Positions" section. 1. Find "Homepage content" section on the list, where the modules displaying on the

homepage are listed. Reorder modules in one of the following ways (see the screenshot below):

a. Move the cursor to the left module’s thumbnail picture until it becomes cross shaped with arrows. Drag and drop the module to the position you want.

b. Use the little ‘up’ and ‘down’ triangular arrows locating to the left of module’s thumbnail picture to move module’s position.

11







Visit DEMO Website http://demo.orange35.com/prestashopahs

Bug Reporting/Feature Request

Please feel free to submit a contact form at http://orange35.com/contactus or email us at [email protected] in case of any questions or comments on Advanced Slider with Hotspots. Our friendly support team will gladly assist you.

12




http://www.google.com/url?q=http%3A%2F%2Fdemo.orange35.com%2Fprestashop-ahs&sa=D&sntz=1&usg=AFQjCNGd4-7iUUH1DhnifOhVGoEBmF22oA

http://www.google.com/url?q=http%3A%2F%2Fdemo.orange35.com%2Fprestashop-ahs&sa=D&sntz=1&usg=AFQjCNGd4-7iUUH1DhnifOhVGoEBmF22oA

http://www.google.com/url?q=http%3A%2F%2Forange35.com%2Fcontact-us&sa=D&sntz=1&usg=AFQjCNEjaVWads-VHZUrwZSJ8p4Zbp_Dvw


PrestaShop Advanced Slider with Hotspots Instalation and Configuration Guide

Technology