Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Using the Custom Contact Page Template
In addition to the default contact page template, with the release of Turbo 4.2, the theme now includes a custom contact page template. The custom contact page template includes a more advanced contact form which you can tailor to meet your shop's needs!
Within the 'Contact Form' section of the contact page, you can enable a 'heading', 'subheading', and 'text' along with adding an image, social media icons, and configuring the 'text position' and 'text alignment.'
The actual contact form is created by adding content blocks! The available field options are: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.
Additionally, the custom contact page template includes the option to add a banner image at the top, and a map section at the bottom (just like the default contact page template).
In order to use the custom contact page template, the theme will need to be published! The templates from which you can select are limited to the templates available in your currently published theme.
If you are unable to currently publish your theme and would still like to set up the ‘page.custom-contact’ template, we have instructions on how to access unpublished templates here.
Once the theme is published, you can create a new page in your Shopify Admin (Online Store > Pages), and select page.contact-custom under Template > Template Suffix:
You can then head over to the Theme Editor (Customize) > Select your custom contact page from the drop-down page selector. Your theme editor on the left will then update with the page settings and content blocks.
Custom Contact Page Settings
The custom contact page template includes settings for the banner image, custom contact form and map section.
-
Banner image settings
The contact page banner image is completely optional in the contact page template!
Image
To enable the banner image, you'll just need to upload an image. A 1800 x 800px image size is recommended.
Darken banner image
You can enable the 'darken banner image' setting to add a subtle overlay on top of you banner image. This comes in handy if you have have a 'busy' banner image as it will improve legibility!
Heading/Subheading
If you'd like to include a 'heading' and 'subheading' on top of the banner image, you can enter content in the these fields.
-
Contact form settings
Within the contact form settings, you can add a content section, configure the contact form by adding content blocks.
Image
You can choose to upload an image for your contact form section! 1024 x 1024px is the recommended image size. The image will display above your subheading and text.
Subheading/Text
Within the contact form section, you can choose to add a 'subheading' and 'text'. This is a great way to add some important info that you want your customers to read before they contact you.
Text position
Here you can choose the position of your 'subheading,' 'text' and 'image' (if you've added them!) Choose from left, center, or right:
Text alignment
Here you can choose the alignment of your 'subheading' and 'text' (if you've added them!) Choose from left, center, or right:
Show social media icons
If you'd like your social media icons to display in the contact form section, if you have URLs added under Theme Settings > Social Media, and enable the 'show social media icons' setting, they will display under the text.
Logo
If you'd like a logo to appear within the contact form, you can upload an image under the 'logo' field. It will then display at the top of your contact form. The recommended image size is 500px by 500px.
Adding Fields to the Contact Form
The contact form fields get added as content blocks through the Theme Editor (Customize) under Sections > Contact Form > scroll down to Add content. The fields available to add to the contact form are: text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.
Checkbox
- The 'checkbox' field option allows your customers to check all options that may apply.
- The 'checkbox' includes a 'Title' field and 'Option' fields where you can add in your options (choose from 1 - 10).
- You can enable this field to be required as well if you wish!
Email
- The 'email' field allows customers to input their email address.
- The 'email' field option must be included and will always be a required field.
- This field option includes a 'Label' field and a 'Placeholder' field
Drop-down
- The 'drop-down' field option allows you customers to choose an option from a drop-down menu!
- This field includes a 'Title' field, 'Placeholder' text and 'Option' fields where you can add in your options (choose from 1 - 10).
- You can enable this field to be required as well if you wish!
Paragraph
- The 'paragraph' field option is a great way to display any text you'd like to add to your contact form such as reply times, holiday notices, or any other information you'd like your customers to be aware of!
Radio buttons
-
The 'radio buttons' field allows your customers to choose only one of a predefined set of options.
-
The 'radio buttons' field option includes a 'Title' field and 'Option' fields where you can add in your options (choose from 1 - 10).
-
You can enable this field to be required as well if you wish!
Text area
- The 'text area' field option can be used for your customers to add a message or provide more information.
- The 'text area' field option includes a 'Title' field and a 'Placeholder' field.
- You can enable this field to be required as well if you wish!
Text field
- The 'text' field allows your customers to input text such as their name.
- The 'text' field includes a 'Label' field and a 'Placeholder' field which will pop up when you click into the text input field.
- You can enable this field to be required as well if you wish!
-
Map section settings