Page History

...

The position of a module in your theme can be changed, because you might want one module's block to be placed much higher (or lower) in the page that others. In PrestaShop's parlance, this is called "transplanting", and is done using the tool available in the "Positions" page, under the "ModulesDesign" menu. In effect, this enables you to attach a module to one of the many available hooks in the current theme, without writing any code.

The "Positions" page displays all the available hooks, and hooks and their attached modules. Many are empty by default, but some of the most useful ones have a dozen of modules (the displayHeader hook has 33 modules by default).

At the top of the page, a drop-down menu enables you to only display the hook module in which you are interested. Alternatively, you can also search for a specific hook.
By default, this page only displays the hooks on which you can position functions. Checking the "Display non-positionable hooks" box below displays all the hooks, even those where you cannot position something.

The header of the table for each hook displays the hook's name, its technical name (and for some, a quick description (when available), and its number of attached modules. The table lists the modules that are attached to that hook.

...

The transplanting process has its own interface:

1. Go to the "ModulesDesign" menu, and its "Positions" page.
2. Click the "Transplant a module" button at the top right. The transplanting interface appears.
3. In the "Module" drop-down list, select the module you want to transplant.
4. In the "Hook intoTransplant to" drop-down list, select where you want to transplant the module to. There are many hooks available hooks. You can change your setting settings later if needed.
5. In the "Exceptions" field, type the name of the file(s) of the pages in which you do not want the module to appear.
   You can perform multiple selections simply by clicking on the file names while keeping the Ctrl key pressed. You can deselect files in the same manner: Ctrl+click.
6. Do not forget to save your changes.

The "Hook intoTransplant to" drop-down menu gives you a good idea where modules can be placed.

Even though the "Hook intoTransplant to" drop-down list gives a comprehensive overview of the available hooks, it might not always be clear which is the one to which you want to attach your module. Do not hesitate to try another hook if the result of your selection if not what you expect.
The list gives some detaildetails: some hook have a description after the hook's name, for instance, "Add fields to the form 'attribute value'" for displayAttributeForm. Peruse them all in order to choose your hook correctly.

Editing an attached module

Each module has two icons an action button on the right side of its row, with two possible options: one to edit its settings, the other one to delete the module.

Editing a module's setting uses the same interface as the one used for the transplanting a module. The major only difference is that you cannot change the "Module" and "Hook into" settingsfield, as they are it is disabled, and thus grayed out. You can only edit both the exception setting"Transplant to" setting and the exceptions, which works just as described in the "Attaching a module to a hook" method above.While you cannot edit the "Module" and "Hook into" settings, they can serve as a handy reminder of their current position, should you want to put them back there later on.

If you want to move a module to another hook, you must use the transplanting interface:

1. Click the "Transplant a module" button at the top right. The transplanting interface appears.
2. In the "Module" drop-down list, select the module you want to move to another hook.
3. In the "Hook into" drop-down list, select where you want to transplant the module to.
4. In the "Exceptions" field, type the name of the file(s) of the pages in which you do not want the module to appear.
5. Save your changes. The hook list appears.
6. Go to the hook where you have transplanted the module: it should appear in there. Change its position if necessary.
7. Go to the hook where the module first was, and click the trashcan icon in order to remove it from that hook. This prevents you from having the same module appear twice.

Always check your front-office to make sure the module is indeed where you intended it to be.

...

• Removing a single module: click the trashcan icon on the right of the module's row.
• Removing a batch of modules: select the modules by checking the box on the right left of their row, and then click the "Unhook the selection" button, found at the top and the bottom of the list of hooks.

Moving a module visually: Live Edit

Another way to move modules around on the shop's homepage is the Live Edit mode, which embeds said homepage into a tool that lets you visually decide where to place your modules. You can access it from the "Position" page, by clicking the "Run Live Edit" button.

Image Removed

When clicked, PrestaShop opens the homepage in a new browser windows/tab, with the Live Edit script on top:

• All module blocks have a dotted red border, enabling you to see which blocks you can move.
• At their top left side, a block-specific icon appears, along with the block's name, enabling you to always find your way among blocks.
• At their top right side, they have two icons:
  1. A "move" icon: click on it to start moving the module around.
  2. A "trash" icon: click it to remove the block from the home.

Image Removed

At the top of the Live Edit mode, a toolbar presents you with two buttons: "Close Live Edit" and "Save".

The first one is quite self-explanatory; the second one cancels all changes you might have made to your modules' position during this live-editing session.

Where to move modules?

Modules cannot be moved just about anywhere: it depends on both the theme's hooks, and each module's hook support (as seen in the above section). Therefore, you mostly can only move modules within their understood context: column modules can be moved within a column as well as from one column to the other (right to left, for instance), while regular homepage modules (the ones at the center) can only be moved within their specific column.

In order to give you a visual hint about where a given module can be moved, it will display an empty green block if the location is correct, and an empty red block if not.

Transplanting a module by modifying its code

...

Some modules cannot be transplanted into other sections of the front - office simply because they lack the necessary code.

...