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.

The following tutorial shows how LiveEdit operates in PrestaShop version 1.561. For information on how LiveEdit works in pre-1.5 versions, please see Using LiveEdit in PrestaShop 1.49.

Using the LiveEdit feature in PrestaShop 1.5x

  1. Login to the PrestaShop Dashboard.
  2. PrestaShop Module Positions 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. PrestaShop Module Positions 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. LiveEdit red-shaded areas 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. LiveEdit green-shaded areas 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. Close LiveEdit without saving 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. Save changes in LiveEdit 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:

Before the LiveEdit change After the LiveEdit change
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.