PageSourceSearch

https://ep-plg-exp.netlify.app/learn/creating-an-online-store/store-preview

html ep-plg-exp.netlify.app collected 2026-10-03 11:09:13 UTC 32,426 bytes, 42 lines download raw bytes

1<!DOCTYPE html><html class="antialiased [font-feature-settings:&#x27;ss01&#x27;]" lang="en"><head><meta charSet="utf-8"/>
2<!-- This site is hosted on Netlify. Anyone can build and deploy a site
3     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=8a3c2337-dce8-424b-a6e4-4fd4c5cdbf69
4     Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta name="viewport" content="width=device-width"/><meta name="description" content="Preview the store you will create as part of learning Commerce"/><meta property="og:title" content="Learn - Elastic Path Commerce Cloud"/><meta property="og:description" content="Learn how to build your own e-commerce store in no time"/><meta property="og:image" content="undefinedbrand/ep.png"/><title>Learn - Elastic Path Commerce Cloud</title><meta name="next-head-count" content="7"/><link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=4"/><link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=4"/><link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=4"/><link rel="manifest" href="/favicons/site.webmanifest?v=4"/><link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=4" color="#0033CC"/><link rel="shortcut icon" href="/favicons/favicon.ico?v=4"/><meta name="apple-mobile-web-app-title" content="Commerce"/><meta name="application-name" content="Commerce"/><meta name="msapplication-TileColor" content="#0033CC"/><meta name="msapplication-config" content="/favicons/browserconfig.xml?v=4"/>
4<script>
5  let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)')
6
7  function updateTheme(theme) {
8    theme = theme ?? window.localStorage.theme ?? 'system'
9
10    if (theme === 'dark' || (theme === 'system' && isDarkMode.matches)) {
11      document.documentElement.classList.add('dark')
12    } else if (theme === 'light' || (theme === 'system' && !isDarkMode.matches)) {
13      document.documentElement.classList.remove('dark')
14    }
15
16    return theme
17  }
18
19  function updateThemeWithoutTransitions(theme) {
20    updateTheme(theme)
21    document.documentElement.classList.add('[&_*]:!transition-none')
22    window.setTimeout(() => {
23      document.documentElement.classList.remove('[&_*]:!transition-none')
24    }, 0)
25  }
26
27  document.documentElement.setAttribute('data-theme', updateTheme())
28
29  new MutationObserver(([{ oldValue }]) => {
30    let newValue = document.documentElement.getAttribute('data-theme')
31    if (newValue !== oldValue) {
32      try {
33        window.localStorage.setItem('theme', newValue)
34      } catch {}
35      updateThemeWithoutTransitions(newValue)
36    }
37  }).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true })
38
39  isDarkMode.addEventListener('change', () => updateThemeWithoutTransitions())
40</script>
40<link rel="preload" href="/_next/static/css/428f5652956231e1.css" as="style"/><link rel="stylesheet" href="/_next/static/css/428f5652956231e1.css" data-n-g=""/><noscript data-n-css=""></noscript>
40<script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>
40<script src="/_next/static/chunks/webpack-71a17ef4bf2fdcee.js" defer=""></script>
40<script src="/_next/static/chunks/framework-a3bb59d0610bcade.js" defer=""></script>
40<script src="/_next/static/chunks/main-db266069e67106dc.js" defer=""></script>
40<script src="/_next/static/chunks/pages/_app-4213933737f295c8.js" defer=""></script>
40<script src="/_next/static/chunks/4ad82c5e-80d0fd2a7fbd8d82.js" defer=""></script>
40<script src="/_next/static/chunks/a2d3edcb-d64f83904b2c695d.js" defer=""></script>
40<script src="/_next/static/chunks/97553-f5784daab1f540e9.js" defer=""></script>
40<script src="/_next/static/chunks/26417-fff01abf22ce78d3.js" defer=""></script>
40<script src="/_next/static/chunks/pages/learn/creating-an-online-store/store-preview-c38308bf8aff9129.js" defer=""></script>
40<script src="/_next/static/i4Vkrw8_TCDxp4lBsiDWB/_buildManifest.js" defer=""></script>
40<script src="/_next/static/i4Vkrw8_TCDxp4lBsiDWB/_ssgManifest.js" defer=""></script>
40</head><body class="bg-white antialiased dark:bg-slate-950">
vendor: 67 bytes, line 40
40<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
40GTM-TB3FDCQ
vendor: 82 bytes, line 40
40" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
40<div id="__next"><div class="flex items-center justify-center gap-x-6 bg-black px-6 py-2.5 sm:px-3.5"><p class="text-sm leading-6 text-ep-white"><a href="https://www.elasticpath.com/lp/composable-frontend" rel="noopener noreferrer" target="_blank"><strong class="font-semibold">Composable Frontend 2.0</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1"></circle></svg><span class="hidden sm:inline-block">Free white-glove onboarding with our product team</span> <!-- -->Learn more <span aria-hidden="true">→</span></a></p></div><div class="sticky top-0 z-50 flex flex-col transition-all duration-200 dark:bg-slate-950 dark:bg-transparent"><header class="flex flex-wrap items-center bg-white px-5 py-[0.875rem] transition duration-500 dark:bg-transparent lg:px-10 lg:py-[1.4375rem] xl:px-[2.813rem] 2xl:px-[4.6875rem]"><div class="relative flex flex-grow basis-0 items-center justify-between pr-4 lg:justify-start lg:pr-0"><a class="block w-7 overflow-hidden lg:w-9 xl:w-auto" href="/"><span class="sr-only">Elastic Path Commerce Cloud</span><svg width="151" height="35" viewBox="0 0 151 35" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-ep-foundation dark:text-ep-cloud-white h-[1.75rem] lg:h-9"><g clip-path="url(#clip0_2583_7607)"><path d="M26.0585 7.6958H36.9191V10.6829H29.3177V15.0606H36.6593V18.0477H29.3177V23.2494H37.179V26.2364H26.0585V7.6958Z" fill="currentColor"></path><path d="M42.3983 26.2364H39.296V7.6958H42.3983V26.2364Z" fill="currentColor"></path><path d="M55.1625 14.2624C55.551 14.9835 55.7594 15.859 55.7594 17.3783V23.0176C55.7594 23.5843 55.9909 23.8417 56.4308 23.8417C56.6108 23.8417 56.742 23.8417 56.9221 23.8161V26.4168C56.7137 26.4684 56.0938 26.5456 55.7594 26.5456C54.2056 26.5456 53.0944 25.7988 52.7342 24.3568L52.6545 24.0478C51.7773 25.5673 50.5091 26.5456 48.5695 26.5456C45.9328 26.5456 44.199 25.0778 44.199 22.7602C44.199 20.4425 45.6987 19.258 48.7521 18.64L51.4403 18.0992C52.2686 17.9447 52.6545 17.6101 52.6545 16.8117C52.6545 15.55 51.7516 14.7774 50.2518 14.7774C48.6981 14.7774 47.8467 15.4727 47.6383 16.6058L44.5617 16.3997C44.8472 13.9792 46.9669 11.9963 50.3805 11.9963C52.6545 11.9963 54.3883 12.8204 55.1625 14.2624ZM52.6545 19.6443C52.3715 19.8247 52.086 19.9533 51.2345 20.1851L49.3978 20.6745C47.8467 21.0865 47.2782 21.7561 47.2782 22.58C47.2782 23.4811 48.001 23.9449 49.1637 23.9449C50.8204 23.9449 52.6545 22.8117 52.6545 20.288V19.6443Z" fill="currentColor"></path><path d="M63.0804 26.5456C59.9781 26.5456 58.3729 25.0778 57.5729 23.2753L60.1067 21.6273C60.701 22.9403 61.6064 23.7645 63.1319 23.7645C64.2689 23.7645 64.7602 23.1724 64.7602 22.5543C64.7602 21.9
40619 64.3203 21.4984 63.2348 20.9833L60.9865 19.9277C59.0469 19.0263 58.1157 17.7645 58.1157 16.065C58.1157 13.9276 59.9781 11.9963 62.5377 11.9963C64.9428 11.9963 66.3114 13.2324 67.0882 14.4942L64.7345 16.2968C64.2432 15.5242 63.5718 14.7774 62.5119 14.7774C61.6322 14.7774 61.038 15.2667 61.038 15.9105C61.038 16.4255 61.3466 16.8375 62.0721 17.1723L64.4515 18.2537C66.6226 19.2324 67.7339 20.4941 67.7339 22.5027C67.7339 24.9233 65.7686 26.5456 63.0804 26.5456Z" fill="currentColor"></path><path d="M73.6298 15.0865V26.2367H70.5275V15.0865H67.9423V12.3054H70.5275V9.47275L73.6298 8.95776V12.3054H76.2151V15.0865H73.6298Z" fill="currentColor"></path><path d="M78.8159 7.43848C79.9014 7.43848 80.6268 8.15951 80.6268 9.24105C80.6268 10.3226 79.9014 11.0436 78.8159 11.0436C77.7303 11.0436 77.0049 10.3226 77.0049 9.24105C77.0049 8.15951 77.7303 7.43848 78.8159 7.43848ZM80.367 26.2367H77.2647V12.3054H80.367V26.2367Z" fill="currentColor"></path><path d="M82.0853 19.284C82.0853 15.0607 85.3163 11.9963 89.3498 11.9963C92.6605 11.9963 94.5486 13.5929 95.503 15.6787L92.892 17.198C92.1434 15.8075 91.0553 14.8804 89.3755 14.8804C86.9703 14.8804 85.2391 16.7603 85.2391 19.284C85.2391 21.7815 86.9703 23.6616 89.3755 23.6616C91.1865 23.6616 92.272 22.7088 92.9691 21.0349L95.7628 22.2194C94.9087 24.7431 92.8148 26.5456 89.3498 26.5456C85.2391 26.5456 82.0853 23.4811 82.0853 19.284Z" fill="currentColor"></path><path d="M106.829 19.1292V26.2364H103.57V7.6958H110.654C114.716 7.6958 117.016 10.0392 117.016 13.4125C117.016 16.7859 114.716 19.1292 110.397 19.1292L106.829 19.1292ZM106.829 10.6829V16.1421H110.397C112.44 16.1421 113.551 15.0606 113.551 13.4125C113.551 11.7645 112.465 10.6829 110.552 10.6829H106.829Z" fill="currentColor"></path><path d="M128.476 14.2624C128.864 14.9835 129.07 15.859 129.07 17.3783V23.0176C129.07 23.5843 129.304 23.8417 129.744 23.8417C129.924 23.8417 130.053 23.8417 130.236 23.8161V26.4168C130.027 26.4684 129.407 26.5456 129.07 26.5456C127.519 26.5456 126.408 25.7988 126.045 24.3568L125.968 24.0478C125.088 25.5673 123.823 26.5456 121.883 26.5456C119.246 26.5456 117.512 25.0778 117.512 22.7602C117.512 20.4425 119.012 19.258 122.063 18.64L124.754 18.0992C125.579 17.9447 125.968 17.6101 125.968 16.8117C125.968 15.55 125.062 14.7774 123.563 14.7774C122.012 14.7774 121.158 15.4727 120.952 16.6058L117.875 16.3997C118.158 13.9792 120.28 11.9963 123.694 11.9963C125.968 11.9963 127.702 12.8204 128.476 14.2624ZM125.968 19.6443C125.685 19.8247 125.399 19.9533 124.545 20.1851L122.711 20.6745C121.158 21.0865 120.589 21.7561 120.589 22.58C120.589 23.4811 121.314 23.9449 122.477 23.9449C124.131 23.9449 125.968 22.8117 125.968 20.288L125.968 19.6443Z" fill="currentColor"></path><path d="M135.702 15.0865V26.2367H132.6V15.0865H130.014V12.3054H132.6V9.47275L135.702 8.95776V12.3054H138.29V15.0865H135.702Z" fill="currentColor"></path><path d="M150.794 15.1636C150.974 15.9104 151 16.5284 151 17.8159V26.2364H147.898V18.5368C147.898 17.6872 147.872 17.2494 147.795 16.7859C147.535 15.5499 146.758 14.8546 145.415 14.8546C143.967 14.8546 143.01 15.6529 142.647 16.8632C142.544 17.2236 142.442 17.6357 142.442 18.7429V26.2364H139.339V7.6958H142.442V14.4941C143.216 13.1293 144.587 11.9962 146.552 11.9962C148.855 11.9962 150.329 13.3353 150.794 15.1636Z" fill="currentColor"></path><path d="M5.75806 12.9026C6.92189 15.8265 6.95524 19.1347 5.79141 22.0585L14.8973 22.0311V12.9055L5.75806 12.9026Z" fill="#2BCC7E"></path><path d="M5.75804 12.9027L12.2185 6.4528L5.75108 0L0 5.73812L3.00873 8.74007C4.23723 9.9658 5.15429 11.3881 5.75804 12.9027Z" fill="#2BCC7E"></path><path d="M3.00873 26.1967L0 29.1986L5.75108 34.9367L12.2185 28.4839L5.7914 22.0586C5.18765 23.5731 4.23723 24.9709 3.00873 26.1967Z" fill="#2BCC7E"></path></g><defs><clipPath id="clip0_2583_7607"><rect width="151" height="35" fill="white"></rect></clipPath></defs></svg></a><nav class="ml-16 flex items-center lg:block"><ul class="flex gap-5"><li class="hidden items-center lg:flex"><a class="font-semibold text-ep-commerce-green-step-down dark:text-ep-commerce-green dark:shadow-ep-commerce-green dark:hover:shadow-white dark:hover:text-shadow" rel="" target="" href="/learn/creating-an-online-store/store-preview">Interactive Learning</a></li><li class="hidden items-center lg:flex"><a class="text-base text-ep-darker-gray transition-all duration-200 hover:shadow-ep-black hover:text-shadow dark:text-slate-50 dark:hover:shadow-white dark:hover:text-shadow" rel="" target="" href="/docs">Docs</a></li><li class="hidden items-center self-end sm:flex lg:hidden"><a href="https://useast.cm.elasticpath.com/free-trial" target="_blank" rel="noopener noreferrer" class="text-base text-ep-darker-gray transition-all duration-200 hover:shadow-ep-black hover:text-shadow dark:text-slate-50 dark:hover:shadow-white dark:hover:text-shadow">Start free trial</a></li></ul></nav></div><div class="relative flex items-center justify-end gap-5 lg:gap-[1.406rem] xl:gap-6"><div class="relative z-10" data-headlessui-state=""><label class="sr-only" id="headlessui-listbox-label-:R66bdm:" data-headlessui-state="">Theme</label><button class="flex h-5 w-5 items-center justify-center rounded-md shadow-md shadow-black/5 ring-1 ring-black/5 transition-all duration-200 dark:bg-slate-800 dark:shadow-none dark:ring-inset dark:ring-slate-500 dark:hover:shadow-slate-50/30 dark:hover:ring-slate-50 xl:h-6 xl:w-6" id="headlessui-listbox-button-:Ra6bdm:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><span class="sr-only"></span><svg aria-hidden="true" viewBox="0 0 16 16" class="hidden h-4 w-4 fill-ep-commerce-green [[data-theme=light]_&amp;]:block"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"></path></svg><svg class="hidden h-4 w-4 stroke-ep-commerce-green dark:stroke-slate-50 [[data-theme=dark]_&amp;]:block" aria-hidden="true" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.157 7.908A5.281 5.281 0 0 1 4.25 1a5.283 5.283 0 1 0 6.908 6.908Z"></path></svg><svg aria-hidden="true" viewBox="0 0 16 16" class="hidden h-4 w-4 fill-ep-commerce-green [:not(.dark)[data-theme=system]_&amp;]:block"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"></path></svg><svg class="hidden h-4 w-4 fill-ep-commerce-green dark:stroke-slate-50 [.dark[data-theme=system]_&amp;]:block" aria-hidden="true" viewBox="0 0 12 12"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.157 7.908A5.281 5.281 0 0 1 4.25 1a5.283 5.283 0 1 0 6.908 6.908Z"></path></svg></button></div><button type="button" class="group flex h-6 w-6 items-center justify-center rounded-full px-2 text-sm r
40ing-1 ring-slate-200 transition-all duration-200 dark:bg-slate-800 dark:ring-inset dark:ring-slate-500 dark:hover:ring-slate-50 xl:h-auto xl:w-36 xl:justify-start xl:self-stretch xl:rounded-md"><svg aria-hidden="true" viewBox="0 0 20 20" class="h-5 w-5 flex-none fill-slate-400 dark:fill-slate-50"><path fill-rule="evenodd" d="M11.978 11.504h.527l3.329 3.335-.994.994-3.335-3.328v-.527l-.18-.187a4.316 4.316 0 0 1-2.822 1.047 4.336 4.336 0 1 1 4.336-4.336 4.316 4.316 0 0 1-1.048 2.822l.187.18ZM5.501 8.502c0 1.661 1.341 3.002 3.002 3.002 1.661 0 3.002-1.34 3.002-3.002a2.998 2.998 0 0 0-3.002-3.001 2.998 2.998 0 0 0-3.002 3.001Z" clip-rule="evenodd"></path></svg><span class="ml-2 hidden text-slate-500 dark:text-slate-50 xl:flex">search</span></button><a class="hidden text-base text-ep-darker-gray transition-all duration-200 hover:shadow-ep-black hover:text-shadow dark:text-slate-50 dark:hover:shadow-white dark:hover:text-shadow lg:flex" href="https://useast.cm.elasticpath.com/">Log in</a><li class="order-first flex items-center lg:order-none"><a href="https://useast.cm.elasticpath.com/free-trial" target="_blank" rel="noopener noreferrer" class="hover:text-ep-foundation border border-ep-commerce-green-step-down text-ep-foundation hover:border-ep-commerce-light hover:bg-ep-commerce-light active:bg-ep-commerce-green focus:bg-ep-commerce-green focus:text-ep-foundation dark:border-ep-commerce-green dark:text-ep-commerce-green dark:hover:bg-transparent dark:hover:text-ep-commerce-light dark:hover:border-ep-commerce-light transition-all duration-200 hidden justify-center rounded-md px-5 py-2 text-sm lg:flex xl:text-base">Start free trial</a></li><div class="flex items-center justify-center lg:hidden"><div data-headlessui-state=""><button type="button" class="relative flex w-5 align-middle text-ep-black outline-none dark:text-ep-white" aria-expanded="false" data-headlessui-state=""><span class="sr-only">Open navigation</span><svg class="h-5 w-5 stroke-current stroke-[1.5]" viewBox="0 0 24 24"><path></path><path></path><path></path></svg></button><div class="fixed inset-0 top-[calc(3rem-1px)] z-60 flex items-start overflow-y-auto backdrop-blur lg:hidden hidden"></div></div><div style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></div></div></div></header><div class="lg:hidden"><div class="flex flex-col items-start justify-center border-y border-ep-gray-light/50 bg-white pl-6 pt-3 text-xs dark:border-slate-50/25 dark:bg-transparent md:text-sm pb-3"><button class="flex text-ep-commerce-green dark:text-ep-commerce-green"><div><span>Creating an online store</span><span class="mx-1">/</span></div><div><span>Store Preview</span></div><span class="mx-2">&gt;</span></button></div></div></div><div class="relative mb-16 flex justify-center px-5 md:px-6 lg:mb-0 lg:px-10 xl:pl-[1.6875rem] xl:pr-[2.813rem] 2xl:px-[4.688rem] 2xl:pl-[4.1875rem]"><div class="hidden lg:block lg:flex-none"><div class="pB-16 lg:pB-[2.125rem] xl:pB-[3.125rem] sticky top-[4.5rem] h-[calc(100vh-4.5rem)] overflow-y-auto pl-0.5 lg:top-[7rem] lg:h-[calc(100vh-6.094rem)] xl:top-[8rem] xl:h-[calc(100vh-7.344rem)] 2xl:top-[8.188rem] 2xl:h-[calc(100vh-8.188rem)] 2xl:pb-[3.125rem]"><nav class="relative font-sans lg:text-base lg:leading-5 w-64 pr-8 lg:pr-4"><ul class="space-y-5"><li class="space-y-5"><div><div class="absolute left-1 top-4 h-0 w-4 border-t bg-slate-200" aria-hidden="true"></div><div class="absolute left-1 top-4 h-[calc(100%-1.6rem)] w-[1px] bg-slate-200" aria-hidden="true"></div></div><button class=" w-auto rounded-full bg-[#F2F3F4] px-2 text-black dark:bg-ep-commerce-light dark:text-ep-foundation group ml-5 flex cursor-auto items-center py-[6px] text-left text-sm font-bold uppercase">Creating an online store</button><ul class="space-y-5 overflow-hidden" style="opacity:1;height:auto;transform:none;transform-origin:50% 0% 0"><li class="flex items-center"><span class="mr-5 flex h-4 items-center" aria-hidden="true"><span class="z-10 rounded-full relative h-[0.5625rem] w-[0.5625rem] bg-ep-commerce-green-step-down dark:bg-ep-commerce-green"></span></span><a class="grid text-sm font-bold text-ep-commerce-green-step-down dark:text-ep-commerce-green" href="/learn/creating-an-online-store/store-preview">Store Preview</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dar
40k:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/getting-your-products">Getting products into the stores</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/show-product-details">Show product details</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/navigate-around-the-store">Navigate around the store</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/lets-get-some-sales">Let&#x27;s get some sales</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/process-customer-orders">Process customer orders</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/creating-an-online-store/complete">Try for free</a></li></ul></li><li class="space-y-5"><div><div class="absolute left-1 top-4 h-0 w-4 border-t bg-slate-200" aria-hidden="true"></div><div class="absolute left-1 top-4 h-[calc(100%-1.6rem)] w-[1px] bg-slate-200" aria-hidden="true"></div></div><button class=" text-gray-800 hover:text-gray-900 dark:text-slate-50 dark:hover:text-gray-200 group ml-5 flex cursor-auto items-center py-[6px] text-left text-sm font-bold uppercase">Power of the Catalog</button><ul class="space-y-5 overflow-hidden" style="opacity:1;height:auto;transform:none;transform-origin:50% 0% 0"><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/power-of-the-catalog/catalog-switching">Power of catalog switching</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/power-of-the-catalog/regional-currencies">Regional currencies</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dar
40k:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/power-of-the-catalog/group-pricing">Group pricing</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/power-of-the-catalog/mixed-navigation">Mixed Navigation</a></li><li class="flex items-center"><span class="mr-5 flex h-4 items-center ml-[1px]" aria-hidden="true"><span class="z-10 rounded-full h-[0.4375rem] w-[0.4375rem] bg-slate-200"></span></span><a class="grid text-sm text-gray-900 hover:text-zinc-900 hover:shadow-ep-black hover:text-shadow dark:text-slate-100 dark:hover:text-zinc-300 dark:hover:shadow-white" href="/learn/power-of-the-catalog/complete">Try for free</a></li></ul></li></ul></nav></div></div><div class="min-w-0 flex-auto py-4 lg:max-w-none lg:px-[1.6875rem] lg:py-[2.625rem] lg:pl-8 lg:pr-0 xl:py-[3.125rem] xl:pl-[1.625rem] xl:pr-2 2xl:pl-[2.0625rem] 2xl:pr-[4.6875rem]"><article><header class="mb-4 space-y-1"><h1 class="text-xl font-semibold dark:text-white lg:text-2xl xl:text-2.5xl">Creating an online store with Commerce</h1></header><div class="prose prose-slate max-w-none dark:prose-invert dark:text-slate-50 prose-p:mb-5 prose-p:mt-0 prose-p:text-base prose-p:text-ep-almost-black prose-ul:mb-5 prose-ol:ml-5 prose-ul:ml-5 prose-p:dark:text-slate-50 prose-h1:text-3xl prose-h1:font-semibold prose-h1:leading-[1.5rem] prose-h1:text-ep-almost-black prose-h2:text-xl prose-h2:font-semibold prose-h2:leading-[.9rem] prose-h2:text-ep-almost-black prose-h3:text-lg prose-h3:font-semibold prose-h3:leading-[1.125rem] prose-h3:text-ep-almost-black prose-h4:text-base prose-h4:font-semibold prose-h4:leading-4 prose-h4:text-ep-almost-black prose-h1:dark:text-slate-50 prose-h2:dark:text-slate-50 prose-h3:dark:text-slate-50 prose-h4:dark:text-slate-50 lg:prose-h1:text-[1.75rem] lg:prose-h1:leading-[1.75rem] lg:prose-h2:text-2xl lg:prose-h2:leading-6 lg:prose-h4:text-lg lg:prose-h4:leading-[1.125rem]  prose-p:text-ep-almost-black 2xl:prose-h1:text-4xl 2xl:prose-h1:font-semibold 2xl:prose-h2:text-2xl 2xl:prose-h2:font-semibold 2xl:prose-h3:text-lg 2xl:prose-h3:font-semibold 2xl:prose-h4:text-xl 2xl:prose-h4:font-medium prose-headings:scroll-mt-28 lg:prose-headings:scroll-mt-[8.5rem] prose-lead:text-slate-500 dark:prose-lead:text-slate-400 prose-a:font-bold prose-a:text-ep-commerce-green-step-down dark:prose-a:text-ep-commerce-green prose-pre:my-0 prose-pre:rounded-xl prose-pre:bg-slate-900 dark:prose-pre:bg-darkmode-alt-black dark:prose-hr:border-slate-800 dark:prose-strong:text-slate-200 prose-li:text-base prose-li:marker:text-ep-commerce-green-step-down prose-li:marker:dark:text-ep-commerce-green prose-code:whitespace prose-code:dark:bg-[#475569] prose-code:prose-a:dark:text-white"><div class="mb-5 inline-flex items-center gap-2 text-[0.75rem] uppercase"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>10 minutes<!-- --> to complete</div><p>These hands-on and interactive tutorials help develop your knowledge and experience with Commerce. These tutorials use the <a href="https://github.com/moltin/js-sdk">JavaScript SDK</a> (JS-SDK) to solve common use cases in a few easy steps. Once you have your own store you can even do these tutorials using the products, pricebooks and configurations you create. All you&#x27;ll need to know is a little JavaScript to start.</p><p>First, let&#x27;s start you off by setting up a generic store. This is not just a mock store, but one that is against a real Elastic Path store instance!</p><a class="no-underline" href="/learn/creating-an-online-store/store-preview#store-preview"><h2 id="store-preview" class="after:content-linkIcon after:pl-3 after:opacity-0 after:transition-opacity hover:after:opacity-100">Store Preview</h2></a><p>This store is going to show off all the foundational features of what you need in an online store. With Commerce these are all quick and easy:</p><ul><li>Display all your products</li><li>Create a product details page</li><li>
40Produce product categories using <a href="/docs/pxm/hierarchies/hierarchies">hierarchies and nodes</a></li><li>Manage items in your cart, even</li><li>Perform a checkout!</li></ul><p>This will lay the groundwork for understanding the unique features that make up Commerce, providing you the perfect balance of flexibility without sacrificing performance.</p><p><strong>Here&#x27;s the store you&#x27;ll be building:</strong></p><iframe src="https://ep-plg-example-store.netlify.app" class="mt-1 mb-11 w-full rounded-lg border border-ep-black shadow-lg" style="height:600px"></iframe><p>Use the buttons below to navigate forwards and backwards in the tutorial.</p></div></article><dl class="mt-5 gap-2 pt-6 sm:flex sm:justify-end"><div><dd class="mt-1 inline-block w-full "><a class="primary-btn inline-flex w-full items-center justify-center rounded-md" href="/learn/creating-an-online-store/getting-your-products">Next lesson</a></dd></div></dl></div></div></div>
40<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"markdoc":{"content":[{"$$mdtype":"Tag","name":"GuideTime","attributes":{"seconds":600},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These hands-on and interactive tutorials help develop your knowledge and experience with Commerce. These tutorials use the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://github.com/moltin/js-sdk"},"children":["JavaScript SDK"]}," (JS-SDK) to solve common use cases in a few easy steps. Once you have your own store you can even do these tutorials using the products, pricebooks and configurations you create. All you'll need to know is a little JavaScript to start."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["First, let's start you off by setting up a generic store. This is not just a mock store, but one that is against a real Elastic Path store instance!"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"store-preview"},"children":["Store Preview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This store is going to show off all the foundational features of what you need in an online store. With Commerce these are all quick and easy:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display all your products"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a product details page"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Produce product categories using ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/pxm/hierarchies/hierarchies"},"children":["hierarchies and nodes"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Manage items in your cart, even"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Perform a checkout!"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This will lay the groundwork for understanding the unique features that make up Commerce, providing you the perfect balance of flexibility without sacrificing performance."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Here's the store you'll be building:"]}]},{"$$mdtype":"Tag","name":"StorePreview","attributes":{"height":600},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the buttons below to navigate forwards and backwards in the tutorial."]}],"frontmatter":{"title":"Creating an online store with Commerce","description":"Preview the store you will create as part of learning Commerce"},"file":{"path":"/learn/creating-an-online-store/store-preview.md"}}},"__N_SSG":true},"page":"/learn/creating-an-online-store/store-preview","query":{},"buildId":"i4Vkrw8_TCDxp4lBsiDWB","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
vendor: 1 bytes, line 40
40
41<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="8a3c2337-dce8-424b-a6e4-4fd4c5cdbf69" data-netlify-deploy-branch="" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiOGEzYzIzMzctZGNlOC00MjRiLWE2ZTQtNGZkNGM1Y2RiZjY5IiwiYWNjb3VudF9pZCI6IjVjNTNmYmY1Mjg2OTc4Y2Y4MWY0YjcwOSIsImRlcGxveV9pZCI6IjY2NzFiNTBiNzY5YWRhMGI1NDU4ZTA5MSIsImlzc3VlciI6Im5mc2VydmVyIn0.Xe4EEQTEt6NiQ3FvS7isbonl93DN84Ks5yGUw0fxO7I"></script>
41
42</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.