-
Loki Checkout
- User documentation
-
Developer documentation
- Getting started
- Architecture
-
Basic customizations
- Customizing component appearance
- Simple XML layout changes for fields
- Customer Address configurations
- Overriding settings via the XML layout
- Customizing CSS classes
- Changing the grid of field blocks
- Country-specific layout handles
- Child block rendering
- Field validation and filtering
- Styling input fields
- Adding a custom block to a form
- Ordering blocks properly
- CSS variables
- Changing error messages
- Changing the date field format
- Customizing the progress bar
- Using ImageOutput ViewModel
- Changing the cart item quantity
- Advanced customizations
- Integrations
- Module overview
- Troubleshooting
- ADR
- Playbook
- Reference
- Milestones and roadmap
- Module overview
- Frequently Asked Questions
- Loki Components
- Loki Field Components
- Loki Admin Components
- Loki Theme Kit
- Loki Base
- Miscellaneous
Customizing component appearance
This page is currently under review and might not be totally up to date.
Most blocks in the Loki Checkout are created with a set of the following:
- XML layout declaration
- Block class (usually just the generic
Templateclass) - PHTML template
- Loki Component
The PHTML templates are deliberately kept small, so that template overrides in your own theme are easy to upgrade. However, the idea is that most generic customizations are made either via the XML layout or dynamic AlpineJS behaviour.
Last modified: May 13, 2026