Time for action—Moving the blocks

The default positions of the blocks when they are first installed are shown in the following screenshot. Now, let's try moving the blocks to a different location.

We will try to do the following:

• Add a NEW PRODUCTS block to the left column and delete the NEW PRODUCTS block on the right column.
• Shift the CART to the top position on the right column and move the TOP SELLERS to the second position on the same column.
• Move the NEWSLETTERS block to the right column.

We need to perform the following steps:

1. Click on the Positions button. This will direct us to the Back Office | Modules | Positions page.

   This page will show us all the modules already installed on the left, right, and center columns. It will also allow you to see which modules can be moved or set exceptions.

   

   Our first task is to transplant a NEW PRODUCTS block on the left column.

2. Click on the Transplant a module button, and you will get to a page where you choose the modules you want to transplant from the drop-down list.
   
3. From the Module list, choose New products block .
4. From the Hook into drop-down list, you may select where you want to transplant the module into. In our case, choose the Left column blocks.
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. If, at this stage, you are not sure what to exclude, leave it blank; you may come back to review this setting later.
6. Click on the Save button. You will get a message that says Module transplanted successfully to hook.

   Tip

   It is best to install the module, hook it into the section and enter the exceptions the first time you transplant a module. If you leave it for a later stage, the changes may not be very obvious or sometimes seem ineffective. It is better to delete the module. Go to transplant and hook it again with the exceptions keyed in.

7. Preview the changes in your front office.
   

The next task is to delete the NEW PRODUCTS block from the right.

1. Go to the Positions tab.
2. Look up the Right column block list.
3. Delete the New products block by clicking the close icon on the right.
4. You should get the message Module removed successfully from hook.
   

Our next task is to shift the CART to the top position on the right column and move the TOP SELLERS block to the second position in the same column.

1. Go to the Positions tab.
2. Move the cart by dragging the Cart block to the top deck of the Right column block list when you see a four headed arrow as you move the mouse over the module you want to re-position.
   
3. Once you have dragged the module to the top, it will appear above the Top seller block in the front office.

Our next task is to move the NEWSLETTERS block from the left column to the right column.

1. Go to the Positions tab.
2. Click on the Transplant a module tab.
3. Then repeat the same steps as we did when choosing the Module as the Newsletter block and Hook into as the Right colu mn blocks
   
4. Click on the Save button.
5. Again, you should get the message that says Module transplanted successfully to hook.
6. You will see that the Newsletter block module is already listed within the right block.
   
7. Now, delete the Newsletter block in the left column by clicking the delete button.
8. Preview your changes in the front office.
   

What just happened?

You performed a few fundamental tasks in building your online store. You learned how to position your modules including moving blocks within columns and moving them from one column to another.

On top of positioning the module blocks on hooks, you also learned that we can put exceptions on where the modules should appear.

If you do not want to show any particular module, for example, the New Product blocks in the side columns of the order.php page, you may insert this on the page.

You may do this with other modules in the left and right columns. After completing this stage, you will need to look at the other page elements which will be discussed in the next chapter.

Have a go hero—Configuring the module on your page

With what we have explored in the previous section, see if you can configure and edit the editorial block in the centre column. Get an image for the centre piece that is related to your store. Replace the current image with this new image.

Tip

Sometimes, the editor does not show the change that has been made, even though the front page has already shown the updated image. Always refresh your browser after you update the editor to view your front page changes when you make any adjustments.

The PrestaShop default theme image on the center is sized 530x238 pixels. You will need to adjust the size of your own image accordingly. The sample image we used is 550x394 pixels. Be careful with the width of the image as it may interfere with the three-column layout.

You may also edit the link to the image on this editorial block by modifying the Homepage logo link in this editor

Edit the contents of the editorial block, which appear on the front page of your site. Editing the Introductory texts is possible using the WYSIWYG editor. You can do almost anything here for example, insert an image, embed media (Flash, Shockwave, Real Media, Windows Media, QuickTime, and so on), indent a paragraph, change the font, and so on.

Pop Quiz

1. Where do you go in the back office to transplant the module within your PrestaShop site?
   1. Back Office | Tools
   2. Back Office | Modules | Positions
   3. Back Office | Modules | Preferences
2. What is a Hook?
   1. A module used in PrestaShop
   2. A block that houses the enabled modules
   3. The left column