Transform your Shopify store's capability with our powerful Door Designer app block. This comprehensive tool allows your customers to design custom sliding doors directly on your storefront, providing an interactive and engaging shopping experience. The app block seamlessly integrates with your existing theme while offering robust customization options that maintain your store's professional appearance.
Prerequisites
- Door Designer app installed from Shopify App Store
- Access to your store's theme editor
- Admin privileges for your Shopify store
- Setup Door Templates and Door parameters in Settings page.
- Setup Door types in Door Types page.
Adding the App Block to Your Theme
Step 1: Access Theme Editor
- Go to your Shopify admin panel
- Navigate to Online Store → Themes
- Click "Customize" on your active theme
Step 2: Select Page Template
- Choose the page where you want to add the Door Designer
- Click "Add section"
- Locate "Door Designer" in the app blocks section
Step 3: Configure Block Settings
The Door Designer app block comes with several customizable features:
Basic Input Fields
- Set Name field
- Door dimensions (Top Width, Bottom Width, Left Height, Right Height)
- Number of Doors adjuster (+ and - buttons)
Dropdown Menus
- Frame Style selection
- Frame Color options
- Track Style choices
- Surface Type ("Doors are sitting on")
Additional Options
- Track Style toggle
- Floor batten checkbox (Optional)
- Insert selection dropdown
Step 4: Preview and Position
- Use the live preview to ensure proper placement
- Adjust the block position using drag-and-drop
- Verify that all interactive elements are functioning correctly
Customer Interface Features
Visual Preview
- Central preview area showing real-time door design
- Interactive door panels for insert customization
- Dynamic pricing display
Price Calculator
- Automatically updates based on selections
- Clickable price display for detailed breakdown
- Transparent pricing information
Shopping Integration
- "Add to Cart" functionality
- Automatic product variant creation
- Seamless checkout process
Best Practices
Performance Optimization
- Place the app block strategically on your page
- Avoid multiple instances on the same page
- Ensure proper loading sequence
User Experience
- Keep the designer above the fold when possible
- Maintain clear visibility of all input fields
- Ensure adequate spacing around the block
Mobile Responsiveness
- Test the designer on various devices
- Verify touch interactions work properly
- Ensure readability of all text elements
Troubleshooting
Common Issues
- Block not appearing
- Verify app installation
- Check theme compatibility
- Clear theme cache
- Pricing not updating
- Confirm admin price configuration
- Check network connectivity
- Verify calculation parameters
- Preview not loading
- Check browser compatibility
- Verify JavaScript enablement
- Clear browser cache
Support and Resources
- Access technical support through the app's admin panel
- Refer to detailed documentation in the app settings
- Contact our support team for additional assistance
Remember to save all changes and test the functionality thoroughly before publishing your updated theme. The Door Designer app block is designed to be user-friendly while providing powerful customization options for your customers.