How to Create a Contact Page with a “Contact Form” in Shopify

A contact page is a great way to give your customers multiple avenues to reach out to you. It also helps you keep track of important customer details and communications. But how do you create a contact page with a “contact form” in Shopify?

To create a contact page with a contact form in Shopify, go to the “Online store” section on the dashboard and open “Pages”. Next, click the “Add Page” button and assign it a name called “Contact”. Make sure the template “contact” is selected. Finally, mark the page as Visible and click “Save”.

This post will show you how to easily create a contact page with a contact form in Shopify. I’ll also describe how to add the contact page to your navigation menu so your customers can easily find it. Let’s get started!

Learn how to edit pages in Shopify.

1. Log into your Shopify dashboard

It’s a no-brainer, but you must first log in to your Shopify dashboard before making changes to your store’s pages or navigation menu.

Once you’re logged in, you’ll be taken to your dashboard. From here, you can access all of the different areas of your shop’s back end.

2. Go to “Online store” > Pages > create a new page

Now that you are logged into your shop’s back end, it is time to create the actual contact page. Here are the steps to follow:

1. Go to the “Online store” section of the dashboard. You’ll find it in the left-hand menu.
2. Once you’ve opened the Online Store section, click on “Pages“.

That will take you to the area where you can manage all the pages on your website.

3. Create a page & call it “Contact”

Now that you’re in the Pages section, it’s time to create a new page.

1. Click on the “Add page” button located at the top right-hand corner of the page.

2. A new page will appear, prompting you to enter a title for your new page and other information. I  recommend something simple like “Contact” or “Contact Us”.
3. In the “Online store” box at the bottom right of the page, you will see a template drop-down. Select “contact“.

4. Set the page’s visibility to “Visible” so customers can access it on your website.
5. Next, click on the “Save” button to create the page.

Note: The new page will automatically have a contact form. You can edit the page to display text above or below the form.

4. Add the Contact page to the Navigation menu 

The final step is to add the new contact page you just created to your shop’s navigation menu so that customers can easily find it while browsing your website. Here’s how to do that in a few steps:

1. Go back to “Online store“
2. Click on “Navigation”. On this page, you will see all the different menus used on your website listed in alphabetical order.
3. Find the menu where you want to add the new contact page and click on it to expand it.

4. Then, click on “Add menu item” and type in or select (from the list) the name and URL for your new contact page.
5. Save the changes to your navigation menu, and now it will be live on your website for customers to access.

Here’s a short YouTube video tutorial that walks through the steps of creating a contact page with a contact form in Shopify:

Note: Some Shopify themes come with a pre-made contact page template. If your theme has this template, you can use it instead of creating a new contact page.

How to edit the contact form styling

To edit the “Contact form” styling, you will need to do this using code in your Shopify theme settings.

1. Go to “Online store” > “Themes“
2. Click the button with three dots > “Edit code“

3. Search for “contact”. You will see two contact form liquid files:
   • “contact-form.liquid”
   • “section-contact-form.css”

These are the two you will need to edit the contact form styling.

Conclusion

Adding a contact form to your Shopify store’s contact page turns an otherwise mundane task of exchanging customer information into an opportunity to build trust and improve customer relationships.

Just be sure to follow the steps outlined in this post to create the contact page and add it to your website’s navigation menu. Remember, you can customize the contact form to collect specific information from your customers, making it even more useful for managing customer communications and inquiries.