Squarespace add phone number to header. Watch this video to learn how to make these changes.

Squarespace add phone number to header. You can add your business contact information, location, and hours in Business Information settings. Mar 25, 2023 · If you need help with billing, login, or technical issues, you’ll need to contact Squarespace Customer Support directly using their support pages. uk/ I wanted to add our contact number on the header next to the categories. Display also depends on your site's version: On version 7. This will allow us to track the source from which our customers are calling our phone number. Jul 18, 2023 · Squarespace headers and footers are an important part of your site, and they’re easy to edit, format, and style in 7. This guide reviews the steps for adding and styling banner images in version 7. Click to edit Social Links #3. John@Dough. e. And, for some businesses, that’s all you need. Jan 25, 2024 · @tuanphan it's so strange, all the Edit Site Header elements have disappeared for me - e. May 28, 2024 · Hi, I would like to add this phone number: 1800 077 833 next to the header button like in the image attached. You can display built-in social icons on your site after adding social links. 1, the steps above will help you create a button that fits your site’s design and brand. Aug 10, 2023 · Hi, I'm trying to add a phone number to the heading of a website I'm redesigning for a client. Jan 11, 2025 · Adding icons can elevate the user experience, making your site more engaging and interactive. By using Page Header Code Injection Apr 19, 2023 · Hi all, I'm trying to add a Phone symbol in the header nav as a social icon on this site. I've created a "Join the Waitlist" form on my home page and a bunch of call to action buttons. To learn more, visit Adding a banner image. Changing text format in the text toolbar overrides the styles set for that text area in site styles. Learn how to edit the header in Squarespace, make it transparent, or customize it to fit your brand. Instead of th Aug 29, 2019 · EDIT: I can't insert a tel: either. Use this code to Custom CSS box. If users want to change the text in the header, they can do so by going to the Pages tab and editing the page that they want to change. This guide reviews how to build your site header and display more features, such as a shopping cart icon, social icons, or a call-to-action button. Thank you! Feb 3, 2025 · To create headers in body text, use the Format dropdown menu in the text block Editor. com. Use this guide to learn more about how site titles and logos work on all sites, and the style tweaks to use if Oct 28, 2024 · Your website header is one of the first things visitors see, so it’s essential to make sure it looks great and works seamlessly with your brand. squarespace. With Squarespace’s customization options, you can create a unique and… Headers and footers Building a site header Adding a site title Site title and logo display Editing footers Built-in social icons Aug 1, 2025 · Adding a button to a header puts your call to action at the top of the page. 1 templates don’t have a “Footer Navigation” section. 0 or 7. Most buttons follow primary style settings, but you can vary the styles of button blocks throughout your site with secondary and tertiary settings. Add a title for the page (for example, Contact us) and press Enter. It looks like the navigation in the header section only links to pages, but my website isn't built using pages, it's one page, built with a few sections. Plus tips on fonts, layouts, and more. I wish to add a telephone number and email address to appear in white text. After adding your code, click Save. On version 7. Sep 9, 2024 · Hi, just wondering if it's possible to add icons to the navigation bar? Instead of typing out "Locations," I just want to include a globe icon. My question: Is there an option I can do in Squarespace to force the phone number in the site header to have a tel: so click-to-call is enabled? Some thoughts I've had: I was thinking of using code injection, but am not sure the best way to do it. This guide will walk you through the options available for adding and customizing icons in Squarespace, ensuring your site reflects your unique style. com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) Spark Plugin Jun 6, 2024 · Within your edit dashboard select Edit Site Header. Are you or your client wanting to display some basic information about business hours, email, phone number or address at the very top of a Squarespace site?I Jan 11, 2024 · One of the best Squarespace updates from last year is the new features available when editing site headers, in particular the ability to add a drop shadow to a header. Apr 29, 2025 · Your tax registration ID displays on your receipts, and your business name and address display in the header and footer of automatic emails sent from your store. Nov 16, 2024 · Hi, I've added my Bluesky profile to the "Social Links" block but it doesn't pickup the Bluesky icon. Currently it is just text. I am designing a website right now, and a client asked me to make a header just like in the screenshot. Until the search tool has been fixed, I do not recommend that you try to add a search option as visitors are likely to rely on the results and, if no results are found, will leave your site. Instead, upload PDFs through the Link Editor 🔗, accessed when linking text, buttons, images, or navigation elements. Nov 29, 2023 · Hi, Creating a new business website & have it on a business plan. Can you help us make an phone icon button. Note that there's an additional subscription for this (US$35/month for up to 100 orders). Jan 31, 2025 · Add valid HTML or scripts into the appropriate Code Injection fields for the header, footer, lock page, order confirmation page, or order status page. I'd like to make it a clickable phone number. Use this code to Custom If you are looking for a video about How to Add a Business Address or Phone Number to Squarespace Header, here it is! Here is the code: https://pastecode. You can however create text-based links and add them to your footer. How you add pages depends on which version of Squarespace your site is on, and whether you're editing on a computer or in the Squarespace app. Feb 25, 2024 · Hi, I'm creating a landing page for my business and one of the key aims is to get people to join the waitlist. g. Banner buttons A banner button stands out on your background or banner image. Feb 22, 2023 · const headerRight = document. Users can also add custom code to the header to add more functionality to their site. Perfect for creating stylish CTAs that match your brand – no coding experience required! Jan 24, 2025 · To add a page to your site's navigation menu, you'll add the page to the main navigation in the pages panel. When the header is transparent, it matches the theme of the following section. Create this page in the ‘not linked’ section of your website pages so that it doesn’t appear in the main navigation menu. ) I can't for the life of me work out how to add links to the header menu/navigation. In the Pages menu, select Page Layouts. First, use this code to Custom CSS a. header-actions-action--social'); const headerLogo = document. Theres already "Make Referral button" that's why I can't use it for contact us direct. co. How to add a phone number + phone icon to the header Aug 3, 2025 · Enable visitors to find content on your site. Feb 9, 2023 · Elevate your Squarespace site with a fixed header! Learn the steps to create a visually stunning and user-friendly navigation. To add more general information that displays in other places on your site, like on a mobile information bar, visit Business information settings. Oct 18, 2024 · Page Header Code Injection in Squarespace is a powerful tool that allows website owners to add custom code to the header section of their website’s pages. Log into your Squarespace account. com/newsletter Want to add a CTA button to your Squarespace header? Check out the l Apr 28, 2025 · Display, style, and remove social icons on your site. #1. When the header is hidden, it follows your site's default theme. #2. Click Edit in the top-left corner to open the page editor. If you want your visitors to take a specific action upon arriving at your site, add a hard-to-miss banner button. If your plan doesn’t support Injection, you can comment below/or message me, I will give another approach to add code. This code also hyperlinks the phone number so when you click on the number on a tablet or mobile phone, it calls the number. Dec 11, 2024 · On most sites, your site title or logo appears at the top of your site. I have two issues. However, I can tell you that, if the www CNAME record cannot be saved, it may be because you already have a CNAME record with this hostname. I am trying to change the title of the drop down box in the navigation/header to clickable. To learn more, visit Formatting text. The announcement bar's color generally matches the header color theme. Did this help May 8, 2024 · Incorporating social icons into your Squarespace site is an effective means to engage with your audience and highlight your presence across various platforms. You can use this CSS code to Website Tools > Custom CSS a. - The header is dark blue, but the mobile menu is white, so Apr 1, 2025 · Learn how to add custom background images to your Squarespace header with our step-by-step CSS tutorial from InsideTheSquare Sep 14, 2021 · Site URL: https://bdze. Has anyone achieved something similar? Thanks, Oct 18, 2024 · In Squarespace, headers are located at the top of every page and can be edited using the Design tab. Click Contact and select a layout option. com From Google account settings Enable 2-Step Verification, in yo Jan 13, 2020 · Without paying for a service that does this, how can we add our Google reviews API to our Squarespace website? Without adding a screenshot of the reviews or using the Squarespace quotes. Use this format: tel:0123456789 (replace with real number) We will have a generic link icon like this #2. Use this code into Code Injection & May 28, 2024 · Here’s how to add the button to the header First, you need to create the page that you want this button to link to. Sep 11, 2024 · Hi! I need help in making the phone # clickable in our header using a custom CSS code. Don't include 0 at the beginning of the number, as this may cause the link to The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that Apr 15, 2025 · Hi Everyone, I wanted to add a phone icon on our website with tel number on it. I can turn on the one button for the right hand side, but is there anyway of a Jul 1, 2025 · Add pages to the dropdown Dropdowns aren't pages and it's not possible to add content directly to them. com/ password: 1234 Thanks! May 23, 2025 · It’s positioned at the top of your site. &nbsp; In this guide, we’ll walk you through how to change the header layout in Squarespace to give your site a professional, customized look. With Squarespace, you can modify your site's header to reflect the design that you have in mind. Here are the steps to do that: (if you want to only add Jun 26, 2025 · Aside from header buttons, button blocks, and form block submit buttons, you can't change a button's type. Jun 11, 2025 · To add contact info to top of header, like this. How do I move my subtitle "TELEVISION PRODUCER" underneath my site title and change the font? Mar 21, 2024 · Hi! Looking for a way to add a second button directly to the left of the 'EMAIL US' button, which will appear on every page across the site. 1 templates. Aug 6, 2021 · The phone number worked before I customized the icon using Custom CSS in the Design tab (I changed it from a link icon to a phone icon). klynik. Aug 22, 2024 · You can add the image to your site-wide header, or use an override to create a page-specific banner. addEventListener ('DOMContentLoaded', function () Apr 28, 2025 · Display, style, and remove social icons on your site. But, I can't seem to do it. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo. Next, use this code to Code Injection > Footer. The header is the same on all pages of your site. May 29, 2025 · Options for adding site-wide information about your business, like hours and location. We are trying to resolve a communication issue with an external service, and as per their requirements, we have added the following SRV record: Service: _sipfederationtls Protocol: _tcp Priority: 100 Feb 8, 2025 · Configure Gmail to send Aliased emails from a Squarespace owned domain In this example: A domain name purchased from Squarespace is Dough. These layouts will change where elements in your header are displayed such as your page navigation, contact button and social icons. For example, the table of contents in this guide contains anchor links that take you to each heading. Add search fields to your site to help visitors find content. Enter your phone number in the field, including country code and area code, if applicable. header-phone { font-size: 16px; display: block; color: #000; margin-top: 10px; } #2. Can anyone give me an answer? Thanks! Jul 17, 2025 · When a visitor taps the link from a smartphone, it prompts them to call or text the number. Does anybody know the code for this or how we can generate it? Thank you! Jan 25, 2025 · Forum users don't work for Squarespace and don't have access to Squarespace backend systems, so cannot resolve technical issues. We have 3 social media icons on the left hand side of the header navigation bar and would like to add 3 call to action icons on the right hand side. Jun 17, 2025 · Explore three modern header styles for Squarespace: adaptive (dynamic), gradient, and solid. However I'm confused by what I see on the DNS interface under "Email Forwarding" - it references a third party website I've ne Jan 29, 2024 · Square POS can't integrate directly with Squarespace Commerce. The version I'm using has a appointment button and social link but I can't add a mobile number which is important. header-title>div { display: flex; align-items: center; justify-content: center; } #2. Select Edit Design and click on your layout. Sep 24, 2024 · To add additional text under Header button, like this. 1, the site title and logo display is set by your site's header layout. Just like this ? Feb 2, 2022 · Site URL: https://wellbeingcampus. Here Mar 8, 2023 · Is there a way to completely remove the "store" aspect. So clients can see that first in case they want to call. header-title-logo a'); Jul 18, 2025 · Click Save. What CSS do I need to add to achieve this? The website is: https://piano-lizard-y585. However, if you want to add fields to collect more information from your website visitors, or make it look a little prettier to fit better with your business brand, you’ll need to take a few additional steps. I added a phone number in my header using this code in the Custom CSS section: /* PHONE NUMBER IN HEADER */ See Photo #1. For an overview of the pages panel and its sections, visit The pages panel. com Password: BWS Phone number would be: 0800 297 222 Many thanks Dec 13, 2022 · Creating a custom header in Squarespace is a great way to add a personal touch to your website. Here is a section from my CSS: @media only screen and (max-width: 640px) { div. While eve Aug 3, 2023 · Hi, Can anyone help me? I need to add contacts such as phone number and email in the header and I don't know if it is possible to do so. a. Feb 6, 2024 · Hi, I'm trying to add a phone number on the header just before the Donate button, and ideally with a little phone icon if possible. Follow this easy guide to update your website’s header. In most cases, icons appear in your site’s header automatically o Oct 5, 2023 · I have attached an example of a WordPress "header" I am attempting to migrate from and what I have on the new site on being reconstructed on Squarespace. Website: https://asparagus-arugula-2dfm. The opt up window only shows Content, allowing me to change the logo file (or view Pages when in Edit Navigation) Will ping Squarespace Circle support team with an email Nov 29, 2024 · To add Phone/Email to right of Header like this. First, you can enable Announcement Bar. header-actions-action. Feb 20, 2023 · The built-in search tool is unreliable on Squarespace 7. It’s Apr 7, 2025 · Easily add multiple header buttons on Squarespace for free! Follow this simple tutorial to enhance navigation and drive more action on desktop and mobile. 1). So hoping to remove the add to cart and the checkout option. 0, the site title and logo display is set by your site's template. Thanks! May 10, 2024 · Hi there I would like to add a phone icon (image/png/svg) next to the hamburger menu, with a link to a phone number. Squarespace is the all-in-one solution for anyone looking to create a beautiful website. Get started on your Squ 📩 Join my newsletter for exclusive codes and updates: https://bycrawford. If your site Jan 3, 2023 · Hi all, I'm starting a new website and one of the elements the client is asking for is a small section above the navigation bar for an image and some text (please see the attached). Aug 5, 2019 · A clickable phone number is super easy to add to your website and will make it just that little bit easier for potential clients to contact you. I'm fairly new to Squarespace, so I'd appreciate any help, advice, or clarification. You can use HTML to style your text and add images or logos to your header. You can see a list of which platforms are supported here. I just want to include office locations. Their team will respond to you via email when an appropriately qualified person is available. 1 (see Search is broken in 7. Will squarespace add native support for this or is there another Dec 9, 2024 · Hello, I am seeking assistance with configuring SRV records for my domain hosted on Squarespace. 0. querySelector('. The following video Sep 24, 2024 · To add additional text under Header button, like this. Oct 28, 2024 · Your website header is one of the first things visitors see, so it’s essential to make sure it looks great and works seamlessly with your brand. SquareSpace support says this is not possible with their system other than through custom CSS. The following video shows you how to add a Nov 24, 2023 · Hi All, I need help adding my mobile number into my site header section. This has never worked for my site, so have I have had to chang Jun 21, 2023 · I would like to add two lines of text to the top right of the site header to appear on every page of the website. 1. Aug 19, 2025 · A banner image displays near the top of the page, adding a visual element that sets the tone for your site. I'd like to have the contact details up well above of the other page navigation links Oct 18, 2024 · The Squarespace header is customizable, and users can change the design, layout, and content of the header to suit their needs. I want to be able to have them interactive so on mobile you can easily call the phone number. btn:after { content: "Click here to get started"; font-size: 12px; color: #fff; display: block; } If you want to change this text on one page, first you need to find Page ID Next, u Mar 28, 2021 · 1. Use this code to Code Injection > Footer <script> document. I'm using the Montauk Template on 7. Here you have five different layout options that you can choose from. Use this code to Code Injection > Foote Feb 24, 2022 · A clickable phone number is super easy to add to your website and will make it just that little bit easier for potential clients to contact you. After creating headers, you can change the heading styles. Apr 7, 2023 · I need to add a sticky header to my site with a phone number & email address. Thanks! Dec 2, 2024 · Adding a button to your Squarespace header is a simple yet effective way to enhance navigation and encourage visitors to take action. Oct 16, 2024 · To add a phone number on right of Logo, you can do these #1. . When I add the phone number, it creates a FaceTime call instead of a phone call. Nov 4, 2024 · While Squarespace doesn’t have a built-in PDF embed feature, here’s a quick guide to embedding PDFs in different approaches: How to upload PDF on Squarespace Squarespace doesn’t have a dedicated PDF file manager. 2. Seems simple to do, but I haven't been able to land a solution yet. This guide covers methods for adding search, which content can appear in search results, Aug 25, 2025 · The Contacts panel displays all customers, mailing list subscribers, members, donors, and form submitters in one place, so you can get a holistic view of your engagement and manage relationships with your audience. Any way to do this? The number doesn't have to link anywhere Thanks Aug 30, 2019 · Tutorial on how to add a phone number above your navigation on Squarespace on Brine and Bedford templates. au Hello, I've searched through past posts and the codes are not working for my site. com/newsletter Want to add a CTA button to your Squarespace header? Check out the l Jun 2, 2025 · To add a clickable phone number under logo, like this. Start your transformation today! Jul 31, 2025 · An anchor link (or “page jump”) is a special URL that takes you to a specific place on a page. header-phone { font-size: 20px; color: #000; margin-left: 10px; } div. After setting up a built-in anchor link in a page section, you can link visitors to the top of that section regardless of where it is on the page. Learn how to easily add a contact form to your Squarespace website with our step-by-step guide. Apr 19, 2024 · I found a code to add the subtitle in my heading but it is landing in the middle of my site name. Sep 22, 2015 · Go to SETTINGS > ADVANCED > CODE INJECTION > copy/paste the code below in the HEADER area. Get started on your Squarespace website at Jan 7, 2025 · Hey everybody. Oct 11, 2021 · Hi, I'm trying to add my company email and phone number to the site header so that it appears on every page. You can use some simple CSS (snippet below) to remove the underlines from the links to make the footer navigation look more like the header navigation. To change the color: While editing a page, open site styles, then click > next to Colors. Instead, when you add pages to a dropdown, they appear as menu items that "drop down" from your navigation when a visitor hovers over it. Edit Site Header #2. To create a custom header, you’ll need to use the “Custom CSS” feature in Squarespace. Click Add Social Link #4. May 28, 2024 · Hi, I would like to add this phone number: 1800 077 833 next to the header button like in the image attached. In this video, I'll show you how to add your address and phone number to the Squarespace Header. header-display-mobile . Watch this video to learn how to make these changes. Can anybody help me with it? Jan 12, 2024 · Adding a footer navigation in Squarespace 7. We are a veterinary hospital trying to add a button to access medical records and another to access the online pharmacy. Oct 17, 2023 · Please like and upvote if my comments were helpful to you. In most cases, icons appear in your site’s header automatically o Nov 16, 2024 · Will squarespace add native support for this or is there another way? I use the Social Links in my contact page and on the footer (2nd icon) https://hudcostreets. Use this format to add Phone tel:0123456789 and this format to add Email mailto:abc@xyz. Thank you! Sep 23, 2024 · If a password is needed it's thinkaway. Jan 11, 2025 · Hi, I was wondering if someone could help me add 2 additional custom buttons to our website's header? I believe it would require code to be written, which is beyond me. A couple of things to consider: - It would be really cool to only display this icon at mobile (given not many calls will come from desktop/tablet). Transparent header - how to change the button color in just the navigation bar. when I edit Site Title & Logo, I no longer see the Add Elements option (Button, Social Links, Cart etc) you shared above. 1 Squarespace 7. How do I make the link wo You can add a contact page to your Squarespace site with content like your contact information, a form, a map, and hours of operation. But having the checkout store option is confusing for customers. How do I link the buttons to the form (like the button on the header or other parts of the May 28, 2024 · Hi, I would like to add this phone number: 1800 077 833 next to the header button like in the image attached. However, there are [imperfect] workarounds, including a Squarespace extension called SKU IQ that can synchronise inventory between Squarespace and Square POS (also Clover or Lightspeed). Whether you’re using Squarespace 7. btn:after { content: "Click here to get started"; font-size: 12px; color: #fff; display: block; } If you want to change this text on one page, first you need to find Page ID Next, u Sep 5, 2024 · Hi! Just wondering if there is a way to add a small section above the header on just the home page. You can change this later. io/ Jan 17, 2021 · Learn how to add a WhatsApp icon to your Squarespace site's header and footer social links easily. Note: I blurred out this request's business phone number and name. Add a header image You can add a header image or color behind your header text in Style mode. This feature is particularly useful for those who want to add custom scripts, tracking codes, or other types of code to their website without affecting the overall design and layout of their site. To show your site title and subtitle at the same time, add a header image instead. For example, users can add a search bar, social media icons, or a call-to-action button to the header. com We will have #5. How do I make the link wo 📩 Join my newsletter for exclusive codes and updates: https://bycrawford. From there, users can change the header image, height, logo, and other settings. I've managed to get it as shown in the screenshot but I'm not happy with this for a couple of reasons. Squarespace identifies multiple platforms and seamlessly integrates their logos into your header. Oct 18, 2024 · To add phone, email icon to Header Social Icons, you can follow these. Understanding Squarespace Navigation Menus Jan 28, 2025 · Add H5 and H6 headings to your Squarespace site using markdown or code blocks, plus learn how to customize their appearance with CSS for perfect typography hierarchy. This is a custom feature that is asked for quite a Apr 22, 2025 · The mobile information bar can include these buttons: Email - Opens an email to your email address Call - Prompts a call to your phone number Map - Opens a map with a pin on your location Hours - Opens your business hours and shows if your business is currently open or closed The bar doesn't display when viewing sites on computer browsers or tablets, or on cover pages in version 7. com/ Hello: I want to add a phone icon next to our telephone number in the menu. header-title a:after { content: "Call Today 856-582-5910"; To add social media links to your Squarespace header, click edit on the top left hand side of your website preview from any active page in your pages menu that has the header enabled. Feb 11, 2022 · I'm looking to replace the phone number displayed in the Header Subtitle section with another phone # on one specific page. Oct 29, 2024 · Learn how to customize your Squarespace navigation button with CSS. This will typically be your contact page where visitors can book a call with you. To learn more about header buttons, visit Building a site header. To link to a phone number: After adding the link, select Phone in the drop-down menu. First, you need to enter Phone to Social Icons (You can do this on Header Icons or add it via Social Links Block). So it should look the same, but instead of 'EMAIL US' it should have the phone number, as you can see in the mockup i've made on the homepage. This encourages visitors to click it right away. I tried some HTML code from fontawesome but it unfortunately did not work. You can add it underneath your Site Title, Logo or Call to Action Button. Thanks to an intuitive UI, the Squarespace editor allows you to make easy adjustments to get your site looking exactly how you want it to. Feb 3, 2024 · The basic contact form you can add to your website on Squarespace certainly serves its purpose as a contact form. If you are having difficulty reaching someone, this post May 6, 2024 · I have been transferred over today to Squarespace from Google Domains, and I am now trying to confirm everything is set up correctly and won't cause errors in the future. Thanks! Dec 27, 2021 · Need to add a few things to the site header. May 30, 2025 · I have a text phone number in my CSS that positions it below the logo. A clickable phone number is super easy to add to your website and will make it just that little bit easier for potential clients to contact you. org/contact Thanks. The following video shows you how to add a clickable phone number to your own Squarespace Website. For this reason, you won't find a search bar or search icon in any of the Squarespace 7. Mar 15, 2025 · To add Phone Number to Social Icons, like this. Learn how to add custom background images to your Squarespace header with our step-by-step CSS tutorial from InsideTheSquare Mar 23, 2021 · Site URL: https://www. I want to add the address to the other side, so placed this code in the Custom CSS section:: /* ADDRESS IN HEADER */ When I added this code, the phone number on the right disappeared. This is useful when you want to highlight May 8, 2024 · Incorporating social icons into your Squarespace site is an effective means to engage with your audience and highlight your presence across various platforms. In the top right corner of the page, there will be an Edit button. This step-by-step tutorial shows you how to change button colors, add hover effects, and style both desktop and mobile versions. com An email forwarding name was created on this domain using the alias John i. I searched the web and found some code (please see below) and inserted it into my Custom CSS (I'm using 7. This is what Sep 27, 2023 · Your website’s header is often the first thing visitors notice. Aug 1, 2025 · Open the Pages panel and click the + icon. How you add and style banner images depends on your template. To add an existing page to the dropdown, drag and drop it into the space below the dropdown. I would still like to display items, because I offer rentals. zmyzy joh dfmlmxl yeidh pkit fxlcmni ipv kplgof xzqcc tiobm