Contact Page

Overview

The Contact Page section in Label One theme provides a customizable contact form and information layout. The template supports flexible content arrangement with options for text alignment, spacing, and responsive design for both desktop and mobile views.

Key Features

• Flexible layout options (side-by-side or stacked)
• Customizable contact form
• Rich text content area for additional information
• Responsive design with mobile-specific settings
• Adjustable spacing and alignment
• Compatible with theme color schemes

Settings Guide

Title Settings

Setting	Description	Options
Title display	Controls the size of the page title	Do not display, S to 5XL (responsive options available)
Title alignment	Sets the horizontal alignment of the title	Left, Center, Right
Title alignment (mobile)	Sets the title alignment specifically for mobile devices	Left, Center, Right

Breadcrumb Settings

Setting	Description	Options
Display and sizing	Controls the visibility and size of breadcrumbs	Do not display, XS, S, Base
Alignment	Sets the horizontal alignment of breadcrumbs	Left, Center, Right

Layout Settings

Setting	Description	Options
Layout	Determines how content and form blocks are arranged	Left/right, Above/below

Content Settings

Setting	Description	Options
Content display	Controls the size of the page content text	Do not display, Small, Base, Large, Extra Large
Content alignment	Sets the alignment of the page content	Left, Center, Right
Content alignment (mobile)	Sets the content alignment for mobile devices	Left, Center, Right
Font weight	Controls the boldness of the content text	Normal, Bold
Letter spacing	Adjusts the spacing between letters	-2px to 10px
Line height	Controls the vertical spacing between lines	1 to 3
Top padding	Adds space above the content	0-100px
Bottom padding	Adds space below the content	0-100px

Section Settings

Setting	Description	Options
Horizontal spacing size	Controls the horizontal margins	None, Small, Medium, Large
Top section padding	Adds space above the entire section	0-100px
Bottom section padding	Adds space below the entire section	0-100px
Use alternative colors	Toggles alternative color scheme for navigation	On/Off
Color scheme	Sets the color scheme for the section	Theme color schemes
Indent section	Adds indentation to the left and right edges	On/Off

Blocks

The Contact Page template uses two types of blocks that you can add and arrange:

Content Block

Displays formatted text content alongside your contact form.

Setting	Description	Options
Content	Rich text area for adding formatted content	Rich text editor
Text alignment	Sets the alignment of the content text	Left, Center, Right
Text alignment (mobile)	Sets the content alignment for mobile	Left, Center, Right
Text size	Controls the size of the text	XXS to 7XL (responsive options available)
Line height	Controls the vertical spacing between lines	1 to 3
Width (desktop)	Sets the width of the content block on desktop	One third, One half, Two thirds, Full width
Vertical alignment	Controls vertical positioning relative to other blocks	Top, Middle, Bottom
Inner spacing top	Adds space above the content within the block	0-100px
Inner spacing bottom	Adds space below the content within the block	0-100px

Form Block

Displays the contact form with customizable styling.

Setting	Description	Options
Content text size	Controls the size of form labels	XXS to 6XL
Input text size	Controls the size of text in form fields	XXS to 6XL
Width (desktop)	Sets the width of the form on desktop	One third, One half, Two thirds, Full width
Vertical alignment	Controls vertical positioning relative to other blocks	Top, Middle, Bottom
Form alignment	Sets the alignment of the form	Left, Center, Right
Inner spacing top	Adds space above the form	0-100px
Inner spacing bottom	Adds space below the form	0-100px

Setup Instructions

Basic Setup

1. Navigate to your Shopify admin → Online Store → Themes
2. Click Customize on your current theme
3. Select the Contact page template
4. The Contact Page section should be present by default

Customizing Your Contact Page

Configure Page Layout:

• Choose between side-by-side (Left/right) or stacked (Above/below) layout
• Set appropriate widths for content and form blocks
• Adjust vertical alignment for balanced appearance

Add Content Block:

1. Click "Add block" and select "Content block"
2. Add your contact information, business hours, or other details using the rich text editor
3. Set appropriate text size and alignment

Configure Form Block:

1. Click "Add block" and select "Form block"
2. Adjust label and input text sizes
3. Set appropriate width and alignment

Mobile Optimization:

• Set specific text alignments for mobile devices
• Preview your page in mobile view to ensure good readability

Best Practices

Content Organization:

• Keep content concise and well-organized
• Use headings and lists in your content block for clarity
• Include essential contact information (phone, email, address if applicable)

Form Design:

• Use appropriate text sizes (Base or S recommended for better readability)
• Ensure sufficient spacing between form elements
• Consider using the "Middle" vertical alignment for better visual balance

Layout Considerations:

• For smaller amounts of content, consider the side-by-side layout
• For extensive content, the stacked layout may be more readable
• Balance the widths of content and form blocks (one-third/two-thirds often works well)

Mobile Experience:

• Set mobile-specific alignments (usually left or center)
• Test your contact page on mobile devices
• Ensure text is large enough to read on small screens

Visual Hierarchy:

• Use larger text for important headings
• Maintain consistent alignment throughout the page
• Use appropriate spacing to separate different content sections

Advanced Tips

• Multiple Content Blocks: You can add up to two content blocks to create separate sections for different types of information
• Color Scheme: Match your contact page's color scheme with your brand colors
• Form Validation: The contact form includes built-in validation for required fields
• Spam Prevention: The form includes Shopify's anti-spam measures automatically

By following this guide, you can create a professional and user-friendly contact page that matches your brand identity and provides a clear way for customers to reach you.