How to Create The Perfect Shopify Contact Us Page (+ Examples & Templates)

January 19, 2022
by
Sean Flannigan

How to Create The Perfect Shopify Contact Us Page (+ Examples & Templates)

January 19, 2022
by
Sean Flannigan
Get the latest straight to your inbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Share on:

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.

In this post, we’ll talk about:

Let’s start with the basics.

#cta-visual-pb#<cta-title>Create a contact us page with Shogun<cta-title>Easily create a contact us page for your Shopify store with our drag and drop Page Builder.Start building free


What is a Contact Us page, and why is it important?

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.

9 Contact Us page best practices to consider

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.

1. Make it easy to find

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.‍

east fork contact page links navigation
Source: East Fork

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:

  • Contact
  • Contact Us
  • Support
  • Customer Support
  • Help

2. Keep your forms short and sweet

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.

milly coup contact us page
Image: Milly + Coup

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.

3. Include your contact information

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.

maya brenner contact details
Image: Maya Brenner

Information you may want to include in your Contact Us page:

  • Physical address. While not every ecommerce business has a physical location, this is essential information for those that do. Customers can then choose to handle their inquiry in person or get a better understanding of where their orders are shipped from.
  • Phone number. People still like talking on the phone. For certain customers, it’s a more immediate way to handle any issue they are dealing with. If your customer support includes calls, include this key info to keep those customers happy.‍
  • Email address. On the other hand, many people prefer sending an email. Even if you have a form (and it goes to the same place), include an email address for those that would rather email directly. 
  • Social media handles. Yet another form of communicating with your customers is through your socials. Many customer service platforms integrate with your social media accounts too. Plus, by including your social media handles, you give those channels more visibility.

Beyond this, you can also include business hours or display a map with your physical location.

The Modern Shop homepage
Image: The Modern Shop

4. Use a call to action (CTA)

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.

clear ctas contact us page hey harper
Image: Hey Harper

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.

5. Let your brand's personality shine through

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 all of a sudden 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.

bother contact us brand voice
Image: Bother

6. Simplify their experience by enabling autofill

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. 

7. Mobile-friendly is a must

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#<cta-title>Make your Contact Us page mobile-friendly<cta-title>Use Shogun Page Builder to create a Contact Us page that works great for all screen sizes.Start building for free

8. Reduce spam with reCAPTCHA

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.

reCaptcha example
Image: sophos.com

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.

9. Be responsive

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 period and use a ticketing system that will 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.

Tommy John contact page
Image: Tommy John

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.

How to add a Contact Us page to your Shopify store

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.

Step 1: Go to Online Store > Pages to add a new page

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.

shopify pages find page
shopify add page

To create a new page, click the Add page button in the upper right corner.

Step 2: Add content to your Contact Us page

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

shopify creating contact us page

After you’ve added the relevant details, save the page. At this point, your page is rather underwhelming. Useful but underwhelming.

shopify basic contact page

Luckily, if you are using an Online Store 2.0 theme, you’ll be able to make additional customizations.

Step 3: Customize your Contact Us page (OS 2.0 themes only)

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.

shopify themes customize

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.

shopify theme editor find page
shopify theme template find page

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.

shopify theme editor add form

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.”

shopify page action edit with shogun

But we’ll get to that in a little bit.

Step 4: Update navigation links to include Contact Us page

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.

shopify navigation menus
shopify navigation edit link
shopify navigation add new menu link

Now, you’ve got a new Contact Us page, and it’s easily accessible from anywhere on your site.

Shopify Contact Us apps that make it easy

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.

shopify app store contact us

Here are just a few apps you can use to assemble your Contact Us page outside of the Shopify dashboard.

Shogun Page Builder

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 for 10 days. If you like it, you can start building out custom pages for your whole store for a better customer experience and increased conversions.

Improved Contact Form by Awio

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.

Contact Us Form Builder by Zotabox

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.

How to create a custom Shopify Contact Us page with Page Builder

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.

Step 1: In the Shogun app, add a new page 

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.

shogun add page
shogun page templates

You’ll be taken to the drag and drop editor to start building and customizing your new Contact Us page.

Step 2: Build and customize your new 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.

shogun customize contact us page
Customizing a Contact Us page from a pre-made Shogun template

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.

shogun building contact page from scratch
Building a Contact Us page from scratch in Page Builder

Step 3: Save and publish your Contact Us page

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.

shogun page editor save and 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.

Step 4: Update navigation to link to your Contact Us page

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.

5 of the best Contact Us page examples from Shopify stores

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.

East Fork

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.  

east fork contact us page faq
Image: East Fork

They do a lot with a little here and make it look incredible.

Grady’s Cold Brew

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. 

gradys cold brew contact us page
Image: Grady’s Cold Brew

It shows that you can make your Contact Us page attractive and useful with just a few powerful elements.

Hey Harper

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.

hey harper contact us page
Image: Hey Harper

The icons set off each block in a visually engaging yet minimal way.

Kuyichi Pure Goods

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.

kuyichi contact us faq
Image Kuyichi

While unflashy, their customers are sure to find what they need from the page.

Wild Zora

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.

wild zora contact us page
Image: Wild Zora

It’s unlikely that any visitor is getting out of that Contact Us page without an answer or imminent response.

#cta-visual-pb#<cta-title>Your Contact Us page could look this good<cta-title>Try Shogun for free and start building out your perfect store to create a totally unique customer experience.Start building for free


4 Contact Us page templates from Page Builder you can use now

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.

Full-width visual Contact Us page template

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.

visual contact us page

Short and sweet Contact Us page template

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.

short contact us page

Basic three-block Contact Us page template

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.

three block contact us page

Contact Us page template for a brick and mortar store

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.

visit shop contact us page

Stay in touch with your customers to keep them happy

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#<cta-title>Want to start customizing your Contact Us page?<cta-title>You are minutes away from a better Contact Us page for your Shopify store with the best drag and drop page builder out there.Start building for free

Sean Flannigan

Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.