Contact Page
The Contact Page section provides a customizable contact form and information layout with flexible content arrangement.
The template supports side-by-side or stacked layouts 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 |
Layout Selection
- Left/right: Best for balanced content with similar amounts of text and form fields
- Above/below: Better for extensive content or when you want the form to be the focal point
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
- Navigate to your Shopify admin → Online Store → Themes
- Click Customize on your current theme
- Select the Contact page template
- 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:
- Click "Add block" and select "Content block"
- Add your contact information, business hours, or other details using the rich text editor
- Set appropriate text size and alignment
Configure Form Block:
- Click "Add block" and select "Form block"
- Adjust label and input text sizes
- 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)
- Add business hours or response time expectations
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
- Test form submission to verify it's working correctly
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
- Verify form fields are easy to tap and fill out
Visual Hierarchy
- Use larger text for important headings
- Maintain consistent alignment throughout the page
- Use appropriate spacing to separate different content sections
Form Success
After a customer submits the contact form, Shopify sends the message to the store owner's email. Check your Shopify notification settings to ensure you receive these messages.
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
Email Configuration
Ensure your Shopify store email settings are correctly configured to receive contact form submissions. Test the form after setup to verify messages are being delivered.