eComm Performance Guide: Custom Contact Page

eComm Performance Guide: Custom Contact Page

Supported Versions: The details shared in this article apply to the updated version of eComm Performance.


Using the Custom Contact Page Template

With the release of eComm Performance v6.2.0, not only is there a default contact page template but the theme also now includes a custom contact page template. This page template includes more advanced contact forms, which you can adjust to meet your shop's needs. 

In the 'Contact Form' section of the contact page, there are multiple features that you can include. You can enable a 'heading', 'subheading', and 'text.' You can also add an image, social media icons and can adjust the 'text position' and 'text alignment.'

The contact form itself is created by adding content blocks! There are multiple field options available, including text field/area, radio buttons, checkbox, email, drop-down, and paragraph.

On top of those features mentioned, you can also add a banner image at the top of your custom contact page, as well as a map section at the bottom. This is just like the default contact page template. 

Before you can use the custom contact page template, the theme will need to be published! The templates that you can select are limited to the templates available in your theme that is currently published.

Once you have your theme published, you are able to create a new page in your Shopify Admin (Online Store > Pages), and select page.contact-custom, under Template > Template Suffix:



After this is completed, you can go into the Theme Editor (Customize) > Select your custom contact page from the drop-down page selector. Your theme editor on the left will update with the page settings and content blocks you choose.

Custom Contact Page Settings

The template for the custom contact page includes settings for the banner image, as well as the custom contact form, and map section.


Including a contact page banner image is optional in the page template.

Image

To have a banner image featured, you will just need to upload an image. The recommended image size is 1800 x 1800px.


Darken Banner Image

You have the option to enable the 'darken banner image' setting to add an overlay on top of your banner image. This will come in handy if you have a 'busy' banner image because it will improve legibility. 

 

Heading/Subheading

You have the option to include a 'heading' and 'subheading' on top of the banner image. You can enter whatever you would like visitors to see in these fields. 


Contact Form Settings

There are options in the contact form settings, where you can add a content section and add content blocks.

Image

You have the ability to upload an image for your contact form section. The recommended image size is 1024 x 1024px. The image you choose will be shown above your subheading and text.

 

Subheading/Text

The contact form section also gives you the option to add a 'subheading' and 'text'. This is a beneficial tool where you can add important information that you want your customers to read before they contact you.

Text position

You have the ability to choose the position of your 'subheading', 'text', and 'image' (if applicable). You can choose to position them from the left, center, or right:


Text Alignment

In this area, you can select the alignment of your 'subheading' and 'text' (if applicable!) You have the option to choose from the left, center, or right:

Show Social Media Icons

You can also have your social media icons displayed in the contact form section. If you have URLs add under Theme Settings > Social Media, and then you enable the 'show social media icons' setting. The icons will then display under the text. 

If you want your logo to appear in the contact form, you can upload an image under the 'logo' field. 500 x 500px is the recommended image size.

Adding Fields to the Contact Form

Various contact fields get added as content blocks by going into the Theme Editor (Customize) under Sections > Contact Form > scroll down to add content. The optional fields available to add to the contact form are text field, text area, radio buttons, checkbox, email, drop-down, and paragraph.


Checkbox 

  1. The 'checkbox' field option allows your customers to check all options that apply.
  2. This field includes the 'Title' and 'Option' field where you can add in the options for the customers (from 1 to 10).
  3. You can enable this field if you wish, however, it is not required.

Email

  1. The 'email' field allows customers to enter their email address.
  2. The 'email' field option must be included and is always a required field.
  3. This option includes a 'Label' and a 'Placeholder' field.
  1. This field allows your customers to choose one of the options from a drop-down menu. 
  2. This field includes a 'Title' field, 'Placeholder' text, and 'Option field, where you can add in as many options (from 1 to 10) as you'd like.
  3. This field is not required and you can enable it if you want.

Content

The 'content' field is optional and is a great way to display any information you'd like to include in your contact form, such as reply times, holiday notices, or any other useful information you'd like your customers to know! 

Radio Buttons 

  1. This field allows your customer to choose only one of the set of options. 
  2. This field option includes a 'Title' and 'Options' field, where you can add in your options (from 1 to 10). 
  3. This field is not required and you can enable it if you want.

Text Area 

  1. This field option can be used for your customers to add a message or provide any additional information they want to include. 
  2. The field options include a 'Title' and 'Placeholder' field. 
  3. You can choose whether this field is required for the customers or not.

Text Field 

  1. This field allows customers to input certain text, such as their name. 
  2. This field includes a 'Label' and 'Placeholder' field, which will pop up when you select the text input field. 
  3. You can choose whether or not this field is required for the customers or not.


    • Related Articles

    • Footer Guide eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using the Footer Section The eComm Performance theme has a customizable 'Footer' section that lets you add up to 5 vertical columns. You can ...

    • Using the Page Section on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance. Using the Page Section The eComm Performance theme includes a 'Page' homepage section that has multiple uses. This section allows you to create ...

    • Collection Page Sidebar on the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the most updated version of eComm Performance.    Using the Collection Page Sidebar eComm Performance's Collection pages has the ability to display a 'sidebar' on the collection page. ...

    • Header Settings in the eComm Performance Theme

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Setting up the Header The eComm Performance theme has a customizable 'Header' section. The Header has some built-in settings, including ...

    • Map Section on the eComm Performance Guide

      Supported Versions: The details shared in this article apply to the updated version of eComm Performance.  Using the Map Section The eComm Performance theme includes a 'Map' homepage section. This is a great way to give your site a local feeling, and ...