Contact page
Template
Last updated
Template
Last updated
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 ↗.
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 ↗.
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.
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.
Block | Description |
---|---|
Show a field for customers to enter their email. This field is Required by default. | |
Phone | Show a field for customers to enter their phone number. Choose to make this a Required field. |
Text line | Show a text field for customers to add a single word or line. Choose to make this field Required. Enter a label for the field (e.g. "Name"). |
Text area | Show a text field for customers to add multiple lines. Choose to make this a Required field. Enter a label for the field (e.g. "Message"). |
Checkbox option | Show a checkbox that customers can click to select options or agree to terms. Choose to make this a Required checkbox. |
Radio buttons | Show a list of buttons to let customers select a single option out of a maximum of six. Enter a label for the radio buttons (e.g. "Select an option"). |
Select dropdown | Show a menu dropdown to let customers select a single option out of a maximum of six. |
Heading | Enter text to display as a title above any blocks. |
Spacer | Add a margin of space between other blocks.test |
Customize the section Headings and choose to display a Phone number field as well as reCAPTCHA terms if you have spam protection enabled.
Adjust the overall section style by changing the Padding around the section content, and add an optional Top divider to clearly separate sections.
Click the Contact form section to find the following settings.
Setting | Description |
---|---|
Alignment | Set the position of the section Heading and Text. |
Heading | Enter text to display a section title in the top-left corner. |
Heading size | Display heading text as Small, Medium, or Large. |
Subheading | Enter text to display a section subheading below the heading. Use the formatting buttons to add text styles, links, or lists. |
Show reCAPTCHA terms | Choose to show a reCAPTCHA to verify users if you have spam protection enabled. |
Setting | Description |
---|---|
Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more. |
Top divider | Show a solid border above the section to visually separate it from other sections. The Top divider uses the Lines and borders color selected in the theme color settings. |
Padding | Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None. |
Content width | Display the section at Full width or use the slider to set a custom width between |
Related links