Contact page

Template

Use the Contact page template to let customers message you through the contact form.

  • Customize the content and layout your contact page

  • Add custom fields and buttons to the custom form

  • Use the FAQ section to answer common questions about your products

Shopify | Sending and receiving messages through the contact form is a Shopify feature. You can test Shopify's free theme Dawn to see if an issue is platform-related. For assistance, you can contact Shopify support ↗.

Create contact page

You first need to create a page and assign the contact template in your Shopify admin.

Shopify | Pages are a Shopify feature: see Shopify's guide for creating pages ↗.

STEPS

In your Shopify admin:

  1. Click Online store > Pages.

  2. Click Add page.

  3. Add a Title (e.g. "Contact us").

    The title will be used for the page URL (e.g. www.store.com/contact-us).

    You don't need to add anything to the Content field. You will add the page content by editing the template in the theme editor.

  4. (Optional). Under Visibility, you can click Hidden if you don't want to publish the page to your live site yet.

  5. Click the Theme template menu and select contact to assign the template to your page.

    Note: Templates can't be assigned on unpublished themes. Your changes to templates will be saved and can be assigned when you buy and publish the theme.

  6. Click Save.

Customize contact page layout

In the theme editor, you can customize the contact page template using theme sections.

By default, the Contact template includes the contact form and a FAQ section for common questions. You can add other theme sections to further customize your page.

STEPS

In your theme editor (Customize):

Click and hold the drag and drop handles ⋮⋮ to change the order of sections.

  1. Use the Templates selector to open Pages > contact.

  2. Click Change in the "PREVIEW" section to select the page you want to use for your contact page.

    A warning symbol (!) next to the page name means that the template is not assigned. Click the page name to go to your Shopify admin, and assign a template.

  3. Under Template, click (+) Add section to further customize your page with theme sections.

  4. Click Save.

    Remember to assign the template and set your page to Visible in your admin.

  5. (Recommended.) Link to your contact page in your Header and Footer menus.

  6. Click Save.

Add contact form fields and options

Use the Contact form blocks to add custom text fields, buttons, and options for customers to fill out, and choose to make them required before submitting a message.

STEPS: Add contact form blocks

In your theme editor (Customize):

  1. Click on a Block to open the settings.

    Click (+) Add block to add a new block.

    See the list below for an overview of all available blocks.

  2. (Optional.) Click and hold the drag handles ⋮⋮ to rearrange the blocks:

    Click Remove block or the eye icon to delete or hide a block.

  3. Click Save.

Contact form blocks

Contact form content

Customize the section Headings and choose to display a Phone number field as well as reCAPTCHA terms if you have spam protection enabled.

STEPS

In your theme editor (Customize):

  1. Click on the Contact form section to open the settings.

  2. Change the Heading text as a title for your section.

    Delete the text in this field to remove the heading.

  3. Enter Subheading text to display more information below the Heading.

  4. Select the Alignment for the Heading and Subheading. Either Heading and text left, Heading and text center, or Heading center, text left.

  5. Set the Heading size to Small, Medium, or Large.

  6. Uncheck the Show reCAPTCHA terms if your store has spam protection enabled.

  7. Click Save.

Contact form style

Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.

STEPS

In your theme editor (Customize):

  1. Click on the Collapsible row list section to open the settings.

  2. Choose to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the color of Lines and borders set in the Theme settings.

  4. Select a Padding option to change the spacing between sections. Choose between Top and bottom, Top only, Bottom only, or set it to None.

  5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

  6. Click Save.

Settings reference

Click the Contact form section to find the following settings.

Section style


Related links

Templates

Last updated