PrestaShop 1.6.x. How to add phone number/contact info text in header

This tutorial will show you how to add a phone number or contact info text in header area in Prestashop.

PrestaShop 1.6.x. How to add phone number/contact info text in header

1. Navigate to File manager in your hosting cPanel (you can also use FTP client instead):

   

2. Open "themes/themeXXX" directory, where XXX is your actual theme number.

3. Locate header.tpl file and click "Edit" button:

   

4. Find the code for logo, it is usually called “header_logo” in the file, but please note that it may differ.

5. Add this code right after logo code and click “Save” button:

   			<div class="your_phone">
   				1-800-100-200
   			</div>
   		

   You can change phone number to text if you want, or you can add both text and number:

   

6. The phone number is successfully added, but it is missing styles which you should add to global.css file from “themes/themeXXX/css” folder.

Let’s add some styles for a phone number.

1. Open “themes/themeXXX/css” folder.

2. Locate global.css file and click "Edit" button:

   

3. Add this CSS rule with any needed styles to the end of the file and click "Save" button:

   .your_phone {
   		}

   You should add your css properties (color, position, font-size, etc.) to make the desired layout for your phone number. Please refer to these tutorials for more details on working with css:

   

4. Refresh the page, the phone number is added to header area with styles.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to add phone number/contact info text in header