Using LiveEdit in PrestaShop 1.5

LiveEdit is a feature that allows you to reposition sections of your storefront by simply dragging and dropping. There are some limitations to it, but it is a great feature that you can use to move sections of your store around quickly. The following tutorial guides you in how to use this PrestaShop feature.

Using the LiveEdit feature in PrestaShop 1.5x

1. Login to the PrestaShop Dashboard.
2. Hover over MODULES in the menu bar, then click on POSITIONS. You will then see LiveEdit on the right side. Click on LiveEdit to launch it. If you have the multistore option enabled, then you will see that in order to use LiveEdit, you will need to select a specific store. Changes in module positions will be saved for that specific store.
3. A new browser tab will open and it will display your storefront. The main difference is that you are in the LiveEdit mode. You can left-click, on an outlined section and then drag it into a different position. Left-click on a sidebar item and then drag it over the middle section of your StoreFront.
4. You should see red shaded area appear beneath the section that you are moving. This indicates that you cannot place the item in that location. This will vary by theme and layout. This tutorial uses the default PrestaShop theme to demonstrate this feature.
5. Drag the image further to the right and you will see the shaded area change to green indicating that you can place the module in that area. Release the left mouse button to place the block in that location.
6. If you wish to exit from LiveEdit without making changes, then look in the top right corner and select CLOSE. You will be asked to confirm this option if you have made any positional changes. If you confirm, then no changes will be saved and the layout will revert to the previously saved positions.
7. If you wish to save your position changes, then look in the top right corner and select SAVE. Otherwise, you can continue to move the modules where you wish.

When you have completed making your changes and you save, LiveEdit will automatically close and you will see the storefront live just like your customers will see it. Here's a before and after example of using LiveEdit: