Templates

​

What are Templates?

Templates are pre-designed checkout layouts that provide the foundation for your custom checkout experience. Each template defines a set of slots - designated areas where you can place your custom components.

Think of templates as the architectural blueprint of your checkout page, while components are the customizable elements that fill specific areas within that blueprint.

​

How Templates Work

​

Template Structure

• Header Slot: Navigation, logo, progress indicators
• Main Content Slots: Product information, forms, pricing details
• Sidebar Slots: Order summary, promotional elements
• Footer Slots: Legal information, support links

​

Slot Types

Templates include different types of slots:

• Fixed Slots: Always present with consistent positioning
• Conditional Slots: Appear based on cart contents or user actions
• Flexible Slots: Can be resized or repositioned based on content

​

Default Components vs Custom Components

Every template comes with native components that provide basic functionality out of the box:

• Product display
• Quantity selectors
• Customer information forms
• Payment method selection
• Order summary

You can:

1. Replace native components with custom ones
2. Add custom components to empty slots
3. Combine both approaches for maximum flexibility

​

Template Selection

​

Built-in Templates

Ollie Shop provides several professionally designed templates optimized for different use cases:

• Single Product: Optimized for one-item purchases
• Multi-Item: Designed for shopping carts with multiple products
• Subscription: Tailored for recurring purchases
• B2B: Enterprise-focused with bulk ordering features

​

Custom Templates

For advanced users, you can create completely custom templates by defining your own slot structure and layout.

​

Best Practices

​

Choosing the Right Template

1. Analyze your products: Single vs. multiple item purchases
2. Consider your audience: B2C vs. B2B customers
3. Review conversion data: Which layouts perform best
4. Test variations: Use Versions to A/B test different templates

​

Template Optimization

• Keep layouts clean and focused
• Minimize cognitive load
• Ensure mobile responsiveness
• Test across different devices and browsers

​

Template and Version Relationship

Each Version can use a different template, allowing you to:

• Test different layouts with the same audience
• Optimize templates for specific customer segments
• Gradually roll out new designs