Story page templates: Contact page
In Story, there are additional page templates you can use for certain page styles. Here are some tips for creating a Contact page.
The contact page template has four main sections:
(1) Page navigation
(2) Contact form
(3) FAQ accordion section
(4) Helpful links area
How to use the contact template
Begin by creating a page in the Shopify Admin page editor. Add the title of the page and a description in the editor. Next, choose the page.contact template in the Template section:
Save the changes. Your page title and description will appear at the top. The additional elements will follow.
Page navigation setup
The first step is to create a custom menu in your navigation admin which will be used as a secondary sidebar navigation:
Create a new menu and add menu items which link to additional pages. Be sure to include a link to the contact page as well as this menu can be shared on other pages.
After you've created a new menu with menu items. Open the Theme Editor. In the Theme Editor, navigate to your contact page. You'll need to view the contact page in the Theme Editor in order to see the section settings for your contact form.
Important: In order to modify contact form content, you'll need to navigate to a page in the Theme Editor which is using the page.contact template. Tip: Add a menu item in your main navigation to the contact page to easily access it in the Theme Editor.
Once you have navigated to the contact page, these section options will appear on the left side:
Choose the Page navigation section:
Here you'll be able to choose the custom sidebar menu you've created:
Contact form fields
The default contact form will include email address and message form fields (these are required and cannot be removed). To add additional form fields, click on the Contact form section option:
In the Content are, choose Add content:
These are all the various form content blocks you can add to customize your theme:
Choose one, configure the form block and then you can add additional form blocks.
Example, if you choose Text line:
You can customize the label:
To produce a single line form field:
Experiment with the form blocks to customize the options.
Use the handle icons on the right of the content blocks to sort the position of each form field:
Tip: To move the default email and message fields - Add them as form blocks and then you'll be able to sort them with the rest of the content blocks.
FAQ accordion section
The frequently asked questions section uses content blocks similar to the form fields. Begin by clicking on the FAQ section option:
Update the title of the section and add FAQ content blocks:
The FAQ content blocks can be sorted by using the six-dots handle icon on the right and the content appears as accordions on the right side of the form:
Helpful links
This content will appear below the form and above the footer area. These are open card style links with information. Configure by choosing the Helpful links section option under Sections:
Add content blocks for each card to display:
Each content block will appear as an open card. If you add a link, the entire card will become the link:
You can sort the cards by using the six-dot handle icon on the right of the content blocks.
Be sure to save you settings in the Theme Editor regularly.
