> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ollie.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# Templates

> Checkout layouts optimized for different business models and customer journeys

Templates are pre-built by Ollie so that you don't have to create your entire checkout, when all you really want to do is change 10%.

Templates can be seen as a series of [slots](https://docs.ollie.shop/ollie-shop/concepts/slots) arrenged in a specific way. In each slot goes a component. Like Legos.

<video autoPlay muted loop playsInline src="https://mintcdn.com/ollie/jBGcU0GmSDfRGD9I/videos/templates.mp4?fit=max&auto=format&n=jBGcU0GmSDfRGD9I&q=85&s=6c1afa44217f404122ad2c4bc5683738" data-path="videos/templates.mp4" />

When we create a template we take into consideration that you'll want to customize it so there are many available slots that are not in use.

<Info>
  A custom component can be added to any available slot, even if the slot is being used by a native component. We'll automatically replace for your custom component
</Info>

The templates are developed using Nextjs. It was chosen because of its maturity and completeness of first-party features and its large development ecosystem, which allows Ul's with high standards of quality. It also offers great web performance, allowing to send less javascript code to the user's browser, improving performance and stability.

## Available Templates

<Tabs>
  <Tab title="Default - Standard Retail">
    <Frame>
      <img src="https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?fit=max&auto=format&n=Io6Jvu4TldP5tH4V&q=85&s=38bdad63cd8bf27f0f047992d2e492a3" alt="Template Fashion Jp" width="1920" height="1852" data-path="ollie-shop/imgs/template-Fashion.jpg" />

      <Info>
        Fashion, electronics, general retail stores that need familiar checkout flows
      </Info>

      <Accordion title="Layout Features">
        <Steps>
          <Step title="Two-Column Desktop Layout">
            Cart items on left, order summary on right for easy comparison
          </Step>

          <Step title="Multi-Step Flow">
            Cart → Details → Payment → Confirmation reduces overwhelm
          </Step>

          <Step title="Sidebar Order Summary">
            Always visible totals and items build confidence
          </Step>

          <Step title="Mobile Responsive">
            Automatically stacks to single column on phones
          </Step>
        </Steps>
      </Accordion>
    </Frame>
  </Tab>

  <Tab title="Grocery - Delivery Focused">
    <Frame>
      <img src="https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?fit=max&auto=format&n=Io6Jvu4TldP5tH4V&q=85&s=2cc0eca42b4d16dc3ab5e2699fda46bb" alt="Template Grocery Jp" width="1920" height="1771" data-path="ollie-shop/imgs/template-Grocery.jpg" />

      <Info>
        Grocery delivery, meal kits, subscription boxes with scheduled deliveries
      </Info>

      <Accordion title="Layout Features">
        <Steps>
          <Step title="Single-Column Layout">
            Focuses attention step by step, perfect for mobile-first shopping
          </Step>

          <Step title="Delivery Scheduling">
            Built-in time slot selection with visual calendar interface
          </Step>

          <Step title="Expandable Sections">
            Reduces cognitive load with collapsible content areas
          </Step>

          <Step title="Mobile-First Design">
            Optimized specifically for phone shopping experiences
          </Step>
        </Steps>
      </Accordion>
    </Frame>
  </Tab>

  <Tab title="Sales - Campaign Optimized">
    <Frame>
      <img src="https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?fit=max&auto=format&n=Io6Jvu4TldP5tH4V&q=85&s=fbf7fca150fae246e7e5323626e30697" alt="Template Sales Jp" width="1920" height="1584" data-path="ollie-shop/imgs/template-Sales.jpg" />

      <Info>
        Flash sales, limited offers, landing pages, high-urgency campaigns
      </Info>

      <Accordion title="Layout Features">
        <Steps>
          <Step title="Single-Page Checkout">
            Everything visible at once eliminates friction and delays
          </Step>

          <Step title="All Fields Visible">
            No multi-step navigation to lose customers
          </Step>

          <Step title="Urgency-Focused Slots">
            Built-in countdown timers and scarcity indicators
          </Step>

          <Step title="Minimal Friction">
            Fastest possible path from interest to purchase
          </Step>
        </Steps>
      </Accordion>
    </Frame>
  </Tab>

  <Tab title="Single - Page">
    <Frame>
      <img src="https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?fit=max&auto=format&n=Io6Jvu4TldP5tH4V&q=85&s=3861dcdf2d588c8a51f7d144b19b4b0c" alt="Template Single Page Jp" width="1920" height="3022" data-path="ollie-shop/imgs/template-Single-page.jpg" />
    </Frame>
  </Tab>

  <Tab title="Tab">
    <Frame>
      <img src="https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?fit=max&auto=format&n=Io6Jvu4TldP5tH4V&q=85&s=3861dcdf2d588c8a51f7d144b19b4b0c" alt="Template Single Page Jp" width="1920" height="3022" data-path="ollie-shop/imgs/template-Single-page.jpg" />
    </Frame>
  </Tab>
</Tabs>

<Info>
  Start with the Default template for most use cases. You can always create new versions with different templates to test what works best for your customers.
</Info>