For all the convenience and joy of online shopping, ecommerce purchases don’t always go the way you want. There can be issues.
This dress has a snag, my socks never arrived, this watch broke after just one week, this is definitely not what I’d call seafoam green, and so on.
Ecommerce retailers know this.
That’s why they invest in building great FAQ pages, use product pages to show and describe their products in great detail, and offer various ways to contact customer service in case of issues.
That last part goes a long way to keeping customers happy. Your Contact Us page is where your customers can find quick resolutions to their unique issues.
It’s also how they build stronger bonds with a brand. So, you need to make that page as helpful as possible.
Let’s start with the basics.
#cta-visual-pb#
A Contact Us page is the place on your store with the best ways to get in touch with you—forms, email addresses, phone numbers, social media handles, live chat options, physical location.
It’s your way of guiding them toward where the answers are and where they can find you (if applicable).
Your Contact Us page is critical for building trust with your customers and those you hope to convert into customers.
Why would they consider buying from you if they can’t get in touch with you?
You want them to be confident that when they make a purchase, someone will be there to answer their questions if things come up. You could have the best FAQ page out there, but customers will always have questions you hadn’t considered.
Whether you build a simple page with these details or something more extravagant, it must have certain elements.
Let’s dig into what those are with some best practices for your Contact Us page.
As you build your Contact Us page, there are a few things you need to keep in mind. Just like the top Shopify stores, you want to make sure people can get in touch with you.
Following these best practices will ensure that your customers get exactly what they are looking for when they visit.
Why have a Contact Us page if it’s impossible to find?
The best way to ensure your shoppers can find the page is to link to it from somewhere they can’t miss it—your main navigation menu and your store footer.
By adding a link to your footer, visitors will be able to navigate to your Contact Us page from anywhere on your website.
Wherever you add your links, name them in a way that ensures that shoppers know what it is. Commonly, you’ll find them named like so:
People can be impatient when they have burning questions. We’re all guilty of it. So, don’t beat around the bush with your Contact Us page.
If you include a form, make it simple to fill out.
You can manage this by reducing the number of fields that need to be filled. So, it could be as simple as name, email, and message. This isn’t the place to be capturing detailed leads.
They may be agitated if they are contacting you, so there is no need to make the process overwhelming.
So, if you have optional fields in your form, get rid of them. If you already didn’t think they were necessary, why keep them?
Also, lessen their cognitive load by ordering fields from easiest to hardest to fill out. By the time they get to the most demanding field, they’re invested in the process and will be more likely to finish.
Finally, if certain fields can be converted to drop-down menus or radio buttons, do it. Less typing is always nice.
It seems obvious, but contact info goes beyond providing a form to fill. You want to include other ways to get in touch with you.
This will depend on how your business handles support inquiries and whether you have a physical location.
Some brands have different email addresses depending on the purpose of the contact. Others keep it simple with just an email address and a phone number.
Information you may want to include in your Contact Us page:
Beyond this, you can also include business hours or display a map with your physical location.
Your CTA tells visitors what the next step is in a super clear way. For your Contact Us page, the CTAs will center around the ways people can get in touch with you.
You may just have one CTA, or you could have multiple. Whatever the case, the visitor should have no problem knowing exactly what to do.
To make your CTA stand out, you should emphasize it. For buttons, use a contrasting color. For text, make it bold. The language should be active in both cases, starting with a verb, such as GO, GET, or SEND.
Avoid using generic language, like SUBMIT or CLICK HERE.
The above example leaves no question what visitors should do once they find the section that applies to them, with the bolded and capitalized CTAs centered at the end of each block.
Your brand voice should be evident on all store pages. The Contact Us page is no exception.
Don’t make it bland and generic, or your customers will expect a similarly generic support experience. This is a crucial place where your brand’s personality can shine through, easing people toward their solutions confidently.
A brand known for their witticisms doesn’t suddenly become boorish upon writing their Contact Us page. They lean into it while giving them the answers they need.
No need to break character.
Beyond the copy, you also want to stay consistent with your brand design aesthetic. Make your incredible store experience extend throughout all the pages on your site.
The online experience is rife with forms. Most of them repeatedly ask for the same info—first name, last name, email, etc.
Browsers understand this struggle, offering to save that redundant information and autofill it wherever it finds a compatible form. With the click of a button, people can fill their forms, forgoing the repetitive typing (or tapping) of their details.
Beyond the helpful simplicity of this feature, it also ensures that the data entered will be accurate, which makes your job that much easier.
While some forms may have this already enabled, you want to ensure that your form allows visitors to quickly autofill their info and get on with their day.
Once upon a time, the mobile experience was secondary.
Brands that offered a good mobile experience were few and far between, leaving many to zoom and poke in the hopes that they could find the right store page. If they were fortunate, they’d be able to actually purchase something.
These days, the mobile experience is ecommerce. Not only does Google now count your mobile site as your official site, but the sales attributable to mobile are massive and only growing.
In 2017, the mobile share of ecommerce sales was 58.9%. The expectation was that 2021 would see that rise to 72.9%!
So, building your Contact Us page (and your entire store) for the mobile shopping experience is an absolute must.
For your Contact Us page, you need to make it easy for them to fill out that form or click your contact CTA for easy calling or emailing via the tapping of their fingers.
This is another reason to enable that autofill functionality, simplify your form fields, and make your CTAs obvious. Building a custom experience for mobile—with plenty of negative space, bigger buttons, larger fonts, etc.—can do a lot to make your visitors’ experience extraordinary.
#cta-visual-pb#
You’ve definitely had to prove to some website that you are, in fact, not a robot.
There’s a good reason for this! It helps keep spam messages from overloading someone’s inbox.
But, the traditional form of this, CAPTCHA, not only blocked robots from filling forms but also actual people. With hard-to-read numbers and images, it could be difficult for anyone to get right, especially those with accessibility issues.
Luckily, with reCAPTCHA, Google has reduced friction for users while still effectively blocking non-humans from submitting forms.
Through behavioral analysis, this verification step can determine whether or not the user is a human, leaving out the muddled text images (and the anger that usually followed).
This helps keep your contact form user-friendly and safe at the same time.
Lastly, your Contact Us page is useless if you don’t respond to the incoming queries. You can make it as pretty as you like, but responsiveness is the most important thing.
Respond to customer inquiries as quickly as possible. Set goals to answer within a certain time and use a ticketing system that’ll allow you to organize everything more efficiently.
You can also add information to your Contact Us page, which will let them know your operating hours and how long until they can expect a response.
Another option is to send automated responses to form submissions that confirm that their message was received and let them know when they can expect to hear back.
Adding a Contact Us page is fairly straightforward using your Shopify dashboard. Here is a step-by-step guide for building a quick and easy Contact Us page in Shopify.
From your Shopify dashboard, go to Online Store > Pages in the lefthand menu to access your store pages.
From there, you can either find your existing default Contact page by searching “contact” or create a new page to replace it.
To create a new page, click the Add page button in the upper right corner.
In Shopify’s simple page editor, you can give your new page a title and start adding the body content.
As you type, the Search engine listing preview section will start populating with your title tag and meta description as it will appear in Google search results.
You can change this by clicking “Edit website SEO.”
In the box labeled Online store, you can choose which theme template you want the page saved as. This will affect how it is displayed and how you can customize it in the theme editor (more on that later).
After you’ve added the relevant details, save the page. At this point, your page is rather underwhelming. Useful but underwhelming.
Luckily, if you are using an Online Store 2.0 theme, you’ll be able to make additional customizations.
Since I’m using the Dawn theme here—Shopify’s newest Online Store 2.0 enabled default theme—I can use the theme editor to customize any page template in my store, not just the homepage.
To start, go to Online Store > Themes and click Customize on your current OS 2.0 theme.
In the theme editor, use the dropdown menu to find Pages and then locate the theme template you saved your page as in the last step. I saved mine as a Default page.
When the template comes up, it’ll show the most recent page that used that template. If you need to find another page, just click “Change” next to PREVIEW in the lefthand menu.
Once you are on the right page, you can start customizing the page by adding, moving, and editing sections and blocks.
If you didn’t choose the Contact theme template, you will need to add a form section, as I did here. I also inserted a rich text section before it to include a heading and subtext lead-in.
Aside from that, you can add an image banner, a featured collection, a multimedia collage, and more to make your page look more lively.
I cover this in more detail in our post on theme customization, which digs deeper into the intricacies of Shopify’s theme editor.
If you hit a wall with Shopify’s code-free customization options here, you can also go back to the regular page editor for this page, click More actions and “Edit With Shogun.”
But we’ll get to that in a little bit.
If you created a new Contact Us page, you’ll need to update the link in your navigation menu and footer.
Go to Online Store > Navigation and click into the Main menu and Footer menu to update or add your Contact Us page link.
Now, you’ve got a new Contact Us page, and it’s easily accessible from anywhere on your site.
#cta-paragraph-pb#Don’t forget about updating your footer! Remove ‘Powered by Shopify’ in a few simple steps and replace it with something more on-brand.
There are, of course, apps for that. The Shopify App Store is a veritable treasure chest of exciting add-ons for your store, helping to simplify the management of your daily grind.
A simple search for “contact us” yields nearly 800 results.
Here are just a few apps you can use to assemble your Contact Us page outside of the Shopify dashboard.
While we’re talking about apps, we may as well mention our own.
For a truly dynamic and custom Contact Us page, Shogun Page Builder is more than equipped. Just drag and drop page elements into place and customize each to the minutest detail.
Add contact forms, complete with reCAPTCHA verification, to get all the messages you want and none that you don’t. Then insert images, videos, product sliders, social proof, and more for a vibrant store experience.
You can try it for free. If you like it, you can start building out custom pages for your whole store for a better customer experience and increased conversions.
With the Improved Contact Form app, you can get set up with a simple Contact Us page quickly, with built-in spam protection and a responsive design for mobile.
When installed, you’ll get a straightforward Contact Us page with not only a form but also a widget that will pop up a contact form anywhere on your site.
It integrates with Mailchimp and Constant Contact and is free for up to three contact forms.
If you need additional contact forms and advanced features, you can opt for a paid plan that starts at $12/month.
The Contact Us Form Builder app allows for a more alluring contact form with access to background images, attachments, custom fields, and an autoresponder.
The contact form is mobile-friendly and integrates with some of the biggest email marketing services, including Mailchimp, AWeber, Hubspot, and Constant Contact.
This app does not create a Contact Us page but rather a form accessible through a widget on all store pages. You can embed their form on your Contact Us page, though.
It comes with a free 30-day trial. Once the trial is up, you’ll need to choose one of the paid plans that start at $12.99/month.
If you choose to use an app that allows you to customize any page on your Shopify store, you will be in good hands with Shogun Page Builder. It’s simple to create your Contact Us page.
I’ll take you through building your Contact Us page in Page Builder step-by-step.
From your Shogun dashboard, click Add page. You can start from a template or from scratch. We’ll show off some of the templates later in this post.
Note: As I hinted to earlier, one other option is to click “Edit With Shogun” from your Shopify page editor. While this will work, you’ll be replacing all elements to enable a full-screen experience for this page.
You’ll be taken to the drag-and-drop editor to start building and customizing your new Contact Us page.
Whether you use a pre-made template or start building a page from scratch, it’s super easy to drag and drop elements into place and customize them to your liking.
Change fonts, colors, icons, images, spacing, form functionality, and more. You can even give your images a parallax effect to add that extra something to your store experience.
I made a Contact Us page from a template and made another from scratch to see how easy it could be. The process was pretty simple both ways and really depends on your vision for the page.
By building from scratch, you can set down the structure you have in your mind. That said, a template makes things pretty quick to edit and publish.
Once you are happy with your page, click Save in the upper right corner. That button will change to read Publish. If you are ready to go, click Publish.
Your page will be live at the URL path in the upper left corner. You’ll be able to find this in your Shopify dashboard as well.
As we covered earlier, you’ll want to update your links in your footer and navigation menu by going to Online Store > Navigation and updating or adding the right link in both menus.
Voila! You’ve built a Contact Us page that’s worthy of your brand and vision.
Often, it can help to see what other brands are doing with their pages to get inspiration for your own designs.
Here are some of the best examples I found.
This page from ceramics brand East Fork combines a Contact Us page with a FAQ page.
By inserting expandable accordion sections within an accordion section, they can keep the page super minimal (and stunning) without sacrificing important information.
The contact details are simple, splitting it cleanly by intent—customer support, press inquiry, wholesale, and partnerships.
They do a lot with a little here and make it look incredible.
This page from Grady’s Cold Brew keeps it short and sweet but does it with a visual flair.
Their carefully staged photo is bright, fun, and useful. They integrate their product and their phone number, priming customers with their particular brand personality.
They then show all options for getting in touch with them in a sharp and uncluttered way, making the CTAs clear with a splash of color.
It shows that you can make your Contact Us page attractive and useful with just a few powerful elements.
Another brand taking advantage of powerful photography in their header is Hey Harper.
The page draws immediate attention with the active image and then gives visitors clear avenues for resolving their issues.
The gray blocks isolate each CTA in a way that helps the eye find what they need faster. They first offer up their FAQs, possibly reducing the influx of messages. Then, they give multiple options for contacting based on user intent.
The icons set off each block in a visually engaging yet minimal way.
Like East Fork, Kuyichi decided to add their contact details to their FAQ page.
This strategy is brilliant because visitors may find their answer before finding it necessary to send a message. But, if they don’t, the contact form is right there.
The contact section itself is incredibly simple—email addresses, contact form, physical address, and a note about when they can expect an answer.
While unflashy, their customers are sure to find what they need from the page.
This Contact Us page from snack brand Wild Zora is built like a landing page, with a colorful design and an easy-to-read Z-pattern layout.
But, they don’t lead with contact information. Instead, they start with five of their most common questions, heading off any unnecessary emails right away.
If those answers didn’t help, you immediately find their email address with an unmissable CTA.
It doesn’t end there, though. Next up, nutritional info followed by all their other contact information.
It’s unlikely that any visitor is getting out of that Contact Us page without an answer or imminent response.
#cta-visual-pb#
Building a Contact Us page is pretty simple, but sometimes you want someone else to start the foundational work for you.
That’s where templates come in.
Shogun Page Builder has tons of templates that you can use to build all types of store pages. Here are four of the Contact Us page templates we offer.
This template uses every bit of screen with a full-width image and map. Floating atop the photo are all the contact details, as well as the contact form.
Just edit the content to match your brand and customize as needed.
This two-column page packs a lot of information into a small space. You’ve got your contact form, phone and email details, a map, and a way to start a live chat.
No scrolling required.
Yet another simple template, with this one leading with the contact form. Add all contact details in the bottom right and set your map to show where you are located.
Remember, everything is customizable, so you can edit the colors, fonts, spacing, and functionality of sections, then add other key elements to make it yours.
This last one is built with a brick-and-mortar shop in mind, but the template can really be customized to fit any brand.
With a full-width image banner for the header, it has the potential to be a more splashy Contact Us page.
If you make it easy to contact your brand, your customers will keep coming back. A great customer service experience does a ton to cement a great customer relationship.
The difference between a lousy support experience and a good one in your own life will tell you as much as you need to know about how shoppers view brands that do it poorly.
Be the brand that does it well.
#cta-visual-pb#
