← Back to Documentation
Contact Page Setup
Step-by-step guide to setting up your contact page with the LiteStep theme's contact template.
RECOMMENDED
Method 1: Using the Contact Template
Step-by-Step Instructions
1
Go to Shopify Admin
Navigate to Online Store → Pages
2
Create New Page
- • Click "Add page"
- • Enter page title:
Contact Us - • Add any content in the editor (optional)
3
Select Contact Template
- • Scroll down to "Search engine listing preview"
- • Click "Edit website SEO"
- • In the template dropdown, select "contact"
- • Click "Save"
4
Save the Page
Click "Save" at the top right
🔧 Troubleshooting
If You Don't See the Contact Template
Sometimes the contact template option doesn't appear immediately. Try this:
- Create the page first with the default template
- Save it
- Edit the page again
- The template dropdown should now show "contact" as an option
Alternative Methods
Method 2: Create with Specific Handle
1. Create page with handle "contact"
When creating the page, set title to "Contact Us" - the handle becomes "contact" automatically
2. URL Structure
Your contact page will be at: yourstore.com/pages/contact
3. Automatic Template
The page.contact.json template applies automatically
Method 3: Manual Template Assignment
If you still have issues:
- Create the page with any template
- Go to themes editor (Online Store → Themes → Customize)
- Navigate to your contact page
- Change template in the page settings
- Select contact template from the dropdown
📋 Contact Form Features
Form Fields Included
- • Name - Customer name (required)
- • Email - Customer email (required)
- • Phone - Optional phone number
- • Message - Customer inquiry (required)
Built-in Features
- • Spam Protection - Built-in spam filtering
- • Email Notifications - Automatic admin alerts
- • Success Messages - Confirmation feedback
- • Validation - Required field checking
🎨 Customization Options
Page Content
You can add custom content above the contact form by editing the page content in your Shopify admin.
Suggested Content:
- • Store hours and location
- • Customer service information
- • Response time expectations
- • Alternative contact methods
Theme Settings
Customize the contact page appearance through the theme customizer:
- • Form styling and colors
- • Button appearance
- • Page layout options
- • Typography settings
✨ Best Practices
✅ Do This
- • Include clear contact information
- • Set response time expectations
- • Test the form before going live
- • Add your contact page to navigation
- • Include alternative contact methods
❌ Avoid This
- • Don't forget to test form submissions
- • Don't use default template for contact page
- • Don't skip setting up email notifications
- • Don't make form fields too complex
- • Don't forget mobile optimization