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 arranged in a specific way. In each slot goes a component. Like Legos.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.
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
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 UIs 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.
Everything visible at once eliminates friction and delays
2
All Fields Visible
No multi-step navigation to lose customers
3
Urgency-Focused Slots
Built-in countdown timers and scarcity indicators
4
Minimal Friction
Fastest possible path from interest to purchase
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.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Ollie Shop","description":"Checkout customization platform for e-commerce.","colors":{"primary":"#556AEB","light":"#556AEB","dark":"#BFC9FF"},"logo":{"light":"https://mintcdn.com/ollie/AKuzggu4Ldtc4mWE/logo/default.svg?fit=max\u0026auto=format\u0026n=AKuzggu4Ldtc4mWE\u0026q=85\u0026s=59a15240aae28bacc9c475620ba101dd","dark":"https://mintcdn.com/ollie/AKuzggu4Ldtc4mWE/logo/default.svg?fit=max\u0026auto=format\u0026n=AKuzggu4Ldtc4mWE\u0026q=85\u0026s=59a15240aae28bacc9c475620ba101dd"},"favicon":"https://mintcdn.com/ollie/UatGh8GLCugPlVFB/favicon.png?fit=max\u0026auto=format\u0026n=UatGh8GLCugPlVFB\u0026q=85\u0026s=c9f4773cab8806f309bce26b8a043a71","appearance":{"default":"system","strict":false},"background":{"decoration":"gradient"},"navbar":{"links":[{"href":"https://admin.ollie.shop","label":"Ollie Shop Admin"}],"primary":{"type":"button","label":"Start Building","href":"https://admin.ollie.shop"}},"footer":{"socials":{"github":"https://github.com/ollie-shop","linkedin":"https://www.linkedin.com/company/ollie-shop"},"links":[{"header":"Ollie","items":[{"label":"About Us","href":"https://ollie.shop"},{"label":"Contact Us","href":"https://ollie.shop/"}]},{"header":"Products","items":[{"label":"Ollie Shop","href":"https://docs.ollie.shop/ollie-shop"}]},{"header":"Privacy \u0026 Security","items":[{"label":"Privacy Policy (North America)","href":"https://docs.ollie.shop/privacy/north-america"},{"label":"Política de Privacidade (Brasil)","href":"https://docs.ollie.shop/privacy/brazil"},{"label":"Security Policy","href":"https://docs.ollie.shop/security/security-incident-response-plan"},{"label":"Subprocessors","href":"https://docs.ollie.shop/security/subprocessors"}]}]},"search":{"prompt":"Search docs..."},"seo":{},"styling":{"eyebrows":"breadcrumbs","codeblocks":"system","latex":false},"errors":{"404":{"redirect":true}},"contextual":{"options":["copy","view","claude","chatgpt","cursor","mcp"],"display":"header"},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"ollie","hasAudioNarration":false,"actualSubdomain":"ollie","customDomains":["docs.ollie.shop"],"gitSource":{"type":"github","owner":"ollie-shop","repo":"ollie-shop","deployBranch":"main","contentDirectory":"apps/docs","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ada717bec9bb061b60b72e7","collectionId":"532f6151-bc39-4209-9732-dc2d205036f0","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ada717bec9bb061b60b72e7"},"entitlements":{},"buildId":"6ada717bec9bb061b60b72e7","clientVersion":"0.0.3964","searchFilterCounts":[{"language":"default","tag":"Customization","count":31},{"language":"default","tag":"Configuration","count":13},{"language":"default","tag":"Ollie SDK","count":12},{"language":"default","tag":"Hooks","count":10},{"language":"default","tag":"CLI Reference","count":8},{"language":"default","tag":"Core Concepts","count":8},{"language":"default","tag":"Functions","count":5},{"language":"default","tag":"Analytics \u0026 Scripts","count":4},{"language":"default","tag":"Start Here","count":3},{"language":"default","tag":"Checkout Session","count":2}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"ollie-shop/concepts/templates","slug":"/ollie-shop/concepts/templates","pageMetadata":{"title":"Templates","description":"Checkout layouts optimized for different business models and customer journeys","href":"/ollie-shop/concepts/templates"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Checkout layouts optimized for different business models and customer journeys\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,p:`p`,..._provideComponents(),...props.components},{Accordion,Frame,Heading,Info,OptimizedImage,Step,Steps,Tab,Tabs}=_components;if(!Accordion)_missingMdxReference(`Accordion`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Info)_missingMdxReference(`Info`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Step)_missingMdxReference(`Step`,true);if(!Steps)_missingMdxReference(`Steps`,true);if(!Tab)_missingMdxReference(`Tab`,true);if(!Tabs)_missingMdxReference(`Tabs`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`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%.`}),`\n`,_jsxs(_components.p,{children:[`Templates can be seen as a series of `,_jsx(_components.a,{href:`/ollie-shop/concepts/slots`,children:`slots`}),` arranged in a specific way. In each slot goes a component. Like Legos.`]}),`\n`,_jsx(`video`,{autoPlay:true,muted:true,loop:true,playsInline:true,src:`https://mintcdn.com/ollie/jBGcU0GmSDfRGD9I/videos/templates.mp4?fit=max\u0026auto=format\u0026n=jBGcU0GmSDfRGD9I\u0026q=85\u0026s=6c1afa44217f404122ad2c4bc5683738`,\"data-path\":`videos/templates.mp4`}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsx(Info,{children:_jsx(_components.p,{children:`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`})}),`\n`,_jsx(_components.p,{children:`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 UIs 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.`}),`\n`,_jsx(Heading,{level:`2`,id:`available-templates`,children:`Available Templates`}),`\n`,_jsxs(Tabs,{children:[_jsx(Tab,{title:`Default - Standard Retail`,id:`default-standard-retail`,children:_jsxs(Frame,{children:[_jsx(OptimizedImage,{src:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=38bdad63cd8bf27f0f047992d2e492a3`,alt:`Template Fashion Jp`,\"data-og-width\":`1920`,width:`1920`,\"data-og-height\":`1852`,height:`1852`,\"data-path\":`ollie-shop/imgs/template-Fashion.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=b9ced63355ab32471ff1ac9dc54cc72e 280w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=52d62fc47bfc0d25df863bcfe88302e7 560w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=7fa51bb291b2d8a4279423a977f6556c 840w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=118aacd065b19a49fb56282967de42f5 1100w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=e098e7c268aca810297062f49a56705a 1650w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Fashion.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=f9861843ef55ec379a30738ffebbe81b 2500w`}),_jsx(Info,{children:_jsx(_components.p,{children:`Fashion, electronics, general retail stores that need familiar checkout flows`})}),_jsx(Accordion,{title:`Layout Features`,id:`layout-features`,children:_jsxs(Steps,{children:[_jsx(Step,{title:`Two-Column Desktop Layout`,children:_jsx(_components.p,{children:`Cart items on left, order summary on right for easy comparison`})}),_jsx(Step,{title:`Multi-Step Flow`,children:_jsx(_components.p,{children:`Cart → Details → Payment → Confirmation reduces overwhelm`})}),_jsx(Step,{title:`Sidebar Order Summary`,children:_jsx(_components.p,{children:`Always visible totals and items build confidence`})}),_jsx(Step,{title:`Mobile Responsive`,children:_jsx(_components.p,{children:`Automatically stacks to single column on phones`})})]})})]})}),_jsx(Tab,{title:`Grocery - Delivery Focused`,id:`grocery-delivery-focused`,children:_jsxs(Frame,{children:[_jsx(OptimizedImage,{src:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=2cc0eca42b4d16dc3ab5e2699fda46bb`,alt:`Template Grocery Jp`,\"data-og-width\":`1920`,width:`1920`,\"data-og-height\":`1771`,height:`1771`,\"data-path\":`ollie-shop/imgs/template-Grocery.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=0e12322597636737eef5b0ff9e6f838a 280w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=bbfb57f6e58fdae59674c2cfed9e8d40 560w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=c7614cf448604e7b963bc490ec23f92d 840w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=8c9bf19ea9101510c75d30a71a94e1f1 1100w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=0fccfe7186353007c0d3753e2dc04d56 1650w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Grocery.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=25e491034bac9a502e14d51c03214680 2500w`}),_jsx(Info,{children:_jsx(_components.p,{children:`Grocery delivery, meal kits, subscription boxes with scheduled deliveries`})}),_jsx(Accordion,{title:`Layout Features`,id:`layout-features-1`,children:_jsxs(Steps,{children:[_jsx(Step,{title:`Single-Column Layout`,children:_jsx(_components.p,{children:`Focuses attention step by step, perfect for mobile-first shopping`})}),_jsx(Step,{title:`Delivery Scheduling`,children:_jsx(_components.p,{children:`Built-in time slot selection with visual calendar interface`})}),_jsx(Step,{title:`Expandable Sections`,children:_jsx(_components.p,{children:`Reduces cognitive load with collapsible content areas`})}),_jsx(Step,{title:`Mobile-First Design`,children:_jsx(_components.p,{children:`Optimized specifically for phone shopping experiences`})})]})})]})}),_jsx(Tab,{title:`Sales - Campaign Optimized`,id:`sales-campaign-optimized`,children:_jsxs(Frame,{children:[_jsx(OptimizedImage,{src:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=fbf7fca150fae246e7e5323626e30697`,alt:`Template Sales Jp`,\"data-og-width\":`1920`,width:`1920`,\"data-og-height\":`1584`,height:`1584`,\"data-path\":`ollie-shop/imgs/template-Sales.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=63c129b84fbd3595c5faa572ec2214bd 280w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=bca8766609dd3c9fa0431ef3434b2e5f 560w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=a1e9aca32021b72c6b64f022f4bf84d2 840w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=bdbe9e0a86088448bfbff820bf5e3daa 1100w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=02f3d5b1dc5e00ce26e00e9b525a400e 1650w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Sales.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=f40f8933b8c0035277ee98cb492c8f4d 2500w`}),_jsx(Info,{children:_jsx(_components.p,{children:`Flash sales, limited offers, landing pages, high-urgency campaigns`})}),_jsx(Accordion,{title:`Layout Features`,id:`layout-features-2`,children:_jsxs(Steps,{children:[_jsx(Step,{title:`Single-Page Checkout`,children:_jsx(_components.p,{children:`Everything visible at once eliminates friction and delays`})}),_jsx(Step,{title:`All Fields Visible`,children:_jsx(_components.p,{children:`No multi-step navigation to lose customers`})}),_jsx(Step,{title:`Urgency-Focused Slots`,children:_jsx(_components.p,{children:`Built-in countdown timers and scarcity indicators`})}),_jsx(Step,{title:`Minimal Friction`,children:_jsx(_components.p,{children:`Fastest possible path from interest to purchase`})})]})})]})}),_jsx(Tab,{title:`Single - Page`,id:`single-page`,children:_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=3861dcdf2d588c8a51f7d144b19b4b0c`,alt:`Template Single Page Jp`,\"data-og-width\":`1920`,width:`1920`,\"data-og-height\":`3022`,height:`3022`,\"data-path\":`ollie-shop/imgs/template-Single-page.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=d67b4908c5a59a90416d9fae54d54153 280w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=a63995c9f9600426577a2f240eb0a080 560w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=62d668f927284dd35f9eb25a3af80da4 840w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=f467e7500b37e1bd54d4e2ee99d48566 1100w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=40122dc31af6749f903b6e1fae17c705 1650w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=200b1281648a331ae4f1e4cb592ed1b0 2500w`})})}),_jsx(Tab,{title:`Tab`,id:`tab`,children:_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=3861dcdf2d588c8a51f7d144b19b4b0c`,alt:`Template Single Page Jp`,\"data-og-width\":`1920`,width:`1920`,\"data-og-height\":`3022`,height:`3022`,\"data-path\":`ollie-shop/imgs/template-Single-page.jpg`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=280\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=d67b4908c5a59a90416d9fae54d54153 280w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=560\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=a63995c9f9600426577a2f240eb0a080 560w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=840\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=62d668f927284dd35f9eb25a3af80da4 840w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=1100\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=f467e7500b37e1bd54d4e2ee99d48566 1100w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=1650\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=40122dc31af6749f903b6e1fae17c705 1650w, https://mintcdn.com/ollie/Io6Jvu4TldP5tH4V/ollie-shop/imgs/template-Single-page.jpg?w=2500\u0026fit=max\u0026auto=format\u0026n=Io6Jvu4TldP5tH4V\u0026q=85\u0026s=200b1281648a331ae4f1e4cb592ed1b0 2500w`})})})]}),`\n`,_jsx(Info,{children:_jsx(_components.p,{children:`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.`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":"system","config":{},"pageMetadata":{"title":"Templates","description":"Checkout layouts optimized for different business models and customer journeys","href":"/ollie-shop/concepts/templates"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Available Templates","slug":"available-templates","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"ollie","siteName":"Ollie Shop","title":"Templates - Ollie Shop","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-22T20:27:31.027Z","originalFileLocation":"ollie-shop/concepts/templates.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Checkout layouts optimized for different business models and customer journeys\">\u003cmeta data-mint-head name=\"application-name\" content=\"Ollie Shop\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Templates - Ollie Shop\">\u003cmeta data-mint-head property=\"og:description\" content=\"Checkout layouts optimized for different business models and customer journeys\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Ollie Shop\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.ollie.shop/ollie-shop/concepts/templates\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://ollie.mintlify.app/_mintlify/api/og/v2?division=Core+Concepts\u0026amp;title=Templates\u0026amp;description=Checkout+layouts+optimized+for+different+business+models+and+customer+journeys\u0026amp;theme=a5201a3d9996fb736e857e85\u0026amp;signature=2fda4644b36fd74a795edfa97f9d31f997c39ff638707fabe4c64ebdd0d9ae6a\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Templates - Ollie Shop\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Checkout layouts optimized for different business models and customer journeys\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://ollie.mintlify.app/_mintlify/api/og/v2?division=Core+Concepts\u0026amp;title=Templates\u0026amp;description=Checkout+layouts+optimized+for+different+business+models+and+customer+journeys\u0026amp;theme=a5201a3d9996fb736e857e85\u0026amp;signature=2fda4644b36fd74a795edfa97f9d31f997c39ff638707fabe4c64ebdd0d9ae6a\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/ollie/yezMgwqnHyCPhe5b/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Ollie Shop\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#556AEB\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.ollie.shop/ollie-shop/concepts/templates\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/ollie-shop/concepts/templates.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.ollie.shop/#organization\",\"name\":\"Ollie Shop\",\"url\":\"https://docs.ollie.shop\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/ollie/AKuzggu4Ldtc4mWE/logo/default.svg?fit=max\u0026auto=format\u0026n=AKuzggu4Ldtc4mWE\u0026q=85\u0026s=59a15240aae28bacc9c475620ba101dd\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.ollie.shop#website\",\"name\":\"Ollie Shop\",\"url\":\"https://docs.ollie.shop\",\"publisher\":{\"@id\":\"https://docs.ollie.shop/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.ollie.shop/ollie-shop/concepts/templates#webpage\",\"url\":\"https://docs.ollie.shop/ollie-shop/concepts/templates\",\"name\":\"Templates\",\"description\":\"Checkout layouts optimized for different business models and customer journeys\",\"dateModified\":\"2026-10-22T20:27:31.027Z\",\"isPartOf\":{\"@id\":\"https://docs.ollie.shop#website\"},\"breadcrumb\":{\"@id\":\"https://docs.ollie.shop/ollie-shop/concepts/templates#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.ollie.shop/ollie-shop/concepts/templates#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Core Concepts\",\"item\":\"https://docs.ollie.shop/ollie-shop/concepts/stores\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Templates\",\"item\":\"https://docs.ollie.shop/ollie-shop/concepts/templates\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.ollie.shop/ollie-shop/concepts/templates#article\",\"headline\":\"Templates\",\"name\":\"Templates\",\"description\":\"Checkout layouts optimized for different business models and customer journeys\",\"url\":\"https://docs.ollie.shop/ollie-shop/concepts/templates\",\"mainEntityOfPage\":{\"@id\":\"https://docs.ollie.shop/ollie-shop/concepts/templates#webpage\"},\"dateModified\":\"2026-10-22T20:27:31.027Z\",\"publisher\":{\"@id\":\"https://docs.ollie.shop/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.ollie.shop#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Ollie Shop\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Ollie Shop","nav":{"global":null,"groups":[{"group":"Overview","pages":[{"title":"What is Ollie Shop","href":"/ollie-shop/index"}]},{"group":"Start Here","pages":[{"title":"Admin Onboarding","href":"/ollie-shop/get-started/admin-onboarding"},{"title":"Admin Overview","href":"/ollie-shop/get-started/admin-overview"},{"title":"Developer Quickstart","href":"/ollie-shop/get-started/quickstart"}]},{"group":"AI Coding Agents","pages":[{"title":"Agent Skills","href":"/ollie-shop/skills/index"}]},{"group":"Core Concepts","pages":[{"title":"Stores","description":null,"href":"/ollie-shop/concepts/stores"},{"title":"Templates","href":"/ollie-shop/concepts/templates"},{"title":"Slots","description":"Strategic placement points where components transform your checkout experience","href":"/ollie-shop/concepts/slots"},{"title":"Slots Catalog","href":"/ollie-shop/concepts/slots-catalog"},{"title":"Components","href":"/ollie-shop/concepts/component"},{"title":"Functions","href":"/ollie-shop/concepts/function"},{"title":"Versions","href":"/ollie-shop/concepts/version"},{"title":"Global Session Objects","href":"/ollie-shop/concepts/session"}]},{"group":"Customization","pages":[{"group":"Customization","pages":[{"title":"Build Your First Component","href":"/ollie-shop/components/your-first-component"},{"title":"Custom Component 101","href":"/ollie-shop/customization/custom-component"},{"title":"Children Component","href":"/ollie-shop/customization/children-component"},{"title":"Passing Props to Custom Components","href":"/ollie-shop/customization/props"},{"title":"Extra Checkout Steps","href":"/ollie-shop/customization/steps"},{"title":"Payment Slots","href":"/ollie-shop/customization/payment-slots"},{"title":"Import Components","href":"/ollie-shop/customization/import-components"},{"title":"Managing Components in the Admin","href":"/ollie-shop/customization/managing-components"},{"title":"Roll Back a Component","href":"/ollie-shop/customization/roll-back-a-component"}]},{"group":"Configuration","pages":[{"title":"Store Settings","href":"/ollie-shop/configuration/store-settings"},{"title":"Organization and Members","href":"/ollie-shop/configuration/organization-and-members"},{"title":"Managing Versions","href":"/ollie-shop/configuration/versions"},{"title":"Integrations","href":"/ollie-shop/configuration/integrations"},{"title":"Theme Design Tokens","href":"/ollie-shop/configuration/theme"},{"title":"Fonts","href":"/ollie-shop/configuration/font"},{"title":"Custom Icons","href":"/ollie-shop/configuration/custom-icons"},{"title":"Translations","href":"/ollie-shop/configuration/translation"},{"title":"Checkout Flags","href":"/ollie-shop/configuration/feature-flags"},{"title":"Form Fields","href":"/ollie-shop/configuration/form-fields"},{"title":"Ollie Login","href":"/ollie-shop/configuration/ollie-login"},{"title":"Share Cart","href":"/ollie-shop/configuration/share-cart"},{"title":"Environment Variables","href":"/ollie-shop/configuration/env-vars"}]}]},{"group":"Ollie Studio","pages":[{"title":"What is Ollie Studio","href":"/ollie-shop/studio/index"},{"title":"Studio reference","href":"/ollie-shop/customization/studio-editor"}]},{"group":"Functions","pages":[{"title":"What are Functions","href":"/ollie-shop/functions/index"},{"title":"Writing a function","href":"/ollie-shop/functions/writing-a-function"},{"title":"Triggers","href":"/ollie-shop/functions/triggers"},{"title":"Session storage and cookies","href":"/ollie-shop/functions/session-storage-and-cookies"},{"title":"Deploying a function","href":"/ollie-shop/functions/deploying"}]},{"group":"CLI Reference","pages":[{"title":"CLI Overview","href":"/ollie-shop/cli/index"},{"title":"Installation and login","href":"/ollie-shop/cli/installation"},{"title":"Project configuration (ollie.json)","href":"/ollie-shop/cli/project-config"},{"title":"start (dev server)","href":"/ollie-shop/cli/start"},{"title":"deploy and status","href":"/ollie-shop/cli/deploy"},{"title":"Record commands","href":"/ollie-shop/cli/resources"},{"title":"function dev (local functions)","href":"/ollie-shop/cli/function-dev"},{"title":"whoami","href":"/ollie-shop/cli/whoami"}]},{"group":"Ollie SDK","pages":[{"title":"SDK Reference","href":"/ollie-shop/api/index"},{"title":"React Hooks API Reference","href":"/ollie-shop/api/hooks"},{"group":"Hooks","pages":[{"group":"Checkout Session","pages":[{"title":"useCheckoutSession","href":"/ollie-shop/api/useCheckoutSession"},{"title":"CheckoutSession Type","href":"/ollie-shop/api/CheckoutSession"}]},{"title":"useCheckoutAction","href":"/ollie-shop/api/useCheckoutAction"},{"group":"Checkout Order","pages":[{"title":"useCheckoutOrder","href":"/ollie-shop/api/use-checkout-order"},{"title":"Checkout Order Types","href":"/ollie-shop/api/checkout-order-types"}]},{"title":"usePendingActions","href":"/ollie-shop/api/use-pending-actions"},{"title":"useStoreInfo","href":"/ollie-shop/api/use-store-info"},{"title":"useMessages","href":"/ollie-shop/api/useMessages"},{"title":"useLogin","href":"/ollie-shop/api/use-login"},{"title":"useNavigation","href":"/ollie-shop/api/use-navigation"}]}]},{"group":"Analytics \u0026 Scripts","pages":[{"title":"Native Checkout Events","href":"/ollie-shop/analytics/index"},{"title":"Custom Events","href":"/ollie-shop/analytics/custom-events"},{"title":"Enriching Events with GTM","href":"/ollie-shop/analytics/gtm-enrichment"},{"title":"Device Fingerprint","href":"/ollie-shop/analytics/device-fingerprint"}]},{"group":"Tools \u0026 Tips","pages":[{"title":"Easy Cart","href":"/ollie-shop/cheat-sheet/Easy-Cart"}]},{"group":"Product updates","pages":[{"title":"changelog","href":"/ollie-shop/changelog"}]}]},"title":"Templates - Ollie Shop","buildId":"dpl_HcHmUS6i3UwswnTHJUEdcTtwfdTQ","deploymentId":"dpl_HcHmUS6i3UwswnTHJUEdcTtwfdTQ","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-D1UCVuPB.js","DynamicMarkdown-Crwq6WG_.js","zoom-image-lightbox-CFBqa0On.js","lightbox-handle-r17bVUz3.js"]}