If you have a brick-and-mortar/physical business location, you’d want to add Google Maps to your site’s contact page. This will provide convenience to your potential customers. Also, putting a map and physical address will give more confidence to those who are considering to buy merchandise from you.

See example and screen-shot below, which is taken from one of our Premium Themes. Step by step guide after the screen-shot.

Google Maps on PrestaShop Contact Page

STEP 1 – Download

1. Click here to download the zipped contact-form.tpl file.
2. Unzip the contact-form.tpl file to any location on your computer.

STEP 2 – Editing

1. Open the contact-form.tpl file with any text editor.
2. Get your API key from Google — Go to http://code.google.com/apis/maps/signup.html, enter your domain and get the key (it’s a long line of seemingly random characters).
3. Copy and paste the key to contact-form.tpl — replace the text YOUR_API_KEY_HERE with your key (line 8).
4. Get the exact latitude/longitude of your business location at http://www.gorissen.info/Pierre/maps/googleMapLocation.php — Scroll and zoom in as close as possible to get the accurate position.
5. Replace the (latitude,longitude) data (two locations — line 48 and 52).
6. Change the business name/details (line 34).
7. Save the file and upload to your theme folder:  \themes\YOUR_THEME\contact-form.tpl — It’s recommended that you download and backup a copy first before overwriting.
8. That’s it. Open your PrestaShop site’s contact page in any browser and see the result.

CAUTION:
When you paste the Latitude and Longitude data, make sure you follow the order (Latitude, Longitude).

IMPORTANT NOTE:
The file above is for PrestaShop 1.3 and PrestaShop 1.3.1. If you have any other older or newer version of PrestaShop, you can download the file, then copy the lines of code between <!– Google Maps code start –> and <!– Google Maps code end –>, then paste to your own contact-form.tpl file at about the same location.

Browser compatibility: Tested with Firefox, Google Chrome, Opera, Safari, IE6, IE7 and IE8.

This is an important security update, please install (or upgrade to) PrestaShop 1.3.1 (also known as 1.3.1.1).

Do not be misled by anyone , as themes for the older PrestaShop 1.3 are NOT fully compatible with PrestaShop 1.3.1. All our premium themes and free themes have been updated to be compatible with PrestaShop 1.3.1 (also known as 1.3.1.1).

Themes for the older PrestaShop 1.2 are still available. All our download pages will provide two download links — one link for PrestaShop 1.3.1 theme and one link for PrestaShop 1.2 (1.2.4/1.2.5) theme.

(If, somehow, you need themes for PrestaShop 1.3, let us know)

The stable public version of PrestaShop 1.3 is now available for download at PrestaShop.com.

All our premium themes and free themes have been updated to work with PrestaShop 1.3.

A recap from one of our earlier posts:
Please note that themes for PrestaShop 1.2 are not fully compatible with PrestaShop 1.3, and vice versa. So, for each download page, we provide 2 links, one link for PrestaShop 1.3 theme and another for PrestaShop 1.2 theme.

Note:  Pres 6 and Pres 7 premium themes are only for PrestaShop 1.3.

To add the Facebook ‘Like’ button on every product page, you just need to add one line of code to one file.

STEP 1

Open this file with any text editor:
\themes\THEME_NAME\product.tpl

Where THEME_NAME is the folder name of the theme you are using.

STEP 2

Copy this code:

<iframe src="http://www.facebook.com/plugins/like.php?href={php} echo 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']; {/php}&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:35px; margin-top:10px; margin-bottom: 0px"></iframe>

Paste the code to around line 87 — or right after this line:  {include file=$tpl_dir./breadcrumb.tpl}

OPTIONAL: CUSTOMIZATION

The Facebook plug-in code added to the PrestaShop file was obtained from Facebook (have a look, but you do not need to get the code from there).

There are a few parameters that you may want to change to the code that you copied from STEP 2 above:

1. show_faces=false — Change to true if you want the widget to display the thumbnail photos of those who have ‘liked’ your product.
2. colorscheme=light – Change to dark if your page is dark in color.
3. height:35px — This was arbitrarily choosen. If you choose to display ‘faces’, then you should increase the height of the widget (80px or more).

Compatibility: PrestaShop all versions

Note: Example is provided as is. Not guaranteed to work across all hosting platforms (especially Windows server). Try it out before leaving it live on your site.

CLICK TO VIEW DEMO

IMPORTANT: Two files need to edited. So backup these files before you start(YOUR_THEME_NAME is the folder name of the theme you are using):
\themes\YOUR_THEME_NAME\header.tpl
\themes\YOUR_THEME_NAME\css\global.css

STEP 1

Open header.tpl from your theme’s folder with any text editor — Paste the code shown below on a new line, right below/after the line with the <body… > tag (about line 40).
IMPORTANT: Change YOUR_THEME_NAME to your theme’s folder name.

{if $page_name == 'index'}
<script type="text/javascript" src="{$content_dir}themes/YOUR_THEME_NAME/js/slide/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="{$content_dir}themes/YOUR_THEME_NAME/js/slide/simslide_scripts.js"></script>
{/if}

STEP 2

Still with header.tpl — Paste this code to replace the “banner” or “banner1” DIV block

NOTE:

1. IMPORTANT: Change the image filename and YOUR_THEME_NAME below to match you own images.
2. IMPORTANT: Change the width (980) and height (300) below to the dimension of your images.
3. You can copy the line of the slide2 below to add more images to your slideshow.
4. You can also remove the links for the images (or edit the links so that the images are clickable).

<!--- Display jQuery slideshow on home page	start -->
	<div id="slideshow">
		<ul id="nav">
			<li id="prev"><a href="#">Previous</a></li>
			<li id="next"><a href="#">Next</a></li>
		</ul>
 
		<ul id="slides">
			<li><a href="http://www.google.com"><img width="980" height="300" src="{$base_dir}themes/YOUR_THEME_NAME/img/slide1.jpg" alt="" /></a></li>
			<li><a href="http://www.google.com"><img width="980" height="300" src="{$base_dir}themes/YOUR_THEME_NAME/img/slide2.jpg" alt="" /></a></li>
 
		</ul>
	</div> <!-- slideshow -->  
<!--- Display jQuery slideshow on home page	end -->

STEP 3

Open global.css from your theme’s folder — Paste this block of code at the bottom.

IMPORTANT: Change the width (980px) and height (300px) below to the dimension of your slideshow images (decide on a dimension that fits your theme layout and make sure all your images have the same dimension)
IMPORTANT: After you have completed all steps of this guide, you may need to change the “padding” and “margin-bottom” of the “div#slideshow” block, to position your slideshow area properly.

/* **************** jQuery slideshow on home page *********************************************************** */
 
div#slideshow {
	width: 980px; height: 300px; padding: 0 0 0 0; margin-bottom: 7px; overflow: hidden;
	position: relative; z-index: 5;
}
 
	div#slideshow img {
	border: none;
	}
 
	div#slideshow ul#nav {
		display: none;
		list-style: none;
		position: absolute; bottom: 15px; right: 0px; z-index: 15;
		width: 125px;
	}
		div#slideshow ul#nav li#prev {
			float: left; margin: 0 0 0 20px;
			display: inline;
		}
		div#slideshow ul#nav li#next {
			float: right; margin: 0 20px 0 0;
			display: inline;
		}
		div#slideshow ul#nav li a {
			display: block; width: 31px; height: 31px; text-indent: -9999px;
		}
			div#slideshow ul#nav li#prev a {
				background: url(../img/prev.png);
			}
			div#slideshow ul#nav li#next a {
				background: url(../img/next.png);
			}
 
	div#slideshow ul#slides {
		list-style: none;
	}
		div#slideshow ul#slides li {
			margin: 0 0 20px 0;
		}
a {outline: none; }
 
/* **************** jQuery slideshow on home page *********************************************************** */

STEP 4

The steps above are all you need to do to edit your files. Besides that, you also need to upload some new files:

1. Upload the jQuery script and navigation arrow images files:
   \themes\YOUR_THEME_NAME\js\slide\jquery.cycle.all.min.js
   \themes\YOUR_THEME_NAME\js\slide\simslide_scripts.js
   \themes\YOUR_THEME_NAME\img\prev.png
   \themes\YOUR_THEME_NAME\img\next.png

   You need to create the “slide” folder as shown above to store the jQuery/Javascript files.
   >>> Click to download the files here <<<

2. Upload your own banner images to this folder:
   \themes\YOUR_THEME_NAME\img\
   Remember, the image filenames and dimensions are what you need to enter to the header.tpl file, as outlined in STEP 2 above. All our premium themes come with a readme file, where you can find the recommended banner dimension/size — please follow.

OPTIONAL – Changing slide/rotate effects

The script will give you the ‘fade in’ effect for the banner images by default. But you can change to other effects. Open this file:
\themes\YOUR_THEME_NAME\js\slide\simslide_scripts.js

At line 5, you can see fx: ‘fade’ — change fade to shuffle or zoom or turnDown or curtainX.

You can see the demos at Cycle Plugin — it is the source of the jQuery Cycle Plugin, which we are using for the different types of transition effects.

Compatibility:
PrestaShop 1.2.4, 1.2.5, 1.3

Acknowledgements:
Based on the jQuery slideshow by Line25.

Please note that themes for PrestaShop 1.2 are not fully compatible with PrestaShop 1.3, and vice versa. So, for each download page, we provide 2 links, one link for PrestaShop 1.3 theme and another for PrestaShop 1.2 theme.

Note:  Pres 6 and Pres 7 premium themes are only for PrestaShop 1.3.

Click here to view all our premium themes now.

Steps 1 to 3 are the initial preparations (language files, images etc) needed before you can activate the new language through your PrestaShop back-office area.

1. Download the language pack file, xx.gzip, to your computer from Prestashop.com — where xx is the two letter ISO code for your country/language.
2. Download flag icon to your computer from Famfamfam.com — or right-click and save the icon from PrestaShop.com.
3. Create a “No-Picture” image in your own language. You can see example of this image on your PrestaShop site in the folder /img/p/ — look for such image as en.jpg or fr.jpg. Create a similar size image (250 x 250 pixels) for your own new language.
4. Go to your site’s Admin > Tools > Languages, click Add New. Enter the details and click Save.
   Note: The Flag: is the flag icon image that you downloaded in step 2. The “No-Picture” image: is the one you created in step 3.
   
5. Go to your site’s Admin > Tools > Translations > Translation exchange > Import a language pack.
   Click Browse and choose the GZIP file you have downloaded in step 1, then click Import.Now your new language should be working if you are using the default PrestaShop theme.
6. If you use your own custom theme/template, you may see a warning at Admin > Tools > Languages (yellow triangle icon) — You need to copy the language file from the default theme to your custom theme.
   

   Copy from:
   \themes\prestashop\lang\de.php

   To:
   \themes\THEME_NAME\lang\de.php

   (The above is only an example. Different languages will have different file names — xx.php)

Further customization:
You may see that some translations are not complete or your custom theme has extra words not available in the default language pack. So, you should add the words yourself:
Admin > Tools > Translations > Modify Translations > click your language flag icon, then fill in the missing words and click Update translations.

Compatiblity: Tested on PrestaShop 1.2.4 and 1.2.5 (other versions should follow similar method)

The file is located at:
\modules\blockvariouslinks\blockvariouslinks.tpl

You can edit this file directly, but I do not recommend changing any files outside of the themes folder. So, copy this file to your themes folder (there are a few files in the original folder, you just need to copy blockvariouslinks.tpl) :
\themes\YOUR_THEME\modules\blockvariouslinks\blockvariouslinks.tpl

Then open the file and remove the line containing the “Powered by PrestaShop” code (around line 10) :

<li class="last_item">{l s='Powered by' mod='blockvariouslinks'} <a href="http://www.prestashop.com">PrestaShop</a>&trade;</li>

Tested on PrestaShop version 1.2.4 and 1.2.5.

This release contains only security fixes –  and this means there are no new features or bug fixes for this version.

Nonetheless, if you are running an older version, it is recommended to upgrade to version 1.2.5 to strengthen the security of your site.

And by the way, all themes on this site are also compatible with Prestashop 1.2.5 (and other 1.2.x versions).

Maybe you want to display a logo with different background color, tagline, size etc — but PrestaShop will use only one logo, which is the logo.jpg file located in the \img\ folder, for all types of display.

To use a different logo image from your web site’s logo, create a new logo and name it as logo1.jpg (or something else) and upload to the \img\ folder (the same location as the logo.jpg file)

Then open the relevant files and change the entry “logo.jpg” to “logo1.jpg“. You can choose any or all of these files to change:

1. \modules\referralprogram\preview-email.php
2. \classes\Mail.php
3. \classes\PDF.php
4. \modules\feeder\rss.php

NOTE: These files are not in your custom theme folder. So, if you upgrade your PrestaShop site, the changes will be lost. Please note the changes you’ve made so you know where to re-apply the modifications after you have upgraded.