Contact Us Documentation
Introduction
This Package includes a collection of three different Contact Us Page templates. It includes intuitive customization options to configure the layout. The Package contains entire page templates that can be browsed from the Navigation / Menu Bar above. The page templates make use of a Column Content Section, the Zen Banner Section, and the CTA Banner Section to create an attractive layout. All templates utlize the site's header and footer, and defined color variables. This should result in a seamless integration with any Bootstrap enabled site. Have a look at the demo. The details are shown below.
Contact Us Template # 1
Template Heading
Page: contact_us_page_1.liquid
The page template makes use of the corresponding partial template and outputs a complete page. The page includes the default Header / Footer (_header.liquid and _footer.liquid) and utilizes bootstrap classes, which mean that all set variables are automatically set (allowing seamless integration). The Page Template also uses the Zen Banner, and CTA Banner to make up the entire page. If you require the page to be in a consistent format with other pages in your site, you might need to use the partial template in order to better integrate the template.
In order to use the template, you must select it as the page template in Article Settings. Goto Content -> Articles -> New (Top menu bar) -> Check "Has URL" -> Select Template -> Click on "Contact Us Template # 1". Then you can make any neccessary settings / customizations.
Partial: _contact_us_1.liquid
The partial template outputs the actual form and contact information section of type # 1. It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.
Show Full
{%- include "/marketpath/contact-us-templates/partials/_contact_us_1.liquid" -%}Contact Us Template # 2
Template Heading
Page: contact_us_page_2.liquid
The page template makes use of the corresponding partial template and outputs a complete page. The page includes the default Header / Footer (_header.liquid and _footer.liquid) and utilizes bootstrap classes, which mean that all set variables are automatically set (allowing seamless integration). The Page Template also uses the Zen Banner, and CTA Banner to make up the entire page. If you require the page to be in a consistent format with other pages in your site, you might need to use the partial template in order to better integrate the template.
In order to use the template, you must select it as the page template in Article Settings. Goto Content -> Articles -> New (Top menu bar) -> Check "Has URL" -> Select Template -> Click on "Contact Us Template # 2". Then you can make any neccessary settings / customizations.
Partial: _contact_us_2.liquid
The partial template outputs the actual form and contact information section of type # 1. It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.
Show Full
{%- include "/marketpath/contact-us-templates/partials/_contact_us_2.liquid" -%}Contact Us Template # 3
Template Heading
Page: contact_us_page_3.liquid
The page template makes use of the corresponding partial template and outputs a complete page. The page includes the default Header / Footer (_header.liquid and _footer.liquid) and utilizes bootstrap classes, which mean that all set variables are automatically set (allowing seamless integration). The Page Template also uses the Zen Banner, and CTA Banner to make up the entire page. If you require the page to be in a consistent format with other pages in your site, you might need to use the partial template in order to better integrate the template.
In order to use the template, you must select it as the page template in Article Settings. Goto Content -> Articles -> New (Top menu bar) -> Check "Has URL" -> Select Template -> Click on "Contact Us Template # 3". Then you can make any neccessary settings / customizations.
Partial: _contact_us_3.liquid
The partial template outputs the actual form and contact information section of type # 1. It can be included with a single line and has various fields that can be set by the editor to customize the look of the section.
Show Full
{%- include "/marketpath/contact-us-templates/partials/_contact_us_2.liquid" -%}Some Extra Partials
Template Heading
_map_section.liquid
This partial outputs a map section (embedded Google Maps) using the Google Maps API. It takes as input (user entered field) the location to show the marker at. Some other variables are also available to further customize the look:
api_key - A Google Maps API Key enabled for use with Embed API. If you do not set one, a default key will be used instead.
min_height - A CSS value that is set as the minimum height when displaying maps. Mainly useful when displaying as full width. Defaults to 300px.
section_class - A CSS Class Name that is set on the main section element. Mainly useful for setting bottom margin. Defaults to "mb-5".
full_width - When set to true, displays full-width map section without any container or padding. Defaults to true.
styles - A string that is set as the style attribute of the mains section tag.
Show Full
{%- include "/marketpath/contact-us-templates/partials/_map_section.liquid" -%}_contact_info_section.liquid
This partial outputs displays the address, telephone, and email information with responsive bootstrap cards. It takes as input (user entered field) the Address, Email, and Phone Number of your business. It has one other variable to further customize the look:
section_class - A CSS Class Name that is set on the main section element. Mainly useful for setting bottom margin. Defaults to "mb-5".
Show Full
{%- include "/marketpath/contact-us-templates/partials/_contact_info_section.liquid" -%}