Customizing PC Bootstrap Theme Display

The way the the phone number is displayed is actually set by ProductCart to remove spaces and put the area code in parentheses. If you want to change this default behavior it would require a change to the ProductCart code, but it is a very small change. First you will want to backup the file /store/includes/coreMethods/storefront.asp in case you need to revert your changes. Download the storefront.asp file and open it a text editor like Notepad (not a word processor like Microsoft Word) and look for the line that reads:

That line is what builds the phone number for the top of the mobile page (and elsewhere in ProductCart). Change that line to read:

This small change adds a space after the closing parentheses. When you upload the edited file the changes should show up after you refresh the page.

As for making the phone number a clickable link that can be a little more complicated. Each phone platform (Android, iPhone, Windows Phone) does things a little different and each browser you can install on these platforms is a little different. There may not be a solution that works on all phone that may visit you site. I've created one that works on most platforms and browsers that you try. This incorporates both the extra space after the parentheses and makes it a clickable link:

phoneNum = "<a href='tel:" & phoneNum & "'>(" & Mid(phoneNum, 1, 3) & ") " & Mid(phoneNum, 4, 3) & "-" & Mid(phoneNum, 7, 4) & "</a>"

You can try that and see if it works for you. If you have a backup you can always revert the change if it's not quite what you were looking for.

For the Phone number being above the logo, the theme you are using has padding in setup to move the  logo lower on the page. You can add a CSS rule to your theme to remove it. The best place to add a CSS rule is in your theme.css file. This file will be store/pc/theme/YOUR THEME NAME/css/theme.css . You can follow the same procedure of backing up the file then downloading the file and opening it in a text editor. At the bottom of that file you can add the flowing to remove the extra padding:

.brand{padding:0px;}

When you upload your edited file and refresh you should see the changes.

If we can provide any more information about making these  please let us know. We are happy to help.

- ProductCart Team