Categories

Featured templates

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

Daniel Morales August 6, 2015
Rating: 5.0. From 1 vote.
Please wait...

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):

    How_to_add_phone_number_contact_info_text_in_header

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

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

    How_to_add_phone_number_contact_info_text_in_header_1

  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:

    How_to_add_phone_number_contact_info_text_in_header_2

  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:

    How_to_add_phone_number_contact_info_text_in_header_3

  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:

    How_to_add_phone_number_contact_info_text_in_header_4

  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

Prestashop Themes Download
This entry was posted in PrestaShop Tutorials and tagged contact, header, phone, Prestashop, text. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket