How To Change The Mobile Information Bar Hours Announcement We Are Currently Closed Squarespace

Customising the Mobile Data Bar

This is an old commodity, written over five years agone in 2016. The information contained in this article may not exist upward-to-appointment. For guaranteed help we recommend you lot hire a Squarespace Skillful to aid you lot.

We know that the best user interfaces deliver the most advisable content at the right time. This is especially true for visitors using mobiles.

Squarespace has an fantabulous Mobile Information Bar feature that when enabled, provides visitors with a popular-upward shortcut bar forth the bottom of their mobile screen. Information technology helps them chop-chop get to four central areas of your website - your location, e-mail address, phone number and business concern hours.

This Information Bar only appears on mobile, and it only appears when the user views the top of the page. If they didn't desire to come across the information on the bar, it automatically falls away as they whorl down the folio, leaving the view of your mobile site unobstructed.

Tin can I book a restaurant?

Whilst developing a restaurant site, I wanted to provide a quick link for mobile visitors to volume a tabular array, in addition to the usual options to discover the restaurant, check their opening hours or telephone call them.

The Mobile Information Bar provides iii of these, but there are no options to customise it. I couldn't just replace the email icon with an option to book a table.

I decided to discover a way of customising the bar with some javascript and some CSS. In the spirit of paying frontwards, I idea I'd share this technique with y'all. Equally you'll see, it wasn't likewise difficult and it could be used for other links like a Twitter push or a Facebook link. If you recollect of another employ for information technology, post a annotate below.

Step 1: Enable the Information Bar

On the Settings menu, select Mobile Information Bar.

Enable the Mobile Info Bar. It doesn't matter whether you select Dark (white icons on a black background) or Light (black icons on a grey background), that'southward up to you. I've selected Night.

At the top of the page you'll see a link that says:

The information displayed in the Mobile Info Bar must be added/edited via Settings > Business Information

Below this yous'll come across each of your business details - if you lot've entered them. If any are blank, click the link and become and enter them.

As nosotros are going to hijack the Email button, you will need to enter an email address. If you don't want to provide this, you can add together something generic similar I accept here:

Render to the Mobile Information Bar settings and tick each of the options. Nosotros're going to select Show Electronic mail just we're going to convert this so it can be used to book a table.

Salvage the changes.

Step 2: Add an Icon

The 4 icons used on the Mobile Information Bar are pre-configured. You'll need a new icon for your new pick. I've chosen the dark theme and so for my Volume a Table option, so I've created a small PNG image showing a plate and cutlery. In that location are many icon sites offering complimentary icons where you are probable to find something suitable for your needs.

To load your icon image to the website, go to Design > Custom CSS. At the bottom (you may take to scroll down) click Manage Custom Files and then click Add images or fonts.

Add your image. In one case loaded it will appear (in a list with other images or fonts y'all may have added to your site already).

Click the filename to discover the URL of the image file. When you click the filename, the image URL appears at the current cursor location in the Custom CSS window above. For example, this is how mine appears:

Y'all'll need this URL in a second for the CSS. Don't worry about the error, we'll remove this line in a moment.

Pace 3: Add the CSS

Some CSS is needed to change the image in the information bar.

Whilst yous still accept the Custom CSS area open insert the CSS below, starting at line 1.

                      .sqs-mobile-info-bar-trigger[data-type="contactEmail"]                    .sqs-mobile-info-bar-trigger-icon                    {                    groundwork-paradigm:                    url()!of import; }

Take the URL of your image and insert it into the ordinary brackets in a higher place. Don't forget to relieve your CSS!

Your CSS will then looks something like this:

                      .sqs-mobile-info-bar-trigger[data-type="contactEmail"]                    .sqs-mobile-info-bar-trigger-icon                    {                    groundwork-image:                    url(//static1.squarespace.com/static/573f135159827e68d0f8b018/t/57408d3607eaa04caaa22bea/1463848246956/plate-fork-icon.png)!of import; }

Don't worry if you don't take an icon withal, yous tin can use my URL above for testing.

Take a look at your site on a mobile device. You should see the Mobile Data Bar and the first icon should at present be your new paradigm, non an electronic mail symbol. It volition still say EMAIL though and so we'll add some javascript to alter that.

Step 4: Add together the javascript

The javascript will change the text under the new image.

You'll add the javascript to the Page Header Code injection. You'll detect this by navigating through the menus like this:

Settings > Avant-garde > Code Injection

This javascript relies on jQuery so if at that place'due south non already a line that gives the source of jQuery y'all'll need to add together this:

                    <                    script                    src="https://code.jquery.com/jquery-three.4.1.min.js"                    integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"                    crossorigin="anonymous"                    >                    </                    script                    >

Next, add together the javascript as follows:

                    <                    script                    >                    $(window).bind("load",                    role() {                    $('.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-label').text('Book');                    $("a[href='mailto:xxx@test.com']").attr('href',                    '/volume') });                    </                    script                    >

Before y'all save this, in that location are three elements you'll need to consider editing.

Beginning, alter the email accost to match the e-mail accost that you entered in pace ane. This is of import or the code will not work. My example to a higher place shows the fictitious address of 30@examination.com that I entered in pace 1.

Secondly, determine what you would similar the championship of the push to be. I choose "Book" to volume a table. You can change it to something else, but go on information technology very curt.

Lastly, you'll want to set the page that the visitor will be sent to when they click on this button. The URL of my tabular array booking page is "/volume".

Save your code.

Stride 5: Admire your work

Your lawmaking should now work and the email selection should be replaced with a customised selection of your choice.

If you have any comments or suggestions, please add them below.

Update

Many of you take asked how to customise the other buttons on the Mobile Information Bar.

The example that I used was replacing the Email push button, because this uses a link to an anchor tag. The Phone call button is the same, so if you want to employ this, you merely demand to substitute the information-blazon and the default link in the code above. The data-types for the buttons are:

contactEmail
contactPhoneNumber
location
businessHours

The Telephone call button uses href="tel:+0000000000" instead of href="mailto:xxx@test.com", where the telephone number is every bit you've entered it on your site.

The other buttons aren't and then straightforward because the MAP button launches a link to Google Maps in a new window/tab, and the HOURS push button simply displays a div on the same page, showing your opening hours.