PrestaShop 1.3 Beginner's Guide: Build and customize your online store with this speedy, lightweight e-commerce solution

1. Log in to your PrestaShop control panel and click on the Modules tab. You should see the same window as shown in the previous screenshot.

2. Scroll down the list of modules and under the heading Blocks you will see the Cart block module. Just to the right of the description, click on the Install button.

3. Now scroll back to the Cart block module. Notice the green activated tick icon. Click on Configure.

4. Here you have the option to select an Ajax cart or not. AJAX is a suite of technologies that enables some really cool and smooth web effects. Sound like a good idea? Thought so. The reason you have the option to switch AJAX off is that some older templates that we will look at later in this chapter do not get along with AJAX and you would need to switch it off. For now at least, I suggest leaving it on. Click Save when you're ready.

5. Go and have a look at your shop front. You should...

1. Click on Your Account at the top-right of your store front. In the Create your account box, enter your e-mail and click on the Create your account button.

2. The form is very self-explanatory. Fill it out and click the green Register button at the bottom of the screen. You are now at the MY ACCOUNT page, as shown in the following screenshot:

3. Take a close look at the now visible My Account module and compare it to the links on the main content area of the page. They are just about identical. So we can simply devise from this that the purpose of the My Account module is a permanently visible version of the main MY ACCOUNT page.

4. Click on My account at the top-left just to confirm this.

1. Click on the Modules tab and scroll down to the section titled Tools (not the Tools tab!), find the Home text editor, and click on Install.

2. Now come back to it again and click on Configure. I have divided the page you will see into two screenshots.

3. Now visit your store's home page. This will show you what the default content in the Home text editor is. It will make it much easy to follow when we change it all next.

4. Click into the Main title box and change the text to suit your shop. Your shop title could...

1. Click on the Tools tab. Next click on CMS.

2. From the list of pages, click on the first one that you want to edit. The Edit button is the little pencil and paper picture in the middle of the three icons on the right.

3. Type or copy and paste your content as discussed previously. Click on the Save button when done.

4. Repeat for each page. Notice that there is a little red cross icon next to the edit icon. You can delete a page if you feel you do not need it. For example, many stores combine their terms and conditions with their legal notice.

5. Visit all your new pages to make sure they are formatted as you want them.

1. First, click on the Catalog tab and then on Manufacturers. Click on Add new. Near the top you will see the following screen:

2. Fill out all the details and if possible upload an image. This is especially relevant where the manufacturer/brand name is trusted or admired in your field of business. By writing a short but concise description and adding a smart image, you associate your business with that of the brand. This can only be good for sales. The last three options are Meta title, Meta description, and Meta keywords. If you know what you want to put here, great, do it! I recommend leaving them empty until later when we discuss search engine optimization. We will look at the different types of metadata and ways to use keywords...

1. Click on the Employees tab and then Contacts.

2. Click on Add new and enter the details of the new department/contact. Be sure to write something informative in the Description box because this is displayed to the customer. Then Save the information.

3. Repeat for each department/e-mail address combination you require.

4. Visit your Contact page and send test messages to each department to make sure everything is working as expected.

1. Download the template to your PC.

2. Hold the Windows key and tap E twice. In one window, browse to your downloaded theme. In the other window, log into your website via FTP.

3. On your website, browse to the themes folder.

4. Drag the new themes folder onto your website.

5. Now log into your PrestaShop admin panel.

6. Click on the Preferences tab and then on Appearance. Scroll to the bottom of the page, select your new template, and click on Save. How quick was that?

7. Okay. Just one more step, might be required. View your template. Is it muddled or not appearing at all? If so, it is probably designed for an older version of PrestaShop. No problem. There is a button to fix this. Click on the Preferences tab again and scroll to the very bottom of the page. Click on Yes for v1.1 version theme compatibility. All should be well. Remember to change this setting back if you download a newer theme or switch back to the standard...

1. Click on the Modules tab and then the Positions sub-tab.

2. Click on the Transplant a module link.

3. Select the module that you want to move in the top drop-down box and then where you want to move it to in the second.

4. Now specify a list of any pages that you don't want the module to appear on (if any).

5. Click on Save.

6. Notice that the module appears twice: in the original position and the new one. If this is not the desired effect, simply go back to your module positions page and click the red cross next to the one you don't want anymore.

7. Now you are back at the main Positions page, you can scroll down to the position you just moved a module to and using the up down arrows raise or lower the position it appears in. You can also drag and drop the modules.

1. Click on the Preferences tab and then the Image sub-tab. Notice you can change the size of just about any image. This is really flexible and useful. Try experimenting with different image types.

2. Click on the Edit button next to whichever image you are going to mess with and enter your new size. Be daring, you can always change it back. Click on Save.

3. Now scroll to the bottom of the page and click Regenerate thumbnails. Go and have a look at your products. Some of the images also need to be edited in your CSS file (more soon), but for some you will see the change right away.

4. Now, if necessary, we can reduce the number of products...

1. Open an FTP window on your web host.

2. Click into the themes directory in the main prestashop folder. Drag a copy of the folder you want to copy to your desktop. If working with the default theme, the folder is called prestashop.

3. Now right-click the folder on your desktop and select Rename. Rename the folder to whatever you want your new theme to be called (no spaces and all lower case is the best).

4. Drag the new folder onto your web server. You now have a new theme.

5. In your PrestaShop control panel, click on the Preferences tab and then the Appearance tab.

6. Scroll to the bottom and change to your new theme. Visit your...

1. Open the CSS file in Notepad++ or something similar.

2. Make one amendment to your file.

3. Be sure to retain any subtle parts of the code like commas or semicolons.

4. Save the modified file.

5. Via FTP, transfer the new global.css file to your web server and put it in exactly the same folder as it was on your desktop.

6. You will be prompted if you want to overwrite the existing file. As you have made a backup (right?) that is fine, because if there are any problems with the new file you can quickly replace it with the original.

7. Visit your store, refresh the page (F5), and view the changes.

8. Replace the file if necessary. Move on to your next tweak if happy.

1. Click on the Preferences tab.

2. Click on Appearance. This is what you will see:

3. Click on the Choose File button underneath the PrestaShop logo and browse to your new logo.

4. While on this screen, you can also upload a new Favicon. That is a tiny graphic that displays in your visitors web browser. Just make a 16 x 16 pixels image in GIMP and save it with the .ico extension.

5. When you're done, save the changes by clicking on Save.