CINXE.COM

<!DOCTYPE html><html lang="en"><head><title>Shopify’s platform is the Web platform (2023) - Shopify</title><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="description" content="Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills."/><meta property="fb:pages" content="20409006880"/><meta property="fb:app_id" content="847460188612391"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Shopify"/><meta property="og:title" content="Shopify’s platform is the Web platform (2023) - Shopify"/><meta property="og:description" content="Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills."/><meta property="og:image" content="https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786"/><meta property="twitter:image" content="https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786"/><meta property="og:url" content="https://shopify.engineering/shopifys-platform-is-the-web-platform"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:site" content="Shopify"/><meta property="twitter:account_id" content="17136315"/><meta property="twitter:title" content="Shopify’s platform is the Web platform (2023) - Shopify"/><meta property="twitter:description" content="Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills."/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--medium.woff2"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--bold.woff2"/><link rel="preload" as="font" crossorigin="anonymous" type="font/woff2" href="https://cdn.shopify.com/static/fonts/ShopifySans--extrabold.woff2"/><link rel="stylesheet" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/blog-TmMMQoVD.css"/><link rel="icon" href="https://cdn.shopify.com/shopifycloud/web/assets/v1/favicon-default-6cbad9de243dbae3.ico" type="image/x-icon"/><link rel="apple-touch-icon" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="120x120" href="https://cdn.shopify.com/b/shopify-brochure2-assets/c97c60ca19c64a8b5378d9f9e971f7bd.png"/><link rel="apple-touch-icon" sizes="114x114" href="https://cdn.shopify.com/b/shopify-brochure2-assets/b13486e5693b246af63c66ab047a6b6b.png"/><link rel="apple-touch-icon" sizes="72x72" href="https://cdn.shopify.com/b/shopify-brochure2-assets/8734d76c98437c8ae8a628bbeed3750a.png"/><link rel="apple-touch-icon" sizes="57x57" href="https://cdn.shopify.com/b/shopify-brochure2-assets/193f18e4855704ef1716dc0cd750c1ee.png"/><link rel="canonical" href="https://shopify.engineering/shopifys-platform-is-the-web-platform"/><link href="https://cdn.shopify.com" rel="preconnect"/><link href="https://gtm.shopify.com" rel="preconnect"/><link href="https://www.googletagmanager.com" rel="preconnect"/><link href="https://shopify.engineering/shopifys-platform-is-the-web-platform" hrefLang="en" rel="alternate"/></head><body class="overscroll-y-none"><div class="absolute top-2 left-2 z-[100] pointer-events-none"><a href="#main" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-dark-primary-text bg-button-dark-primary-bg border-button-dark-primary-border ring-button-dark-primary-border hover:text-button-dark-primary-text-hover hover:bg-button-dark-primary-bg-hover hover:border-button-dark-primary-border-hover hover:ring-button-dark-primary-border-hover focus:text-button-dark-primary-text-focus focus:bg-button-dark-primary-bg-focus focus:border-button-dark-primary-border-focus focus:ring-button-dark-primary-border-focus active:text-button-dark-primary-text-active active:bg-button-dark-primary-bg-active active:border-button-dark-primary-border-active active:ring-button-dark-primary-border-active disabled:text-button-dark-primary-text-disabled disabled:bg-button-dark-primary-bg-disabled disabled:border-button-dark-primary-border-disabled disabled:ring-button-dark-primary-border-disabled transition-transform duration-300 translate-y-[-200%] motion-reduce:transition-none focus:translate-y-0" data-component-name="button" data-mode="dark" target="">Skip to Content</a></div><div class="relative bg-engineering-dark-bg text-engineering-dark-text [&_.app-signup-links]:hidden"><div class="bg-enginneering-dark bg-top bg-auto bg-no-repeat"><header class="font-shopifysans absolute h-full w-full pointer-events-none z-50 overflow-x-clip" data-component-name="global-nav" data-viewable-component="true" data-has-secondary-navigation="true"><div class="after:absolute after:top-0 after:left-0 after:will-change-[opacity] after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 w-full z-50 after:bg-black text-white after:opacity-0 -top-global-header pointer-events-auto sticky"><div class="h-global-header px-margin xl:px-auto-xl flex items-center z-20 relative"><div class="lg:w-[125px] mr-12 w-[98px] shrink-0"><a href="https://www.shopify.com" data-component-name="logo-home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 608 173.7" role="img"><title>Shopify</title><path fill="#95BF47" d="M130.7 32.9c-.1-.9-.9-1.3-1.5-1.4-.6-.1-12.6-.2-12.6-.2s-10.1-9.8-11.1-10.8-2.9-.7-3.7-.5c0 0-1.9.6-5.1 1.6-.5-1.7-1.3-3.8-2.4-5.9-3.6-6.9-8.8-10.5-15.2-10.5-.4 0-.9 0-1.3.1-.2-.2-.4-.4-.6-.7-2.8-3-6.3-4.4-10.5-4.3-8.2.2-16.3 6.1-23 16.7-4.7 7.4-8.2 16.7-9.2 23.9-9.4 2.9-16 4.9-16.1 5-4.7 1.5-4.9 1.6-5.5 6.1C12.4 55.3 0 151.4 0 151.4l104.1 18 45.1-11.2S130.8 33.7 130.7 32.9zm-39.2-9.7c-2.4.7-5.1 1.6-8.1 2.5-.1-4.1-.6-9.9-2.5-14.9 6.3 1.2 9.3 8.2 10.6 12.4zM78 27.4c-5.5 1.7-11.4 3.5-17.4 5.4 1.7-6.4 4.9-12.8 8.8-17 1.5-1.6 3.5-3.3 5.9-4.3 2.3 4.7 2.7 11.4 2.7 15.9zM66.8 5.8c1.9 0 3.5.4 4.9 1.3-2.2 1.1-4.4 2.8-6.4 5-5.2 5.6-9.2 14.2-10.8 22.6-5 1.5-9.8 3-14.3 4.4 3-13.2 14-32.9 26.6-33.3z"></path><path fill="#5E8E3E" d="M129.2 31.5c-.6-.1-12.6-.2-12.6-.2s-10.1-9.8-11.1-10.8c-.4-.4-.9-.6-1.4-.6v149.5l45.1-11.2S130.8 33.8 130.7 32.9c-.2-.9-.9-1.3-1.5-1.4z"></path><path fill="#FFF" d="M79.1 54.7l-5.2 19.6s-5.8-2.7-12.8-2.2c-10.2.6-10.3 7-10.2 8.7.6 8.8 23.6 10.7 24.9 31.2 1 16.2-8.6 27.2-22.4 28.1-16.6 1-25.7-8.7-25.7-8.7l3.5-14.9s9.2 6.9 16.5 6.5c4.8-.3 6.5-4.2 6.3-7-.7-11.4-19.5-10.8-20.7-29.5-1-15.8 9.4-31.8 32.3-33.3 9-.8 13.5 1.5 13.5 1.5z"></path><path fill="#FFF" d="M210.3 96.5c-5.2-2.8-7.9-5.2-7.9-8.5 0-4.2 3.7-6.9 9.6-6.9 6.8 0 12.8 2.8 12.8 2.8l4.8-14.6s-4.4-3.4-17.3-3.4c-18 0-30.5 10.3-30.5 24.8 0 8.2 5.8 14.5 13.6 19 6.3 3.6 8.5 6.1 8.5 9.9 0 3.9-3.1 7-9 7-8.7 0-16.9-4.5-16.9-4.5l-5.1 14.6s7.6 5.1 20.3 5.1c18.5 0 31.8-9.1 31.8-25.5.1-8.9-6.6-15.2-14.7-19.8zm73.8-30.8c-9.1 0-16.3 4.3-21.8 10.9l-.3-.1 7.9-41.4h-20.6l-20 105.3h20.6l6.9-36c2.7-13.6 9.7-22 16.3-22 4.6 0 6.4 3.1 6.4 7.6 0 2.8-.3 6.3-.9 9.1l-7.8 41.2h20.6l8.1-42.6c.9-4.5 1.5-9.9 1.5-13.4 0-11.5-6.2-18.6-16.9-18.6zm63.5 0c-24.8 0-41.2 22.4-41.2 47.4 0 16 9.9 28.8 28.4 28.8 24.3 0 40.8-21.8 40.8-47.4-.1-14.7-8.8-28.8-28-28.8zm-10.2 60.4c-7 0-10-6-10-13.4 0-11.8 6.1-31.1 17.3-31.1 7.3 0 9.7 6.3 9.7 12.4 0 12.7-6.1 32.1-17 32.1zm90.8-60.4c-13.9 0-21.8 12.2-21.8 12.2h-.3l1.2-11.1h-18.2c-.9 7.5-2.5 18.8-4.2 27.3l-14.3 75.4h20.6l5.7-30.5h.4s4.2 2.7 12.1 2.7c24.2 0 40-24.8 40-49.9.1-13.7-6.1-26.1-21.2-26.1zm-19.7 60.7c-5.4 0-8.5-3-8.5-3l3.4-19.3c2.4-12.8 9.1-21.4 16.3-21.4 6.3 0 8.2 5.8 8.2 11.4 0 13.3-7.9 32.3-19.4 32.3zm70.4-90.2c-6.6 0-11.8 5.2-11.8 12 0 6.1 3.9 10.3 9.7 10.3h.3c6.4 0 12-4.3 12.1-12 0-6-4-10.3-10.3-10.3zm-28.8 104.2h20.6l14-73h-20.8zm87-73.2h-14.3l.7-3.4c1.2-7 5.4-13.3 12.2-13.3 3.7 0 6.6 1 6.6 1l4-16.1s-3.6-1.8-11.2-1.8c-7.3 0-14.6 2.1-20.2 6.9-7 6-10.3 14.6-12 23.3l-.6 3.4h-9.6l-3 15.5h9.6l-10.9 57.7H509l10.9-57.7h14.2l3-15.5zm49.6.2s-12.9 32.5-18.7 50.2h-.3c-.4-5.7-5.1-50.2-5.1-50.2H541l12.4 67.1c.3 1.5.1 2.4-.4 3.4-2.4 4.6-6.4 9.1-11.2 12.4-3.9 2.8-8.2 4.6-11.7 5.8l5.7 17.5c4.2-.9 12.8-4.3 20.2-11.2 9.4-8.8 18.1-22.4 27-40.9l25.2-54.1h-21.5z"></path></svg></a></div><nav class="lg:flex hidden h-full" aria-label="Main" itemscope="" itemType="https://schema.org/SiteNavigationElement" data-click-outside="dismiss" data-component-name="desktop-main-navigation" data-viewable-component="true"><ul class="flex h-full"><li class="mr-8 text-base"><div class="relative flex h-full after:content[""] after:block after:h-[3px] after:w-full after:absolute after:bottom-0 after:scale-0 after:origin-left after:transition-transform after:duration-[350ms] after:ease-[bezier(0.66, 0.66, 0.34, 1.00)] after:motion-reduce:transition-none hover:underline after:bg-white text-white"><button type="button" class="bg-transparent whitespace-nowrap" data-component-name="Solutions-toggle-open" aria-controls="SolutionsDesktopMenu" aria-expanded="false" aria-haspopup="true"><span class="mr-3">Solutions</span><div aria-hidden="true" class="relative inline-block h-[7px] w-3 cursor-pointer"><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -translate-x-[3px] rotate-[135deg]"></div><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -rotate-[135deg]"></div></div></button></div><div id="SolutionsDesktopMenu" class="absolute inset-x-0 top-global-header z-[21] transition-transform duration-[452ms] ease-[cubic-bezier(0.26,1.00,0.48,1.00)] motion-reduce:transition-none before:absolute before:inset-x-0 before:top-0 before:w-full before:h-full before:left-0 before:shadow-xl before:pointer-events-none before:z-10 bg-black text-white opacity-0 pointer-events-none -translate-y-[10px]"><div class="relative no-scrollbar overflow-y-auto overflow-x-clip max-h-[calc(100vh-72px)] z-20 pb-28"><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-gutter gap-y-0"><div class="col-span-3 col-start-1 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)"><path d="M19 21.5v-3h-2.5v1a1 1 0 0 1-1 1H14a1 1 0 0 1-1-1V14a1 1 0 0 1 1-1h1.5a1 1 0 0 1 1 1v1h6.75s4.25 0 4.25 4.5c0 0-2.25-1-5-1v3m-3.5 0h3.5m-3.5 0v6m3.5-6v6M39.25 20c0 10.631-8.619 19.25-19.25 19.25S.75 30.631.75 20 9.369.75 20 .75 39.25 9.369 39.25 20Z" stroke="url(#start_svg__b)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span><span id="subNavItem-Start" class="font-bold text-t7 inline-block text-white">Start</span></div><ul class="pb-2" aria-labelledby="subNavItem-Start"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/start" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Start your business<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Build your brand</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/website/builder" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Create your website<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Online store editor</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://themes.shopify.com/" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Customize your store<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Store themes</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://apps.shopify.com/" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Find business apps<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Shopify app store</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/domains" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Own your site domain<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Domains & hosting</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/tools" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Explore free business tools<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Tools to run your business</div></a></li></ul></div><div class="col-span-3 col-start-4 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)"><path d="M12.75 21.5v4c0 .966 2.35 1.75 5.25 1.75s5.25-.784 5.25-1.75v-4m4-7c0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75m10.5 0c0-.966-2.35-1.75-5.25-1.75s-5.25.784-5.25 1.75m10.5 0v4.25c0 .46-.533.88-1.405 1.192M16.75 14.5V17m6.5 4.25c0 .966-2.35 1.75-5.25 1.75s-5.25-.784-5.25-1.75S15.1 19.5 18 19.5s5.25.784 5.25 1.75Zm16-1.25c0 10.631-8.619 19.25-19.25 19.25S.75 30.631.75 20 9.369.75 20 .75 39.25 9.369 39.25 20Z" stroke="url(#sell_svg__a)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span><span id="subNavItem-Sell" class="font-bold text-t7 inline-block text-white">Sell</span></div><ul class="pb-2" aria-labelledby="subNavItem-Sell"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/sell" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Sell your products<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Sell online or in person</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/checkout" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Check out customers<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">World-class checkout</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/online" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Sell online<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Grow your business online</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/channels" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Sell across channels<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Reach millions of shoppers and boost sales</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/international" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Sell globally<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">International sales</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/plus/solutions/b2b-ecommerce" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Sell wholesale & direct<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Business-to-business (B2B)</div></a></li></ul></div><div class="col-span-3 col-start-7 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)"><path d="m12.75 19.25 5.5-5.5m1 2.5v-3.5h-3.5m-2 14.5h.5a1 1 0 0 0 1-1v-2.5a1 1 0 0 0-1-1h-.5a1 1 0 0 0-1 1v2.5a1 1 0 0 0 1 1Zm6 0h.5a1 1 0 0 0 1-1v-5.5a1 1 0 0 0-1-1h-.5a1 1 0 0 0-1 1v5.5a1 1 0 0 0 1 1Zm6 0h.5a1 1 0 0 0 1-1v-12.5a1 1 0 0 0-1-1h-.5a1 1 0 0 0-1 1v12.5a1 1 0 0 0 1 1ZM39.25 20c0 10.631-8.619 19.25-19.25 19.25S.75 30.631.75 20 9.369.75 20 .75 39.25 9.369 39.25 20Z" stroke="url(#market_svg__a)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span><span id="subNavItem-Market" class="font-bold text-t7 inline-block text-white">Market</span></div><ul class="pb-2" aria-labelledby="subNavItem-Market"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/market" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Market your business<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Reach & retain customers</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/facebook-instagram" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Market across social<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Social media integrations</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/inbox" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Chat with customers<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Shopify Inbox</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/email-marketing" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Nurture customers<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Shopify Email</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/segmentation" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Know your audience<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Gain customer insights</div></a></li></ul></div><div class="col-span-3 col-start-10 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)"><path d="M12.75 15.75c0 1.243.75 2.5 2.25 2.5s2.5-1.257 2.5-2.5c0 1.243 1 2.5 2.5 2.5s2.5-1.257 2.5-2.5c0 1.243 1 2.5 2.5 2.5s2.25-1.257 2.25-2.5m-12.5 11.5h10.5a2 2 0 0 0 2-2v-9.067a2 2 0 0 0-.179-.827l-.538-1.184A2 2 0 0 0 24.713 13h-9.425a2 2 0 0 0-1.82 1.172l-.538 1.184a2 2 0 0 0-.18.827v9.067a2 2 0 0 0 2 2Zm3-3.5a2 2 0 0 1 2-2h.5a2 2 0 0 1 2 2v3.5h-4.5v-3.5ZM39.25 20c0 10.631-8.619 19.25-19.25 19.25S.75 30.631.75 20 9.369.75 20 .75 39.25 9.369 39.25 20Z" stroke="url(#manage_svg__a)" stroke-width="1.5" stroke-linecap="round"></path></g></svg></span><span id="subNavItem-Manage" class="font-bold text-t7 inline-block text-white">Manage</span></div><ul class="pb-2" aria-labelledby="subNavItem-Manage"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/manage" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Manage your business<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Track sales, orders & analytics</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/analytics" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Measure your performance<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Analytics and Reporting</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/orders" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Manage your stock & orders<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Inventory & order management</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/flow" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Automate your business<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Shopify Flow</div></a></li></ul></div></div></div><div class="absolute bottom-0 inset-x-0 overflow-hidden z-20"><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-gutter gap-y-0"><div class="col-span-12 col-start-1 scheme-white:bg-shade-10 scheme-transparent-light:bg-shade-10 scheme-black:bg-shade-90 scheme-transparent-dark:bg-shade-90 relative after:absolute after:left-full after:top-[-1px] after:w-[100vw] after:h-[calc(100%+1px)] scheme-white:after:bg-shade-10 scheme-transparent-light:after:bg-shade-10 scheme-black:after:bg-shade-90 scheme-transparent-dark:after:bg-shade-90 scheme-black:text-white scheme-transparent-dark:text-white -ml-[var(--margin)] -mt-8 md:mt-0 pl-[var(--margin)] pt-6 before:content-[''] before:absolute before:right-full before:top-[-1px] before:w-[100vw] before:h-[calc(100%+1px)] scheme-white:before:bg-shade-10 scheme-transparent-light:before:bg-shade-10 scheme-black:before:bg-shade-90 scheme-transparent-dark:before:bg-shade-90 border-t scheme-white:border-shade-20 scheme-transparent-light:border-shade-20 scheme-black:border-shade-70 scheme-transparent-dark:border-shade-70 before:border-t scheme-white:before:border-shade-20 scheme-transparent-light:before:border-shade-20 scheme-black:before:border-shade-70 scheme-transparent-dark:before:border-shade-70 after:border-t scheme-white:after:border-shade-20 scheme-transparent-light:after:border-shade-20 scheme-black:after:border-shade-70 scheme-transparent-dark:after:border-shade-70 text-black -translate-y-[30px]" data-background="transparent_dark"><ul class="grid grid-cols-12 gap-x-gutter gap-y-0 pb-0"><li class="flex mb-6 pr-4 border-r border-shade-30 last:border-0 col-span-3"><a class="group inline-block w-full text-white hover:text-white" href="https://shopify.dev" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Shopify Developers<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Build with Shopify's powerful APIs</div></a></li><li class="flex mb-6 pr-4 border-r border-shade-30 last:border-0 col-span-3"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/plus" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Plus<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">A commerce solution for growing digital brands</div></a></li><li class="flex mb-6 pr-4 border-r border-shade-30 last:border-0 col-span-3"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/products" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">All Products<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Explore all Shopify products & features</div></a></li></ul></div></div></div></div></li><li class="mr-8 text-base"><div class="flex h-full"><a class="flex items-center hover:underline text-white hover:text-white" href="https://www.shopify.com/pricing" aria-label="">Pricing</a></div></li><li class="mr-8 text-base"><div class="relative flex h-full after:content[""] after:block after:h-[3px] after:w-full after:absolute after:bottom-0 after:scale-0 after:origin-left after:transition-transform after:duration-[350ms] after:ease-[bezier(0.66, 0.66, 0.34, 1.00)] after:motion-reduce:transition-none hover:underline after:bg-white text-white"><button type="button" class="bg-transparent whitespace-nowrap" data-component-name="Resources-toggle-open" aria-controls="ResourcesDesktopMenu" aria-expanded="false" aria-haspopup="true"><span class="mr-3">Resources</span><div aria-hidden="true" class="relative inline-block h-[7px] w-3 cursor-pointer"><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -translate-x-[3px] rotate-[135deg]"></div><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -rotate-[135deg]"></div></div></button></div><div id="ResourcesDesktopMenu" class="absolute inset-x-0 top-global-header z-[21] transition-transform duration-[452ms] ease-[cubic-bezier(0.26,1.00,0.48,1.00)] motion-reduce:transition-none before:absolute before:inset-x-0 before:top-0 before:w-full before:h-full before:left-0 before:shadow-xl before:pointer-events-none before:z-10 bg-black text-white opacity-0 pointer-events-none -translate-y-[10px]"><div class="relative no-scrollbar overflow-y-auto overflow-x-clip max-h-[calc(100vh-72px)] z-20"><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-gutter gap-y-0"><div class="col-span-3 col-start-1 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#help-and-support_svg__a)"><circle cx="20" cy="20" r="19.25" stroke="currentColor" stroke-width="1.5"></circle><path d="M20 20v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20 16.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" fill="currentColor"></path></g></svg></span><span id="subNavItem-Help and support" class="font-bold text-t7 inline-block text-white">Help and support</span></div><ul class="pb-2" aria-labelledby="subNavItem-Help and support"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://help.shopify.com/en/" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Help and support<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Get 24/7 support</div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://academy.shopify.com" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Business courses<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Learn from proven experts</div></a></li></ul></div><div class="col-span-6 col-start-4 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)" stroke="currentColor" stroke-width="1.5"><circle cx="20" cy="20" r="19.25"></circle><path d="m22.023 15.04 3 3M12.75 27.25l4.25-1 9.95-9.95a1 1 0 0 0 0-1.413l-1.837-1.836a1 1 0 0 0-1.414 0L13.75 23l-1 4.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg></span><span id="subNavItem-Popular topics" class="font-bold text-t7 inline-block text-white">Popular topics</span></div><ul class="pb-2 columns-2" aria-labelledby="subNavItem-Popular topics"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/blog/what-is-shopify" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">What is Shopify?<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">How our commerce platform works</div></a></li></ul></div><div class="col-span-3 col-start-10 pt-8 scheme-white:bg-shade-10 scheme-transparent-light:bg-shade-10 scheme-black:bg-shade-90 scheme-transparent-dark:bg-shade-90 pl-10 relative after:absolute after:left-full after:top-[-1px] after:w-[100vw] after:h-[calc(100%+1px)] scheme-white:after:bg-shade-10 scheme-transparent-light:after:bg-shade-10 scheme-black:after:bg-shade-90 scheme-transparent-dark:after:bg-shade-90 scheme-black:text-white scheme-transparent-dark:text-white border-l scheme-white:border-shade-20 scheme-transparent-light:border-shade-20 scheme-black:border-shade-70 scheme-transparent-dark:border-shade-70 text-black -translate-y-[30px]" data-background="transparent_dark"><div class="flex items-center border-shade-30 mb-6 border-b pb-4 text-lg font-bold border-shade-70"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="40" height="40" fill="none"><g clip-path="url(#white_circle_svg__a)" stroke="currentColor" stroke-width="1.5"><circle cx="20" cy="20" r="19.25"></circle><path d="M16.75 16.75v-2a2 2 0 0 1 2-2h2.5a2 2 0 0 1 2 2v2m-2 4v1.5a1 1 0 0 1-1 1h-.5a1 1 0 0 1-1-1v-1.5m2.5 0a1 1 0 0 0-1-1h-.5a1 1 0 0 0-1 1m2.5 0h6m-8.5 0h-6m2 6.5h10.5a2 2 0 0 0 2-2v-6.5a2 2 0 0 0-2-2h-10.5a2 2 0 0 0-2 2v6.5a2 2 0 0 0 2 2Z"></path></g></svg></span><span id="subNavItem-Essential tools" class="font-bold text-t7 inline-block text-white">Essential tools</span></div><ul class="pb-2" aria-labelledby="subNavItem-Essential tools"><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/tools/business-name-generator" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Business name generator<span class="sr-only">.</span></span></div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/tools/logo-maker" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Logo maker<span class="sr-only">.</span></span></div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/stock-photos" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Stock photography<span class="sr-only">.</span></span></div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.linkpop.com/" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Link in bio tool<span class="sr-only">.</span></span></div></a></li><li class="flex mb-6 pr-4"><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/tools/qr-code-generator" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">QR code generator<span class="sr-only">.</span></span></div></a></li></ul></div></div></div></div></li><li class="mr-8 text-base"><div class="relative flex h-full after:content[""] after:block after:h-[3px] after:w-full after:absolute after:bottom-0 after:scale-0 after:origin-left after:transition-transform after:duration-[350ms] after:ease-[bezier(0.66, 0.66, 0.34, 1.00)] after:motion-reduce:transition-none hover:underline after:bg-white text-white"><button type="button" class="bg-transparent whitespace-nowrap" data-component-name="What's new-toggle-open" aria-controls="What's newDesktopMenu" aria-expanded="false" aria-haspopup="true"><span class="mr-3">What's new</span><div aria-hidden="true" class="relative inline-block h-[7px] w-3 cursor-pointer"><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -translate-x-[3px] rotate-[135deg]"></div><div class="inline-block rounded border-b-8 h-2 w-[2px] origin-center transition-all ease-[bezier(0.66, 0.66, 0.34, 1.00)] duration-[350ms] motion-reduce:transition-none border-white bg-white -rotate-[135deg]"></div></div></button></div><div id="What's newDesktopMenu" class="absolute inset-x-0 top-global-header z-[21] transition-transform duration-[452ms] ease-[cubic-bezier(0.26,1.00,0.48,1.00)] motion-reduce:transition-none before:absolute before:inset-x-0 before:top-0 before:w-full before:h-full before:left-0 before:shadow-xl before:pointer-events-none before:z-10 bg-black text-white opacity-0 pointer-events-none -translate-y-[10px]"><div class="relative no-scrollbar overflow-y-auto overflow-x-clip max-h-[calc(100vh-72px)] z-20"><div class="container grid grid-cols-4 sm:grid-cols-8 md:grid-cols-12 gap-x-gutter gap-y-0"><div class="col-span-12 col-start-1 pt-8 text-white -translate-y-[30px]" data-background="transparent_dark"><ul class="grid grid-cols-12 gap-x-gutter gap-y-0 pb-0"><li class="flex mb-6 pr-4 border-r border-shade-30 last:border-0 col-span-3"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="41" height="42" viewBox="0 0 41 42" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_213_1921)"><path d="M39.5 21C39.5 31.6315 30.8815 40.25 20.25 40.25C9.61852 40.25 1 31.6315 1 21C1 10.3685 9.61852 1.75 20.25 1.75C30.8815 1.75 39.5 10.3685 39.5 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><rect x="13" y="14" width="15" height="14" rx="2" stroke="currentColor" stroke-width="1.5"></rect><path d="M25 24L19 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M25 21L19 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M25 18L19 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M17 18L16 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M17 21L16 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M17 24L16 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></g><defs><clipPath id="clip0_213_1921"><rect width="40.5" height="40.5" fill="white" transform="translate(0 0.75)"></rect></clipPath></defs></svg></span><a class="group inline-block w-full text-white hover:text-white" href="https://changelog.shopify.com" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Changelog<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">Your source for recent updates</div></a></li><li class="flex mb-6 pr-4 border-r border-shade-30 last:border-0 col-span-3"><span aria-hidden="true" class="-ml-2 lg:ml-0 mr-3 md:mr-3 inline-block h-10 w-10"><svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.25 21C40.25 31.6315 31.6315 40.25 21 40.25C10.3685 40.25 1.75 31.6315 1.75 21C1.75 10.3685 10.3685 1.75 21 1.75C31.6315 1.75 40.25 10.3685 40.25 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.341 24.6079L18.8363 26.9574" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M26.9609 14.7523C28.2811 15.4085 29.324 16.6069 29.7356 18.1429C30.1472 19.679 29.8432 21.2382 29.028 22.4667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M26.9769 20.7052C27.2556 20.1447 27.3388 19.4842 27.164 18.832C26.9893 18.1799 26.587 17.6495 26.0654 17.3034" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path d="M14.5357 20.5604C14.4233 20.1409 14.5945 19.6968 14.9595 19.4613L21.4187 15.2941C21.9885 14.9265 22.7512 15.2206 22.9267 15.8756L24.9726 23.5109C25.1481 24.1659 24.6346 24.802 23.9574 24.7685L16.2799 24.3892C15.8461 24.3678 15.4758 24.0688 15.3633 23.6493L14.5357 20.5604Z" stroke="currentColor" stroke-width="1.5"></path><path d="M12.0335 21.5081L12.7226 24.0796" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg></span><a class="group inline-block w-full text-white hover:text-white" href="https://www.shopify.com/news" aria-label=""><div class="text-base font-medium"><span class="inline-block arrow-animation">Newsroom<span class="sr-only">.</span></span></div><div class="text-sm text-shade-30 group-hover:text-white">All company news and press releases</div></a></li></ul></div></div></div></div></li></ul></nav><div class="ml-auto transition-opacity duration-200 opacity-100 delay-100"><ul class="flex items-center lg:hidden mr-[-15px]"><li><button class="flex h-12 w-12 cursor-pointer select-none flex-col items-center justify-center gap-1" aria-label="Menu" aria-expanded="false" aria-controls="MobileDrawer" aria-haspopup="true" type="button" data-component-name="navigation-toggle-open"><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-white"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-white"></div><div class="h-0.5 w-[1.125rem] transition-all ease-out-in duration-500 motion-reduce:transition-none bg-white"></div></button></li></ul></div></div></div><div class="top-0 w-full z-20 before:absolute before:top-0 before:left-0 before:pointer-events-none before:w-full before:h-global-header-with-border before:z-20 after:absolute after:top-0 after:left-0 after:will-change-[opacity] after:pointer-events-none after:h-full after:w-full after:z-10 after:transition-opacity after:duration-200 after:bg-black text-white before:border-y before:border-white/20 after:opacity-0 pointer-events-auto before:opacity-0 sticky"><div class="h-global-header container flex items-center relative z-20"><div data-component-name="secondary-navigation" class="flex items-center gap-x-8 w-full h-14 sm:h-global-header text-white"><a class="absolute left-0 top-1/2 -translate-y-1/2 transform-opacity will-change-opacity duration-200 z-20 opacity-0 pointer-events-none" href="/" data-component-name="logo-home"><svg viewBox="0 0 32 36" role="img" aria-labelledby="ShoppingBagOnlyLogoTitle" class="w-8 h-9"><title id="ShoppingBagOnlyLogoTitle">Shopify</title><path fill="#95BF47" d="M27.1851 6.83166C27.1598 6.65519 27.0079 6.55435 26.8813 6.55435C26.7548 6.55435 24.2489 6.50393 24.2489 6.50393C24.2489 6.50393 22.148 4.48717 21.9455 4.26028C21.743 4.0586 21.338 4.10902 21.1861 4.15944C21.1861 4.15944 20.7812 4.28549 20.123 4.48717C20.0218 4.13423 19.8446 3.70567 19.6168 3.2519C18.8828 1.84016 17.769 1.08387 16.4528 1.08387C16.3516 1.08387 16.2756 1.08387 16.1744 1.10908C16.1237 1.05866 16.0984 1.00824 16.0478 0.983034C15.4656 0.378004 14.7316 0.0754894 13.8457 0.100699C12.1498 0.151118 10.4539 1.38639 9.0617 3.55441C8.09984 5.0922 7.36579 7.00813 7.13798 8.49549C5.18896 9.10052 3.82211 9.52908 3.77149 9.52908C2.78432 9.8316 2.75901 9.85681 2.63245 10.7896C2.58182 11.4954 0 31.3858 0 31.3858L21.6671 35.1168L31.0578 32.7975C31.0325 32.7975 27.2104 7.00813 27.1851 6.83166ZM19.0346 4.8401C18.5284 4.99136 17.9715 5.16783 17.364 5.3695C17.364 4.51238 17.2375 3.30232 16.8578 2.29393C18.1487 2.49561 18.7815 3.95777 19.0346 4.8401ZM16.225 5.69723C15.086 6.05016 13.8457 6.42831 12.6054 6.80645C12.9597 5.47034 13.6179 4.15944 14.4278 3.27711C14.7316 2.94938 15.1619 2.59645 15.6428 2.39477C16.1491 3.37794 16.2503 4.76447 16.225 5.69723ZM13.8963 1.23513C14.3013 1.23513 14.6303 1.31076 14.9088 1.51244C14.4532 1.73932 13.9975 2.09226 13.5925 2.54603C12.5041 3.70567 11.6688 5.49555 11.3398 7.23501C10.302 7.56274 9.2895 7.86525 8.37827 8.14256C8.98576 5.39471 11.2892 1.31076 13.8963 1.23513Z"></path><path fill="#5E8E3E" d="M26.8814 6.55452C26.7548 6.55452 24.2489 6.5041 24.2489 6.5041C24.2489 6.5041 22.148 4.48733 21.9455 4.26045C21.8696 4.18482 21.7684 4.1344 21.6671 4.1344V35.117L31.0579 32.7977C31.0579 32.7977 27.2358 7.00829 27.2104 6.83183C27.1598 6.65536 27.0079 6.55452 26.8814 6.55452Z"></path><path fill="white" d="M16.4528 11.3696L15.3644 15.4283C15.3644 15.4283 14.1494 14.8737 12.7066 14.9745C10.5804 15.1006 10.5804 16.4367 10.5804 16.7644C10.707 18.5795 15.4909 18.9828 15.7694 23.2433C15.9719 26.5961 13.9975 28.8902 11.112 29.0667C7.66952 29.2432 5.77112 27.2264 5.77112 27.2264L6.50517 24.1256C6.50517 24.1256 8.42888 25.5625 9.9476 25.4617C10.9348 25.4113 11.3144 24.5794 11.2638 24.0248C11.112 21.6551 7.2139 21.8063 6.96078 17.8988C6.75829 14.6216 8.90981 11.3191 13.6685 11.0166C15.5162 10.8906 16.4528 11.3696 16.4528 11.3696Z"></path></svg></a><nav aria-label="Secondary" class="hidden lg:block h-full transition-transform will-change-transform duration-200 translate-x-0" data-click-outside="dismiss"><ul class="flex items-center gap-x-8 h-full"><li class="relative flex flex-col items-center h-full border-white/30"><a href="/" class="font-bold flex items-center h-full hover:underline outline-4 outline-state-focus focus-visible:outline">Engineering Blog</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><a href="/topics/development" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Development</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><a href="/topics/infrastructure" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Infrastructure</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><a href="/topics/mobile" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Mobile</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><a href="/topics/developer-tooling" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Developer Tooling</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><a href="/latest" class="flex items-center h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1">Latest</a></li><li class="relative flex flex-col items-center h-full after:absolute after:w-full after:h-[3px] after:bottom-0 hover:underline after:hidden after:bg-white"><button type="button" aria-expanded="false" aria-haspopup="true" aria-controls="id_More topics_5" class="h-full outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="1"><span class="flex items-center">More topics<svg fill="none" viewBox="0 0 16 16" aria-hidden="true" icon="chevron" height="64" width="64" class="rotate-180 shrink-0 w-5 h-7 ml-2"><path fill="currentColor" d="M12 10.4a.798.798 0 0 1-.566-.234L8 6.73l-3.434 3.435a.8.8 0 1 1-1.132-1.132l4-4a.8.8 0 0 1 1.132 0l4 4A.8.8 0 0 1 12 10.4Z"></path></svg></span></button><div id="id_More topics_5" class="absolute top-[80px] duration-500 left-0 rounded-lg transition-all box-content opacity-0 -translate-y-6 pointer-events-none w-[256px] bg-black text-white shadow-dark"><ul class="p-4 w-[224px] box-content"><li class="py-3 px-4 rounded-lg"><a href="/topics/security" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Security</a></li><li class="py-3 px-4 rounded-lg"><a href="/topics/data-science-engineering" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Data Science Engineering</a></li><li class="py-3 px-4 rounded-lg"><a href="/topics/culture" class="hover:underline outline-state-focus outline-4 focus-visible:outline" data-secondary-nav-tier="2">Culture</a></li></ul></div></li></ul></nav><div class="hidden lg:block ml-auto"><div class="hidden lg:flex flex-row items-center text-base cursor-pointer blog-navbar-navigation">Search<svg viewBox="0 0 20 20" class="[&>path]:fill-white w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></div><div class="mb-6 lg:mb-0 lg:absolute lg:bottom-0 lg:left-0 w-full z-50 lg:hidden bg-transparent lg:before:bg-engineering-dark-bg lg:before:bg-top lg:before:bg-no-repeat lg:before:h-full lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:w-[200vw] lg:before:-translate-x-1/2"><div class="lg:container lg:h-[71px] flex items-center"><div class="flex flex-row items-center text-base relative w-full border-b border-[#ccc]"><form method="get" action="/shopifys-platform-is-the-web-platform" class="flex lg:block w-full -mt-4 lg:mt-0" novalidate="" data-component-extra-search-value=""><input class="outline-0 text-base relative z-20 bg-transparent w-full lg:placeholder:text-transparent py-2 text-white placeholder-white" type="text" name="header-search" autoComplete="off" placeholder="Search" value=""/><button class="lg:hidden p-6 -mr-6" aria-label="Search icon"><svg viewBox="0 0 20 20" class="[&>path]:fill-white w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></button></form><div class="hidden lg:flex absolute z-10 top-1/2 left-0 -translate-y-1/2 flex-row items-center text-base text-white">Type something you're looking for<svg viewBox="0 0 20 20" class="[&>path]:fill-white w-4 h-4 ml-2"><path fill-rule="evenodd" d="M12.323 13.383a5.5 5.5 0 1 1 1.06-1.06l2.897 2.897a.75.75 0 1 1-1.06 1.06l-2.897-2.897Zm.677-4.383a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg></div><div class="hidden lg:block p-2 cursor-pointer ml-auto"><svg viewBox="0 0 20 20" class="size-5 [&>path]:fill-white"><path d="M12.72 13.78a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-2.72 2.72-2.72-2.72a.75.75 0 0 0-1.06 1.06l2.72 2.72-2.72 2.72a.75.75 0 1 0 1.06 1.06l2.72-2.72 2.72 2.72Z"></path></svg></div></div></div></div></div><div class="pl-8 app-signup-links transform-opacity duration-200 relative before:h-[22px] before:bg-shade-30 before:w-[1px] before:absolute before:left-0 before:top-[1/2] before:translate-[-1/2] opacity-0 lg:hidden"><a href="/login?ui_locales=en" class="whitespace-nowrap">Log in</a><div data-component-name="button-group" data-mode="dark"><div class="flex gap-y-sm flex-wrap gap-x-2 justify-start"><a href="https://accounts.shopify.com/store-create?language=en&locale=en&signup_page=https%3A%2F%2Fshopify.engineering%2Fshopifys-platform-is-the-web-platform&signup_types[]=paid_trial_experience" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline border-2 text-button-dark-primary-text bg-button-dark-primary-bg border-button-dark-primary-border ring-button-dark-primary-border hover:text-button-dark-primary-text-hover hover:bg-button-dark-primary-bg-hover hover:border-button-dark-primary-border-hover hover:ring-button-dark-primary-border-hover focus:text-button-dark-primary-text-focus focus:bg-button-dark-primary-bg-focus focus:border-button-dark-primary-border-focus focus:ring-button-dark-primary-border-focus active:text-button-dark-primary-text-active active:bg-button-dark-primary-bg-active active:border-button-dark-primary-border-active active:ring-button-dark-primary-border-active disabled:text-button-dark-primary-text-disabled disabled:bg-button-dark-primary-bg-disabled disabled:border-button-dark-primary-border-disabled disabled:ring-button-dark-primary-border-disabled" data-component-name="button" data-mode="dark" target="">Start free trial</a></div></div></div></div></div></div><svg class="sr-only" aria-hidden="true"><defs><linearGradient id="start_svg__a" x1="4" y1="2.5" x2="37.5" y2="36" gradientUnits="userSpaceOnUse"><stop stop-color="#00E392"></stop><stop offset="1" stop-color="#00B4CD"></stop></linearGradient><linearGradient id="manage_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#1CD9D9"></stop><stop offset="1" stop-color="#70D50E"></stop></linearGradient><linearGradient id="market_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#EA4EF2"></stop><stop offset="1" stop-color="#29C9FF"></stop></linearGradient><linearGradient id="start_svg__b" x1="4" y1="2.5" x2="37.5" y2="36" gradientUnits="userSpaceOnUse"><stop stop-color="#00E392"></stop><stop offset="1" stop-color="#00B4CD"></stop></linearGradient><linearGradient id="sell_svg__a" x1="1" y1="1" x2="39" y2="39" gradientUnits="userSpaceOnUse"><stop stop-color="#33EDE2"></stop><stop offset="1" stop-color="#6754FF"></stop></linearGradient><clipPath id="white_circle_svg__a"><path fill="#fff" d="M0 0h40v40H0z"></path></clipPath><linearGradient id="paint0_linear_1_569" x1="6.12412" y1="7.32529" x2="16.6923" y2="17.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint1_linear_1_569" x1="18.4621" y1="6.91041" x2="12.5203" y2="17.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_589" x1="7.59808" y1="8.96" x2="28.4853" y2="30.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint1_linear_41_589" x1="18.4622" y1="6.91041" x2="12.7852" y2="12.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_568" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white" stop-opacity="0"></stop></linearGradient><radialGradient id="paint1_radial_1_568" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-96.3402) scale(54.3323 72.1138)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_568" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-15.5615) scale(82.0061 39.4114)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_568" x1="15.1241" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_568" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_612" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white"></stop></linearGradient><radialGradient id="paint1_radial_1_612" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-99.5942) scale(44.6242 90.7846)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_612" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-47.641) scale(98.7905 47.4778)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_612" x1="15.1242" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_612" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_1_651" x1="85.4375" y1="44" x2="-160.562" y2="-57" gradientUnits="userSpaceOnUse"><stop stop-color="white"></stop><stop offset="0.829504" stop-color="white"></stop></linearGradient><radialGradient id="paint1_radial_1_651" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(73.4375 49) rotate(-99.5942) scale(44.6242 90.7846)"><stop stop-color="#3C00BB" stop-opacity="0.72"></stop><stop offset="1" stop-color="white" stop-opacity="0"></stop></radialGradient><radialGradient id="paint2_radial_1_651" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(107.438 44) rotate(-47.641) scale(98.7905 47.4778)"><stop stop-color="#423EFF" stop-opacity="0.6"></stop><stop offset="0.754349" stop-color="#12C06D" stop-opacity="0"></stop></radialGradient><linearGradient id="paint3_linear_1_651" x1="15.1242" y1="17.3253" x2="25.6923" y2="27.7506" gradientUnits="userSpaceOnUse"><stop offset="0.161933" stop-color="#27293B"></stop><stop offset="0.760531" stop-color="#27293B"></stop></linearGradient><linearGradient id="paint4_linear_1_651" x1="27.4621" y1="16.9104" x2="21.5203" y2="27.2518" gradientUnits="userSpaceOnUse"><stop stop-color="#27293B"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_588" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_588" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_588" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_588" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_625" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_625" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_625" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_625" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient><linearGradient id="paint0_linear_41_662" x1="-59.2497" y1="-1.6632e-07" x2="-32.4337" y2="99.4491" gradientUnits="userSpaceOnUse"><stop offset="0.000294443" stop-color="#15161B"></stop><stop offset="0.606057" stop-color="#1C1F31"></stop></linearGradient><radialGradient id="paint1_radial_41_662" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(146.438 64) rotate(-172.051) scale(224.154 105.307)"><stop stop-color="#333FB2"></stop><stop offset="0.75924" stop-color="#27293B" stop-opacity="0"></stop></radialGradient><linearGradient id="paint2_linear_41_662" x1="16.5981" y1="18.96" x2="37.4853" y2="40.2112" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#32386C"></stop></linearGradient><linearGradient id="paint3_linear_41_662" x1="27.4622" y1="16.9104" x2="21.7852" y2="22.9621" gradientUnits="userSpaceOnUse"><stop stop-color="#A8B1EB"></stop><stop offset="1" stop-color="#4F58AA"></stop></linearGradient></defs></svg></header><main role="main" id="main" tabindex="-1"><div class="fixed top-0 left-0 h-[6px] z-50 bg-engineering-highlight" style="width:null%"></div><section class="grid grid-cols-full text-section-light-text featured-blogs gap-y-0 pt-36 pb-0 bg-transparent" data-section-name="" data-component-name="shopifys-platform-is-the-web-platform" data-viewable-component="true" data-mode="light"><article id="article" itemscope="" itemType="https://schema.org/Article" class="featured-blogs__section"><meta itemProp="mainEntityOfPage" content="//shopifys-platform-is-the-web-platform"/><meta itemProp="dateModified" content="2023-07-26T15:51:33.000Z"/><div class="relative"><div class="py-10 tablet:text-center desktop:pt-16 desktop:pb-16" data-mode="light"><div class="container desktop:w-9/12 desktop:mx-auto"><div class="uppercase font-aktivgroteskextended text-[12px] leading-[14px] tracking-[0.01em] font-semibold tablet-xl:font-shopifysans tablet-xl:text-[11px] tablet-xl:leading-[13px] tablet:tracking-[0.5px] tablet:font-bold pb-2 text-engineering-dark-text"><a href="/" class="no-underline topic-link hover:text-inherit">blog</a><span class="richtext px-2.5 text-xs">|</span><a href="/topics/apps" class="no-underline topic-link hover:text-inherit">Apps</a></div><h1 class="richtext font-medium tracking-[-0.02em] text-[28px] leading-9 tablet-xl:text-[40px] tablet-xl:leading-[48px] text-engineering-dark-text" itemProp="headline">Shopify’s platform is the Web platform</h1><p class="richtext font-normal tracking-[-0.02em] text-[18px] leading-[26px] tablet-xl:text-[20px] tablet-xl:leading-7 desktop:text-[22px] desktop:leading-8 mt-4 desktop:mt-4 text-engineering-dark-text">Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills.</p><div class="lg:hidden mt-4 tablet-xl:mt-12"><div class="gap-x-1 flex flex-wrap font-bold sm:justify-center !text-lg text-engineering-dark-text"> </div><div class="text-body-sm font-normal text-engineering-dark-accent">Last updated <time>Jul 26, 2023</time></div></div></div></div><div class="tablet:container desktop:w-9/12 desktop:mx-auto overflow-hidden flex justify-center"><img class="" src="https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782" alt="" loading="eager" decoding="async" width="1848" height="782" srcSet="https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=200 200w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=400 400w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=600 600w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=800 800w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=1000 1000w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=1200 1200w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=1400 1400w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=1600 1600w, https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786&originalWidth=1848&originalHeight=782&width=1800 1800w"/></div></div><div class="container grid-cols-4 sm:grid-cols-8 md:grid-cols-12 block tablet-xl:grid gap-y-0 gap-x-12"><div class="col-span-4 xs:col-span-12 md:col-span-4 lg:col-span-3 col-start-1 nav-drawer md:pb-20 pt-10 desktop:pt-16" data-component-name="blog-left-sidebar"><nav class="md:top-[calc(var(--header-height)*2)] md:max-h-[calc(100vh-var(--header-height))] md:overflow-auto md:sticky md:pb-6 pr-2 text-engineering-dark-text"><div class="hidden md:block bg-engineering-dark-accent text-engineering-light-text"><div class="p-6"><p class="richtext text-2xl font-aktivgroteskextended leading-4 desktop:leading-7 color-black tracking-[-0.02em]">Engineering at Shopify</p><p class="richtext font-aktivgroteskextended desktop:leading-7 color-black tracking-[-0.02em] text-2xl mb-9 font-bold">We’re hiring</p><a href="https://www.shopify.com/careers#Engineering" class="flex justify-between align-middle font-aktivgroteskextended leading-6 tracking-[-0.0175rem] !no-underline border-b-[1px] border-black group" target="_blank" rel="noopener noreferrer">See open roles<span class="flex justify-center items-center w-6 h-6 ml-4 my-auto [&_svg]:w-6 reduced-motion:group-hover:translate-x-0 transition-all duration-500 will-change-transform group-hover:translate-x-full group-hover:opacity-0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.00025 15.9998C7.74425 15.9998 7.48825 15.9018 7.29325 15.7068C6.90225 15.3158 6.90225 14.6838 7.29325 14.2928L11.5862 9.99976L7.29325 5.70676C6.90225 5.31576 6.90225 4.68376 7.29325 4.29276C7.68425 3.90176 8.31625 3.90176 8.70725 4.29276L13.7073 9.29276C14.0982 9.68376 14.0982 10.3158 13.7073 10.7068L8.70725 15.7068C8.51225 15.9018 8.25625 15.9998 8.00025 15.9998Z" fill="black"></path></svg></span></a></div></div></nav></div><div class="col-span-4 xs:col-span-12 md:col-span-8 lg:col-span-6 col-start-1"><div id="article-content" class="text-body-base md:pt-10 desktop:pt-16 [&_h2]:text-t4 [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:font-medium [&_.heading--2]:text-t5 [&_.heading--2]:text-black [&_.heading--2]:font-aktivgroteskextended [&_.heading--2]:mb-6 [&_.heading--2]:font-medium [&_h3]:text-t5 [&_h3]:mt-12 [&_h3]:mb-4 [&_h4]:text-t6 [&_h4]:mt-12 [&_h4]:mb-4 [&_h5]:text-t7 [&_p]:mb-6 [&_hr]:mb-6 [&_a]:font-medium [&_a]:underline [&_a:hover]:no-underline [&_sup_a]:no-underline [&_sup_a:hover]:underline [&_.marketing-button]:text-white [&_.marketing-button]:no-underline [&_a>img]:mt-3 [&_a>img]:mb-8 [&_a>img]:h-[revert-layer] [&_img]:my-12 [&_a>img]:inline-block [&_figure>img]:mb-0 [&_figure]:mb-12 [&_img]:inline-block [&_ul]:list-disc [&_ul]:space-y-3 [&_ul]:pl-6 [&_ul]:mb-6 [&_ul_li]:pl-4 [&_ol]:list-decimal [&_ol]:space-y-3 [&_ol]:pl-6 [&_ol]:mb-6 [&_ol_li]:pl-4 [&_ol_li::marker]:font-bold [&_iframe]:max-w-full [&_figcaption]:mb-12 [&_figcaption]:text-center [&_figcaption]:text-xs [&_figcaption]:sm:text-sm [&_figcaption]:mt-1 [&_strong]:font-medium [&_.heading--4]:font-aktivgroteskextended [&_.heading--4]:text-2xl [&_.heading--4]:font-medium [&_.heading--4]:tracking-[-.02em] [&_iframe]:mt-3 [&_iframe]:mb-9 [&_.container]:m-0 [&_.container]:flex [&_.container]:gap-5 [&_.container]:flex-wrap [&_.green]:text-[green] [&_.red]:text-[red] [&_.pros]:bg-[#eafaea] [&_.pros]:rounded-[10px] [&_.pros]:p-5 [&_.pros_h3]:mt-2 [&_.cons]:bg-[#ffebe6] [&_.cons]:rounded-[10px] [&_.cons]:p-5 [&_.cons_h3]:mt-2 [&_.pros]:tablet:flex-[1_0_calc(50%-10px)] [&_.pros]:flex-[1_0_100%] [&_.cons]:tablet:flex-[1_0_calc(50%-10px)] [&_.cons]:flex-[1_0_100%] [&_.pros_.grid-container]:grid [&_.cons_.grid-container]:grid [&_.grid-container]:gap-[5px] [&_.grid-container]:grid-cols-[15px_auto] [&_.pros_.grid-container]:p-[5px] [&_.cons_.grid-container]:p-[5px] [&_.aspect-video_iframe]:mt-0 article-content [&_.truncated-text]:relative [&_.truncated-text]:max-h-[300px] [&_.truncated-text]:overflow-hidden [&_.truncated-text]:mb-6 [&_.truncated-text::before]:absolute [&_.truncated-text::before]:content-[""] [&_.truncated-text::before]:bottom-0 [&_.truncated-text::before]:w-full [&_.truncated-text::before]:h-[150px] [&_.truncated-text::before]:bg-gradient-to-t [&_.truncated-text::before]:from-white [&_.truncated-text::before]:from-50% [&_.truncated-text::before]:to-transparent [&_.truncated-text\_\_toggle]:absolute [&_.truncated-text\_\_toggle]:bottom-0 [&_.truncated-text\_\_toggle]:w-full [&_.truncated-text\_\_toggle]:text-center [&_.marketing-code]:bg-[#f0f1f2] [&_.marketing-code]:font-bold [&_.marketing-code]:p-1 [&_.marketing-code.marketing-code--block]:p-4 [&_.marketing-code--block]:block [&_.marketing-code--block]:max-w-full [&_.marketing-code--block]:overflow-x-scroll [&_.marketing-code--block]:mb-5 [&_.partners-signup]:mt-6 [&_.partners-signup]:mb-12 [&_.partners-signup]:bg-gray-200 [&_.partners-signup]:p-3 [&_.partners-signup]:md:p-6 [&_.table]:block [&_.table]:overflow-x-scroll [&_.table]:max-w-full text-engineering-dark-text [&_h2]:text-inherit [&_h3]:text-inherit [&_h4]:text-inherit [&_.heading--4]:text-inherit [&_a]:text-[#E7ECFB] [&_strong]:text-engineering-dark-text" itemProp="articleBody"><div class="hidden leadpage-container leadpage__image leadpage__content marketing-button hide--mobile block--bordered"></div><div><h2>Remix for Shopify Apps</h2> <h3>TL;DR</h3> <p>Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix also embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills when developing for Shopify. We are reshaping Shopify’s platform to embody the same values, for example by releasing a new, web-centric version of App Bridge.</p> <h3>Admin Apps</h3> <p>One of the powerful ways you can develop for Shopify is by building apps that merchants install to their store. Apps can consist of multiple parts that extend Shopify in different ways, and one core component found  in almost every app is the Admin App: A UI that merchants interact with within the admin area of their store. Here, you can let merchants configure the way your app behaves in their store, visualize data or integrate it with other services outside of Shopify.</p> <p><strong><i>Heads-up</i></strong><i>: The restrictions outlined below apply specifically to cross-origin iframes, where the iframe is on a different origin than the top-level page. This article exclusively talks about cross-origin iframes <i>as all Admin Apps are hosted on a different origin than Shopify Admin.</i></i></p> <p>Admin apps are, at their core, web apps that Shopify Admin runs in an <code><iframe></code>. Iframes are the web’s way of composing multiple web apps together into one, allowing each iframe to take control of a dedicated space of the top-level page. The browser provides a strong isolation between these individual apps (“sandboxing”), so that each app can only influence the space they have been assigned and not interfere with anything else. In a sense, Shopify Admin functions like an operating system where merchants install multiple applications and use them to customize and enhance their workflows.</p> <p>Without going into technical details, iframes have been misused in the last few decades as a way to track user behavior on the web. To counteract that, browser vendors have started to restrict what web apps running inside an iframe can and cannot do. As an example, iframes in Safari do not get to set cookies or store data in IndexDB, LocalStorage or SessionStorage. As a result of all these restrictions, some standard practices of web development do not work inside iframes. This can be a source of headaches for developers.</p> <p>Shopify wants to allow developers to deeply integrate their apps with Shopify Admin. The browser’s sandboxing can get in the way of that. The only way to pierce the isolation between Shopify Admin and the app’s iframe is through the <code>postMessage()</code> API, which allows the two pages to send each other messages in the form of JavaScript objects.</p> <h3>The journey so far: App Bridge</h3> <p>With <code>postMessage()</code> being the only way to pierce the browser sandbox between page and iframe, we built <a href="https://shopify.dev/docs/apps/tools/app-bridge" target="_blank">App Bridge</a>, a message-based protocol. On the one hand, it provides capabilities that can be used to restore functionality that browsers removed in their quest to protect user privacy. On the other hand, it also exposes a set of capabilities and information that allows deep integration of apps with Shopify Admin. The App Bridge protocol is supported by Shopify Admin on the Web and on the mobile app, giving merchants a consistent experience no matter how they prefer to work.</p> <strong>Restoring Web Development</strong> <p>One example for web development patterns that don’t work in iframes are URLs. When a merchant navigates through an admin app, the app typically updates their URL using client-side routers like <code>react-router</code> (which in turn uses <code>pushState()</code> and friends from the <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API" target="_blank" rel="nofollow noopener noreferrer">Web’s History API</a>), to update what is shown in the iframe. However, that new URL is not reflected in the browser’s address bar at all. The iframe can only change its own URL, not the parent’s page. That means if a merchant reloads the page, they will reload Shopify Admin in the same place, but the app will be opened on the landing page. Through App Bridge, we allow apps to update a dedicated fragment of the top-level page URL, fixing this behavior.</p> <p><img src="https://cdn.shopify.com/s/files/1/0779/4361/files/Restoring_Web_Development_-_Admin.png?v=1690215094" alt="Image of the Shopify Admin, highlight show Shopify renders and how Developer Renders"></p> <p>Another example can be found in the sidebar of Shopify Admin, which by default is inaccessible for any iframe running in the Admin. Through App Bridge, however, an app is able to add additional menu items in the sidebar, giving  merchants a more efficient way of navigating:</p> <p><img src="https://cdn.shopify.com/s/files/1/0779/4361/files/Screenshot_2023-07-31_at_11.56.31.png?v=1690809573" alt="Image of additional menu items in sidebar navigation. This image calls out additional pages as the new nav." loading="lazy"></p> <p>As a last example, let’s talk about cookies. Cookies and other storage mechanisms are not (reliably) available in iframes, so a developer has no way to remember which user originally opened the app. This is critical information for the app because it ensures GraphQL API requests are working against the correct shop. To remedy this, <a href="https://shopify.dev/docs/apps/auth/oauth/session-tokens" target="_blank">App Bridge provides an OpenID Connect ID Token</a> to give the app a way to always determine the identity of the currently active user.</p> <strong>Developer Experience</strong> <p>So far, App Bridge was given to developers in two shapes: <code>@shopify/app-bridge</code>, which was a very thin wrapper over the <code>postMessage()</code>-based interface. The API still felt like passing messages around, and it left a lot of work up to developers, like mapping requests to responses. While this was flexible and assumed almost nothing, it was not convenient to use.</p> <script src="https://gist.github.com/ShopifyEng/c8953181b8d34880ad6bd73ca44c24a0.js"></script> <p>To address this, we also maintained <code>@shopify/app-bridge-react</code>, which wrapped the low-level primitives from the former in React components, providing a much better developer experience (DX).</p> <script src="https://gist.github.com/ShopifyEng/3b8a2157dde05bcddb568d1b52eaac34.js"></script> <p>This was a substantial improvement when you are using React, but these components were not really idiomatic and did not work with systems like Remix that utilize server-side rendering (SSR). This meant we had to invest into updating App Bridge, so while we were at it, we took a page out of Remix’s playbook: Instead of making developers who are new to Shopify learn how to use the <code>@shopify/app-bridge-react</code>, we wanted to allow them to use APIs they are already familiar with by nature of doing web development.</p> <h3>The last version of App Bridge</h3> <p>We have a new — and final! — version of  App Bridge! It replaces <code>@shopify/app-bridge</code> and, in the near future, will form the underpinnings of <code>@shopify/app-bridge-react</code>. We have rewritten it from the ground up, embracing modern web development technologies and best practices.</p> <p><strong>Simpler, one-off setup</strong></p> <p>To use one of our previous App Bridge clients, developers had to copy a snippet of initialization code. We realized that this is unnecessary and can lead to confusion. Going forward, all you need to do is include a <code><script></code> tag in the <code><head></code> of your document, and you are good to go!</p> <script src="https://gist.github.com/ShopifyEng/63f9e1c27fb3a2a110551cb1444a6faf.js"></script> <p>While loading a script from a CDN might seem a bit old-school, it is an intentional choice: This way we can deploy fixes to App Bridge that reach all apps <i>immediately. </i>We are committed to maintaining backwards compatibility, without asking developers again to update their npm dependencies and redeploy their app. Now, developers have a more stable and reliable platform to build on!</p> <p><strong>Fixing the environment</strong></p> <p>App Bridge aims to fix all the things that got broken by browsers (or by Shopify!) by running apps inside an iframe. For example, with App Bridge running, you can use <code>history.pushState()</code> like you would in normal web development, and App Bridge will automatically inform Shopify Admin about the URL changes.</p> <p>This has wider implications than what it might seem like at first. For the <code>history</code> example, the implication is that client-side routing libraries like <code>react-router</code> work inside Admin apps <em>out of the box</em>. Our goal with App Bridge is to fix iframes to the extent that all your standard web development practices, libraries and even frameworks work as expected without having to write custom logic or adapters.</p> <p><strong>Enhancing the environment</strong></p> <p>To enable deeper integrations like the side navigation mentioned above, we chose to go with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" target="_blank" rel="nofollow noopener noreferrer">Custom Elements</a> to build custom HTML elements. Custom Elements are a web standard and are supported by all browsers. The choice was simple: All web frameworks, past, present and future make extensive use of the DOM API and as such will be able to interface with any HTML element, custom and built-in. Another nice benefit is that these Custom Elements can be inspected and manipulated with your browser’s DevTools — no extension required.</p> <p style="text-align: center;"><video controls="controls" width="100%" height="100%" loop="loop" muted="" type="video/mp4" autoplay="autoplay"><source src="https://cdn.shopify.com/videos/c/o/v/c141d006e291465d98a11db0e0aaa429.mp4" type="video/mp4">Your browser does not support the video tag. </video></p> <p>If a merchant clicks any of these links, App Bridge will automatically forward that <code>click</code> event to the corresponding <code><a></code> tag inside the iframe. This means that a client-side router like Remix’s <code>react-router</code> will also work with these links as expected.</p> <p><strong>Status Quo</strong></p> <p>You can find a list of all our capabilities in App Bridge in our <a href="https://shopify.dev/docs/api/app-bridge" target="_blank">documentation</a>. This new version of App Bridge is ready for you to use in production right now! However, we did not break the old App Bridge clients. Deployed apps will continue to work with no action required from the developer. If, for some reason, you want to mix-and-match the new and the old App Bridge clients, you can do that, too!</p> <h3>Remix</h3> <p>In October 2022, <a href="/remix-joins-shopify" target="_blank">we announced that Remix joined Shopify</a>. Remix and its team are pioneers at putting the web at the center of their framework to help developers build fast and resilient web apps with ease. With App Bridge restoring a normal web development environment (despite being inside an iframe), Remix works out of the box. </p> <p>Remix is opinionated about how to build apps. Remix stipulates that apps are separated into routes and each route defines how to get the data it needs to render its content. Whenever the app is opened on a specific URL or path, Remix looks inside the special <code>routes/</code> folder and loads the JavaScript file at that path. For example, if your app is loaded with the URL <code>http://myapp.com/products/4</code>, Remix will look for <code>/routes/products/4.js</code> and if it can’t find that, it will look if there are matches with placeholders, like <code>/routes/products/$id.js</code>. These files define the content that should be delivered through React components. Remix will detect whether the incoming request is a browser navigation (where HTML needs to be returned) or a client-side navigation (where data needs to be returned, so it can be consumed by <code>react-router</code>), and will render the response appropriately. Each route can define a loader function which is called to load the data it needs to render. The <code>loader</code> runs server-side and can make use of databases or 3rd party APIs. Remix takes care of feeding that data into the server-side render or transporting it to the frontend for the client-side render. This happens completely transparently for the developer, allowing them to focus on the <i>what, </i>not the<i> <i>how. </i></i></p> <p>With Remix, an app’s backend and the API becomes a by-product of writing the frontend. The API endpoints are implicitly generated and maintained by Remix <a href="https://www.youtube.com/watch?v=NXqEP_PsPNc&list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6" target="_blank" rel="nofollow noopener noreferrer">through the definition of loaders and actions</a>. This is not only a massive improvement in developer convenience, but also has performance benefits as server-side rendering lets apps get personalized content on screen faster than a traditional, client-side app.</p> <h3><strong>Shopify’s API</strong></h3> <p>Most Shopify apps need to interact with <a href="https://shopify.dev/docs/api/admin-graphql" target="_blank">Shopify’s GraphQL API</a>. While our GraphQL API is usable with any GraphQL client, there are a small number of Shopify-specific parts that need to be set up, like getting the OAuth access token, handling ID Tokens and HMAC signature verification. To keep the template as clutter-free as possible, we have implemented all of this in our <code>@shopify/shopify-app-remix</code> package, which does all the heavy lifting, so you can continue to focus on the business logic.</p> <p>Here is how you configure your <code>shopify</code> singleton:</p> <script src="https://gist.github.com/ShopifyEng/64c6990bf861148d90826b7958dbfdf0.js"></script> <p>And here is how you use it to get access to Shopify’s Admin GraphQL API for the shop that is loading the app:</p> <script src="https://gist.github.com/ShopifyEng/029f8455f5be3b3bc5f4f011fd1b6aab.js"></script> <h3><strong>Storage</strong></h3> <p>Many apps need to store additional data, about the customers, merchants, products, or store session data. In the past, our templates came with a SQLite database and some adapters to use popular databases like <a href="https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-mysql" target="_blank" rel="nofollow noopener noreferrer">MySQL</a> or <a href="https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-redis" target="_blank" rel="nofollow noopener noreferrer">Redis</a>. An opinionated approach is a core part of Remix, so we are following suit by providing <a href="https://www.prisma.io/" target="_blank" rel="nofollow noopener noreferrer" title="Prisma.io">Prisma</a> out of the box. Prisma provides battle-tested adapters for most databases and provides an ergonomic ORM API and a UI to inspect your database’s contents.</p> <p><img src="https://cdn.shopify.com/s/files/1/0779/4361/files/Storage.png?v=1690215618" alt="Storage screenshot of Prisma provided databse and UI" loading="lazy"></p> <p>We don’t want you to reinvent the wheel on how to store your user’s session information, so we’ve published a <a href="https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma" target="_blank" rel="nofollow noopener noreferrer">Prisma Adapter</a> that takes care of storing sessions. You can use this adapter even if you use one of our previous app templates, as it is completely Remix agnostic.</p> <h3><strong>Quickstart</strong></h3> <p>To get you started as quickly as possible, we have integrated the new Remix template for Admin apps into our Shopify CLI. You can get started right now with this command and choose the brand-new Remix option:</p> <script src="https://gist.github.com/ShopifyEng/225f4ef5da6a6746ab7846168f106c95.js"></script> <p>If you have any feedback or questions, please feel free to open an issue on the repository’s <a href="https://github.com/Shopify/shopify-app-template-remix/" target="_blank" rel="nofollow noopener noreferrer">issue tracker</a>.</p> <h3>Going forward</h3> <p>A Remix template for Admin apps and the new App Bridge client are just the start of Shopify’s effort to make its platform more stable and intuitive for developers. We are also launching similar reworks for Checkout extensions and are rethinking our design system, <a href="https://polaris.shopify.com" target="_blank">Polaris</a>, to be more flexible, idiomatic and generic.</p> <p>We are extremely excited about this direction for Shopify’s platform. We want to leverage more of the web development ecosystem and want to get out the way more to let you choose the right tools for the job. We can’t wait to see how you will put all these new powers to good use!</p> <div class="marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [&_h2]:!mt-0 [&_h2]:mb-6 [&_h2]:text-t5 [&_h3]:!mt-0 [&_h3]:mb-6 [&_h3]:text-t7 [&_h4]:!mt-0 [&_h4]:mb-6 [&_h4]:text-t8 [&_ul]:!mt-0 [&_ul]:mb-6 [&_ul:last-child]:mb-0 [&_ol]:!mt-0 [&_ol]:mb-6 [&_ol:last-child]:mb-0 [&_p]:!mt-0 [&_p]:mb-6 [&_p:last-child]:mb-0 text-engineering-dark-text [&_*]:!text-engineering-dark-text bg-transparent border-engineering-highlight text-body-sm my-8 tablet:my-16 p-8 bg-marketingBg !border-l-0 border-t-2 pl-8 [&_[itemscope]]:mb-6 [&_[itemscope]:last-child]:mb-0 !bg-[#0C052B]"> <p>This post was written by<strong> Surma.</strong> DX at Shopify. Web Platform Advocate. Craving simplicity, finding it nowhere. He/him. Internetrovert 🏳️‍🌈. Find him on <a href="https://twitter.com/dassurma" target="_blank" rel="nofollow noopener noreferrer">Twitter</a>, <a href="https://github.com/surma" target="_blank" rel="nofollow noopener noreferrer">GitHub</a>, or at <a href="https://surma.dev" target="_blank" rel="nofollow noopener noreferrer">surma.dev</a>.</p> </div></div></div><div class="border-t tablet-xl:border-[#d4d4d8] my-16 py-6 flex tablet-xl:flex-row justify-between flex-col"><div class="flex items-center tablet-xl:justify-start tablet-xl:flex-row flex-row-reverse justify-between"><div class="self-center flex flex-col"><div class="gap-x-1 flex flex-wrap text-lg font-aktivgroteskextended leading-[18px] font-bold mb-2 text-engineering-dark-text"> by <span itemProp="author" itemscope="" itemType="https://schema.org/Person"><a href="/authors/surma-" class="no-underline" itemProp="url"><span itemProp="name">Surma </span></a></span></div><div class="text-body-sm font-normal text-engineering-dark-accent">Last updated <time>Jul 26, 2023</time></div></div></div><div class="xs:border-b tablet-xl:border-0 pb-4"><div class="font-bold text-xs font-aktivgroteskextended uppercase mt-4 tablet-xl:mt-0 tablet-xl:text-right text-engineering-dark-accent">Share article</div><ul id=":R1bj95n5:" class="flex gap-4 mt-4" data-component-name="social"><li><a class="block h-9 w-9 hover:fill-shade-7 fill-[#E7ECFB]" aria-describedby="blog-social-icon-facebook-:R1bj95n5:" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fshopify.engineering%2Fshopifys-platform-is-the-web-platform" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-facebook" aria-label=""><svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37"><circle cx="18" cy="18.6143" r="18" fill="#E7ECFB"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M16.4664 25.3643V19.2063H14.2495V16.8064H16.4664V15.0366C16.4664 12.9826 17.8084 11.8643 19.7685 11.8643C20.7074 11.8643 21.5144 11.9296 21.7495 11.9588V14.1053L20.3901 14.1059C19.3241 14.1059 19.1177 14.5793 19.1177 15.2742V16.8064H21.66L21.329 19.2063H19.1177V25.3643H16.4664Z" fill="#120937"></path></svg><span id="blog-social-icon-facebook-:R1bj95n5:" class="sr-only">Facebook</span></a></li><li><a class="block h-9 w-9 hover:fill-shade-7 fill-[#E7ECFB]" aria-describedby="blog-social-icon-twitter-:R1bj95n5:" href="https://twitter.com/intent/tweet?text=Shopify’s+platform+is+the+Web+platform&url=https%3A%2F%2Fshopify.engineering%2Fshopifys-platform-is-the-web-platform&via=Shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-twitter" aria-label=""><svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none"><circle cx="18" cy="18.6143" r="18" fill="#E7ECFB"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M23.3786 17.0672C23.3786 17.9589 23.2031 18.8473 22.851 19.7304C22.5 20.6135 22.0027 21.4212 21.3615 22.1535C20.7202 22.8858 19.8844 23.4781 18.8561 23.9326C17.8279 24.387 16.7074 24.6143 15.4946 24.6143C13.9657 24.6143 12.5505 24.219 11.25 23.4275C11.4784 23.4447 11.6977 23.4533 11.9081 23.4533C13.2097 23.4533 14.3606 23.0743 15.363 22.3172C14.7656 22.3172 14.2335 22.1449 13.7677 21.8003C13.302 21.4546 12.9814 21.013 12.8047 20.4746C12.9814 20.509 13.1659 20.5252 13.3594 20.5252C13.6575 20.5252 13.9219 20.5004 14.1502 20.4498C13.5349 20.3152 13.0376 20.0083 12.6596 19.5279C12.2827 19.0487 12.0937 18.4898 12.0937 17.8501V17.7995C12.0937 17.9007 12.2119 17.9804 12.4492 18.0396C12.6866 18.0978 12.9375 18.1279 13.2007 18.1279C12.7969 17.8749 12.4627 17.555 12.1984 17.1684C11.9351 16.7818 11.8035 16.3693 11.8035 15.931C11.8035 15.4604 11.9261 15.0146 12.1725 14.5935C12.8756 15.4184 13.7239 16.0743 14.7172 16.5621C15.7095 17.051 16.7692 17.3203 17.8942 17.3698C17.8414 17.1684 17.8144 16.966 17.8144 16.7646C17.8144 16.0409 18.0877 15.4184 18.6322 14.8972C19.1767 14.3749 19.8281 14.1143 20.583 14.1143C21.3919 14.1143 22.0691 14.3921 22.6136 14.9467C23.229 14.8293 23.8174 14.6193 24.3799 14.3156C24.1695 14.9392 23.7566 15.427 23.1412 15.7803C23.7037 15.7124 24.2392 15.5703 24.75 15.3506C24.363 15.889 23.8972 16.3521 23.3516 16.7387C23.3696 16.8572 23.3786 16.966 23.3786 17.0672Z" fill="#120937"></path></svg><span id="blog-social-icon-twitter-:R1bj95n5:" class="sr-only">Twitter</span></a></li><li><a class="block h-9 w-9 hover:fill-shade-7 fill-[#E7ECFB]" aria-describedby="blog-social-icon-linkedin-:R1bj95n5:" href="https://www.linkedin.com/shareArticle?mini=true&source=Shopify&title=Shopify’s+platform+is+the+Web+platform&url=https%3A%2F%2Fshopify.engineering%2Fshopifys-platform-is-the-web-platform" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-linkedin" aria-label=""><svg xmlns="http://www.w3.org/2000/svg" width="36" height="37" viewBox="0 0 36 37" fill="none"><circle cx="18" cy="18.6143" r="18" fill="#E7ECFB"></circle><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4102 12.6143C14.1884 12.6143 14.8191 13.2463 14.8191 14.0236C14.8191 14.8018 14.1884 15.4334 13.4102 15.4334C12.6293 15.4334 11.9995 14.8018 11.9995 14.0236C11.9995 13.2463 12.6293 12.6143 13.4102 12.6143ZM16.1521 16.5032H18.4826V17.572H18.5163C18.8405 16.9568 19.6337 16.3083 20.8163 16.3083C23.2766 16.3083 23.7315 17.9281 23.7315 20.035V24.3258H21.3026V20.5218C21.3026 19.6147 21.2849 18.4476 20.039 18.4476C18.7736 18.4476 18.5805 19.4353 18.5805 20.4562V24.3258H16.1521V16.5032ZM12.1929 24.326H14.6268V16.5034H12.1929V24.326Z" fill="#120937"></path></svg><span id="blog-social-icon-linkedin-:R1bj95n5:" class="sr-only">LinkedIn</span></a></li></ul></div></div></div><div class="col-span-4 xs:col-span-12 lg:col-span-3 col-start-1 hidden lg:block relative" data-component-name="blog-right-sidebar"><div class="tablet-xl:pt-10 desktop:pt-16 pb-6 absolute h-full max-h-full tot-0 left-0"><div class="h-full overflow-hidden" id="blog-side-banners-col"><div class="gap-x-1 flex flex-wrap font-bold text-lg !font-shopifysans text-engineering-dark-text"> by <span itemProp="author" itemscope="" itemType="https://schema.org/Person"><a href="/authors/surma-" class="no-underline" itemProp="url"><span itemProp="name">Surma </span></a></span></div><div class="text-body-sm font-normal text-engineering-dark-accent">Last updated <time>Jul 26, 2023</time></div><span class="text-body-sm font-normal text-engineering-dark-accent"> • 10 minute read</span><div id="blog-side-banners"><div class="font-aktivgroteskextended text-[#E7ECFB] mt-[640px]" data-priority="0"><p class="richtext text-base uppercase mb-6 font-medium"></p><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block border-engineering-highlight"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-inherit"><a href="/topics/development" data-component-name="blog-popular-post-Development">Development</a></span><a href="/introducing-ruvy" data-component-name="blog-popular-post-introducing-ruvy"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal text-engineering-dark-text">Introducing Ruvy</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block border-engineering-highlight"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-inherit"><a href="/topics/developer-tooling" data-component-name="blog-popular-post-Developer Tooling">Developer Tooling</a></span><a href="/building-a-shopifyql-code-editor" data-component-name="blog-popular-post-building-a-shopifyql-code-editor"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal text-engineering-dark-text">Building a ShopifyQL Code Editor</span></a></span></div><div class="font-aktivgroteskextended text-[#E7ECFB] mt-[640px]" data-priority="0"><p class="richtext text-base uppercase mb-6 font-medium"></p><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block border-engineering-highlight"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-inherit"><a href="/topics/apps" data-component-name="blog-popular-post-Apps">Apps</a></span><a href="/shopifys-platform-is-the-web-platform" data-component-name="blog-popular-post-shopifys-platform-is-the-web-platform"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal text-engineering-dark-text">Shopify’s platform is the Web platform</span></a></span><span class="mb-4 pl-2 border-l border-[#CAD4D7] inline-block border-engineering-highlight"><span class="uppercase text-xs mb-2 block pt-2 font-bold [&_a]:no-underline [&_a]:hover:text-inherit"><a href="/topics/development" data-component-name="blog-popular-post-Development">Development</a></span><a href="/building-flex-comp" data-component-name="blog-popular-post-building-flex-comp"><span class="richtext text-base block hover:underline hover:underline-offset-4 font-normal text-engineering-dark-text">The Engineering Story Behind Flex Comp</span></a></span></div></div></div></div></div></div><div itemProp="publisher" itemscope="" itemType="https://schema.org/Organization"><meta itemProp="name" content="Shopify"/><div itemProp="logo" itemscope="" itemType="https://schema.org/ImageObject"><meta itemProp="url" content="https://cdn.shopify.com/assets/images/logos/shopify_logo_black.png"/><meta itemProp="width" content="210"/><meta itemProp="height" content="60"/></div></div></article><div class="py-10 tablet-xl:py-16 overflow-hidden lg:hidden tablet-xl:pt-0 pt-0 [&_h5]:uppercase text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal [&_.blogPost>div:first-child>a:not(:hover)]:text-engineering-highlight"><div class="container"><div class="flex justify-between items-center mb-9"><h5 class="richtext tracking-[-.02em] blog-section-header text-[26px] leading-[30px] tablet:text-[24px] tablet:leading-[32px] font-bold tablet:font-medium"></h5></div></div><div class="container max-lg:!mr-0"><div class="flex justify-start flex-nowrap max-w-full overflow-x-auto snap-x snap-mandatory gap-x-gutter pr-[var(--margin)] lg:flex-wrap lg:justify-center lg:overflow-hidden lg:gap-y-gutter lg:mb-gutter lg:mx-auto lg:py-4 lg:pr-0"><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/topics/development" class="no-underline text-engineering-dark-text font-shopifysans font-normal hover:text-eyebrow-dark-text">Development</a></div><div class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal"><a class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal" href="/introducing-ruvy" rel="" target="_self">Introducing Ruvy</a></div><p class="richtext text-body-sm font-normal text-engineering-dark-author-text font-shopifysans">2023-10-18</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/topics/developer-tooling" class="no-underline text-engineering-dark-text font-shopifysans font-normal hover:text-eyebrow-dark-text">Developer Tooling</a></div><div class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal"><a class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal" href="/building-a-shopifyql-code-editor" rel="" target="_self">Building a ShopifyQL Code Editor</a></div><p class="richtext text-body-sm font-normal text-engineering-dark-author-text font-shopifysans">2023-09-11</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/topics/apps" class="no-underline text-engineering-dark-text font-shopifysans font-normal hover:text-eyebrow-dark-text">Apps</a></div><div class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal"><a class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal" href="/shopifys-platform-is-the-web-platform" rel="" target="_self">Shopify’s platform is the Web platform</a></div><p class="richtext text-body-sm font-normal text-engineering-dark-author-text font-shopifysans">2023-07-26</p></div></article></div><div class="popular-posts support-card shrink-0 snap-center w-[296px] lg:basis-1/4-gutter"><article class="article--index"><div class="blogPost pt-4"><div class="uppercase font-shopifysans font-medium pb-2 text-[12px] leading-[20px] tracking-[0.02em] text-shade-100 hover:text-link-light-hover"><a href="/topics/development" class="no-underline text-engineering-dark-text font-shopifysans font-normal hover:text-eyebrow-dark-text">Development</a></div><div class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal"><a class="tracking-[-.02em] pb-4 hover:underline text-base desktop:text-xl text-engineering-dark-text font-aktivgroteskextended font-normal [&_h4]:font-normal" href="/building-flex-comp" rel="" target="_self">The Engineering Story Behind Flex Comp</a></div><p class="richtext text-body-sm font-normal text-engineering-dark-author-text font-shopifysans">2022-10-05</p></div></article></div></div><div class="mobile-indicators mt-6 flex justify-center gap-x-2 lg:hidden"><div class="rounded-full box-content w-2 h-2 bg-black w-2 h-2 !bg-[#E7ECFB]"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2 !bg-[#9AA7C8]"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2 !bg-[#9AA7C8]"></div><div class="rounded-full box-content w-2 h-2 bg-[#d9d9d9] w-2 h-2 !bg-[#9AA7C8]"></div></div></div></div></section><div class="relative overflow-hidden bg-engineering-banner-bg py-10 tablet-xl:py-20 bg-[#61d095]" data-component-name="cta-footer-banner"><div class="container relative flex flex-col items-center text-center py-10 tablet-xl:py-16"><span class="richtext uppercase font-medium font-aktivgroteskextended mb-2 text-[28px] tablet-xl:text-[42px] desktop:text-[48px] max-w-[800px] tablet-xl:mb-6 leading-[36px] tablet-xl:leading-[46px] desktop:leading-[56px] text-black">Work from anywhere <br/> with Shopify</span><p class="richtext max-w-[680px] text-body-base tablet-xl:text-body-lg mb-2 tablet-xl:mb-9 text-black">See our open roles and learn more about our digital by design culture.</p><div data-component-name="button-group" class="text-base relative z-20 w-[273px] h-14" data-mode="light"><div class="flex gap-y-sm flex-wrap gap-x-sm justify-center"><a href="https://www.shopify.com/careers#Engineering" class="inline-block self-center overflow-hidden max-w-full px-button-px py-button-py ring-inset rounded-button text-button-size font-button-font font-button-weight tracking-button-tracking transition-all duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-state-focus focus-visible:outline md:px-button-lg-px md:py-button-lg-py md:text-button-lg-size border-2 text-button-light-primary-text bg-button-light-primary-bg border-button-light-primary-border ring-button-light-primary-border hover:text-button-light-primary-text-hover hover:bg-button-light-primary-bg-hover hover:border-button-light-primary-border-hover hover:ring-button-light-primary-border-hover focus:text-button-light-primary-text-focus focus:bg-button-light-primary-bg-focus focus:border-button-light-primary-border-focus focus:ring-button-light-primary-border-focus active:text-button-light-primary-text-active active:bg-button-light-primary-bg-active active:border-button-light-primary-border-active active:ring disabled:text-button-light-primary-text-disabled disabled:bg-button-light-primary-bg-disabled disabled:border-button-light-primary-border-disabled disabled:ring-button-light-primary-border-disabled w-[273px] sm:w-full" data-component-name="button" data-mode="light" target="_blank" rel="noopener noreferrer">See open roles</a></div></div></div></div></main><footer class="relative flex flex-col font-shopifysans bg-black text-white"><div id="NewWindowExternalSite" class="hidden">Opens an external site in a new window</div><section class="container flex flex-col gap-16 py-16 my-0 sm:justify-start sm:pb-16 md:flex-row md:flex-nowrap md:justify-between md:pb-20 md:py-20 md:gap-20 xl:w-full bg-black text-white" data-section-name="footer" data-section-index="1" data-component-name="footer" data-viewable-component="true"><div class="min-w-[100px]"><svg fill="none" role="img" viewBox="0 0 56 64" class="h-[44px]" height="64" data-component-name="shopify-logo"><title></title><g clip-path="url(#clip0_198_267)"><path d="M37.7102 7.42882C37.7102 7.42882 37.0044 7.6296 35.8448 7.98098C35.6432 7.32843 35.3407 6.57549 34.9374 5.77235C33.6266 3.26255 31.6604 1.90725 29.3414 1.90725C29.1901 1.90725 29.0389 1.90725 28.8372 1.95745C28.7868 1.85706 28.686 1.80686 28.6356 1.70647C27.6273 0.602155 26.3165 0.100194 24.7537 0.15039C21.7288 0.250783 18.7039 2.40921 16.284 6.27431C14.5699 8.9849 13.2591 12.3982 12.9062 15.0586C9.42764 16.1127 7.00774 16.8657 6.95733 16.9159C5.19282 17.468 5.1424 17.5182 4.94075 19.1747C4.7895 20.4296 0.151367 55.7676 0.151367 55.7676L38.2647 62.3433V7.37862C37.9623 7.37862 37.811 7.42882 37.7102 7.42882ZM28.8876 10.1394C26.8711 10.7418 24.6528 11.4445 22.485 12.0971C23.09 9.73784 24.2999 7.37862 25.7115 5.82255C26.2661 5.27039 27.0223 4.61784 27.8794 4.21627C28.7364 6.02333 28.9381 8.48294 28.8876 10.1394ZM24.7537 2.20843C25.4595 2.20843 26.0644 2.35902 26.5686 2.66019C25.7619 3.06176 24.9553 3.71431 24.1991 4.46725C22.2833 6.52529 20.8213 9.73784 20.2163 12.7998C18.4014 13.352 16.5865 13.9041 14.9228 14.4061C16.0319 9.58725 20.1155 2.30882 24.7537 2.20843ZM18.9056 29.8163C19.1072 33.0288 27.6273 33.7316 28.1314 41.3112C28.4843 47.2845 24.9553 51.3504 19.8634 51.6516C13.7129 52.0531 10.3351 48.439 10.3351 48.439L11.6459 42.9174C11.6459 42.9174 15.0237 45.4774 17.746 45.2767C19.5105 45.1763 20.1659 43.7206 20.1155 42.7167C19.8634 38.5002 12.9062 38.7512 12.4525 31.8241C12.0492 26.0014 15.8807 20.1284 24.3503 19.5763C27.6273 19.3755 29.291 20.1786 29.291 20.1786L27.3752 27.4069C27.3752 27.4069 25.2074 26.4029 22.6362 26.6037C18.9056 26.8547 18.8552 29.2139 18.9056 29.8163ZM30.9042 9.53706C30.9042 8.03117 30.7026 5.87274 29.9968 4.06568C32.3158 4.51745 33.4249 7.07745 33.9291 8.63353C33.0216 8.88451 32.0133 9.18568 30.9042 9.53706Z" fill="white"></path><path d="M39.4238 62.2429L55.254 58.3276C55.254 58.3276 48.448 12.4986 48.3976 12.1974C48.3472 11.8963 48.0951 11.6955 47.8431 11.6955C47.591 11.6955 43.1545 11.5951 43.1545 11.5951C43.1545 11.5951 40.4321 8.98488 39.4238 7.98096V62.2429Z" fill="white"></path><path d="M29.2498 20.2129L27.3148 27.4286C27.3148 27.4286 25.1548 26.4426 22.5898 26.6218C18.8098 26.8459 18.8098 29.2213 18.8098 29.8039C19.0348 33.0308 27.5398 33.7479 28.0348 41.3221C28.3948 47.2829 24.8848 51.3613 19.7548 51.6751C13.6348 51.9888 10.2598 48.4034 10.2598 48.4034L11.5648 42.8907C11.5648 42.8907 14.9848 45.4454 17.6848 45.2661C19.4398 45.1765 20.1148 43.6975 20.0248 42.7115C19.7548 38.4986 12.8248 38.7675 12.3748 31.8207C12.0148 25.9944 15.8398 20.1232 24.2998 19.5854C27.5848 19.3613 29.2498 20.2129 29.2498 20.2129Z" fill="black"></path></g><defs><clipPath id="clip0_198_267"><rect width="225" height="64" fill="white"></rect></clipPath></defs></svg></div><div class="md:block md:justify-end"><div class="flex flex-col flex-wrap gap-12 gap-x-4 md:gap-20 md:gap-x-16 sm:grid sm:max-h-fit sm:grid-cols-3 lg:grid-cols-4 max-h-[92rem] sm:max-h-[75rem]"><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="shopify"><h3 class="text-base font-bold text-white">Shopify</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/about" data-component-name="about" aria-label="">About</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/careers" data-component-name="careers" aria-label="">Careers</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://shopifyinvestors.com/home/default.aspx" data-component-name="investors" aria-label="">Investors</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/news" data-component-name="press-and-media" aria-label="">Press and Media</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/partners" data-component-name="partners" aria-label="">Partners</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/affiliates" data-component-name="affiliates" aria-label="">Affiliates</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/legal" data-component-name="legal" aria-label="">Legal</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopifystatus.com/" data-component-name="service-status" aria-label="">Service status</a></li></ul></div><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="support"><h3 class="text-base font-bold text-white">Support</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://help.shopify.com/en/questions" data-component-name="merchant-support" aria-label="">Merchant support</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://help.shopify.com/en/" data-component-name="help-center" aria-label="">Help center</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/partners/directory" data-component-name="hire-a-partner" aria-label="">Hire a Partner</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://academy.shopify.com?itcat=brochure&itterm=global-footer" data-component-name="" aria-label=""></a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://community.shopify.com/c/Shopify-Community/ct-p/en?utm_campaign=footer&utm_content=en&utm_medium=web&utm_source=shopify" data-component-name="shopify-community" aria-label="">Shopify Community</a></li></ul></div><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="developers"><h3 class="text-base font-bold text-white">Developers</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://shopify.dev" data-component-name="shopify-dev" aria-label="">Shopify.dev</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://shopify.dev/api" data-component-name="a-p-i-documentation" aria-label="">API documentation</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://devdegree.ca" data-component-name="dev-degree" aria-label="">Dev Degree</a></li></ul></div><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="products"><h3 class="text-base font-bold text-white">Products</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://shop.app" data-component-name="shop" aria-label="">Shop</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/shop-pay" data-component-name="shop-pay" aria-label="">Shop Pay</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.linkpop.com/" data-component-name="linkpop" aria-label="">Linkpop</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/enterprise" data-component-name="shopify-for-enterprise" aria-label="">Shopify for enterprise</a></li></ul></div><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="global-impact"><h3 class="text-base font-bold text-white">Global impact</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/climate" data-component-name="sustainability" aria-label="">Sustainability</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/about/social-impact" data-component-name="social-impact" aria-label="">Social impact</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/1mbb" data-component-name="build-black" aria-label="">Build Black</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://buildnative.shop" data-component-name="build-native" aria-label="">Build Native</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/plus/commerce-trends" data-component-name="research" aria-label="">Research</a></li></ul></div><div class="w-[calc(50%_-_1rem)] sm:w-fit" data-component-name="solutions"><h3 class="text-base font-bold text-white">Solutions</h3><ul class="mt-4 md:mt-6"><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/online" data-component-name="online-store-builder" aria-label="">Online store builder</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/website/builder" data-component-name="website-builder" aria-label="">Website builder</a></li><li><a class="mt-2 block py-3 text-base font-normal hover:underline md:py-0.5 text-[#E0E0E0] hover:text-white" href="https://www.shopify.com/tour/ecommerce-website" data-component-name="ecommerce-website" aria-label="">Ecommerce website</a></li></ul></div></div></div></section><section class="border-t my-0 container max-sm:mx-0 xl:w-full border-white border-opacity-20 bg-inherit" data-section-name="footer" data-section-index="2" data-component-name="footer" data-viewable-component="true"><div class="flex flex-col items-center justify-center gap-4 py-8 sm:items-start sm:gap-8 lg:flex-row lg:justify-between lg:gap-10 bg-black text-white"><div class="mt-1 flex w-full flex-col items-center justify-center sm:flex-row sm:items-start sm:justify-start sm:gap-8 lg:gap-14"><ul class="flex flex-col items-center flex-wrap sm:flex-row sm:items-start gap-x-8 md:gap-x-10" data-component-name="bottom-nav"><li class="mt-2 block py-3 sm:mt-0 text-[#E0E0E0] hover:text-white"><a class="hover:underline" href="https://www.shopify.com/legal/terms" data-component-name="terms-of-service" aria-label="">Terms of Service</a></li><li class="mt-2 block py-3 sm:mt-0 text-[#E0E0E0] hover:text-white"><a class="hover:underline" href="https://www.shopify.com/legal/privacy" data-component-name="privacy-policy" aria-label="">Privacy Policy</a></li><li class="mt-2 block py-3 sm:mt-0 text-[#E0E0E0] hover:text-white"><a class="hover:underline" href="https://www.shopify.com/sitemap" data-component-name="sitemap" aria-label="">Sitemap</a></li><li class="mt-2 block py-3 sm:mt-0 text-[#E0E0E0] hover:text-white"><a class="hover:underline" href="https://privacy.shopify.com/en" data-component-name="privacy-choices" aria-label="">Privacy Choices</a></li></ul></div><ul class="flex gap-4 md:gap-6" data-component-name="social"><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.facebook.com/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-facebook" aria-label=""><svg viewBox="0 0 30 30"><path d="M15.6 30V19.4h5V15h-5v-3.1c0-1 .6-1.9 1.3-1.9h3.8V5.6h-3.8c-3.1 0-5.6 2.8-5.6 6.3V15H7.5v4.4h3.8v10.1C4.8 27.9 0 22 0 15 0 6.7 6.7 0 15 0s15 6.7 15 15c0 8.1-6.4 14.7-14.4 15z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://x.com/shopifyeng" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-twitter" aria-label=""><svg viewBox="0 0 19 19"><path fill-rule="evenodd" clip-rule="evenodd" d="M19 9.5C19 14.7467 14.7467 19 9.5 19C4.25329 19 0 14.7467 0 9.5C0 4.25329 4.25329 0 9.5 0C14.7467 0 19 4.25329 19 9.5ZM8.18721 10.0675L3.64633 3.99603H7.14609L10.123 7.97639L13.8073 3.99603H14.8358L10.5825 8.59099L15.379 15.0039H11.8792L8.64689 10.6819L4.6462 15.0039H3.61771L8.18721 10.0675ZM6.76655 4.75353H5.15877L12.2586 14.2464H13.8663L6.76655 4.75353Z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.youtube.com/user/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-youtube" aria-label=""><svg viewBox="0 0 30 30"><path d="M30 15c0 8.3-6.7 15-15 15S0 23.3 0 15 6.7 0 15 0s15 6.7 15 15zm-5.6 0c0-6.9 0-6.9-9.4-6.9s-9.4 0-9.4 6.9 0 6.9 9.4 6.9 9.4 0 9.4-6.9zm-11.9-3.7 6.3 3.8-6.3 3.8v-7.6z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.instagram.com/shopify/" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-instagram" aria-label=""><svg viewBox="0 0 18 18"><path clip-rule="evenodd" d="M9 0c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zM6.7 3.5h4.7c1.8 0 3.2 1.4 3.2 3.1v4.7c0 1.7-1.4 3.1-3.2 3.1H6.7c-1.8 0-3.2-1.4-3.2-3.1V6.7c0-1.8 1.4-3.2 3.2-3.2zM9 6.2c1.6 0 2.9 1.3 2.9 2.9S10.6 12 9 12s-3-1.3-3-2.9 1.3-2.9 3-2.9zm0 1.2c.9 0 1.7.8 1.7 1.7 0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7 0-.9.7-1.7 1.7-1.7zm2.8-1.7c.3 0 .6.2.6.6 0 .3-.2.6-.6.6-.3 0-.6-.2-.6-.6 0-.4.3-.6.6-.6zm-4.6-1h3.7c1.4 0 2.5 1.1 2.5 2.5v3.7c0 1.4-1.1 2.5-2.5 2.5H7.2c-1.4 0-2.5-1.1-2.5-2.5V7.2c-.1-1.4 1.1-2.5 2.5-2.5z" fill-rule="evenodd"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.tiktok.com/@shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-tiktok" aria-label=""><svg viewBox="0 0 30 30"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM17.9679 11.937C19.1423 12.7643 20.551 13.2076 21.9952 13.2041V10.3838C21.2138 10.3841 20.4497 10.1579 19.7979 9.73365C19.3398 9.44298 18.9467 9.06336 18.6427 8.61802C18.3387 8.17268 18.1302 7.67098 18.0299 7.1436C17.9873 6.90737 17.9669 6.66779 17.9689 6.42789H15.0829V17.7069C15.0829 18.2146 14.92 18.7094 14.6173 19.1206C14.3146 19.5317 13.8877 19.8382 13.3975 19.9962C12.9073 20.1543 12.3789 20.1558 11.8878 20.0006C11.3966 19.8454 10.9679 19.5414 10.6627 19.1321C10.3576 18.7227 10.1916 18.2289 10.1886 17.7211C10.1856 17.2134 10.3456 16.7177 10.6458 16.3048C10.946 15.8919 11.3711 15.583 11.8604 15.4221C12.3496 15.2612 12.878 15.2566 13.37 15.409V12.5068C12.2944 12.3595 11.1987 12.539 10.2295 13.0213C9.26031 13.5037 8.46383 14.2658 7.94658 15.2058C7.42933 16.1458 7.21597 17.2188 7.33504 18.2814C7.4541 19.344 7.89992 20.3455 8.61286 21.1519C9.3258 21.9583 10.2719 22.5312 11.3246 22.794C12.3772 23.0568 13.4863 22.997 14.5035 22.6225C15.5207 22.2479 16.3975 21.5766 17.0166 20.6983C17.6357 19.82 17.9676 18.7766 17.9679 17.7075V11.937Z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.linkedin.com/company/shopify" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-linkedin" aria-label=""><svg viewBox="0 0 30 30"><path d="M30 15c0 8.3-6.7 15-15 15S0 23.3 0 15 6.7 0 15 0s15 6.7 15 15zM11.3 7.8c0-1.2-1-2.2-2.5-2.2s-2.5.9-2.5 2.2c0 1.2 1 2.2 2.5 2.2s2.5-1 2.5-2.2zm-.7 4.1H6.9v10.6h3.8V11.9zm13.8 5c0-3.4-1.7-5.6-4.4-5.6-1.5 0-2.6.9-3.1 2.3l-.1-1.6H13c0 .4.1 2.5.1 2.5v8.1h3.8V17c0-1.5.7-2.5 1.8-2.5s1.9.6 1.9 2.5v5.6h3.8v-5.7z"></path></svg></a></li><li><a class="block h-8 w-8 fill-white hover:fill-shade-30" href="https://www.pinterest.com/shopify/" rel="me nofollow noopener noreferrer" target="_blank" data-component-name="social-pinterest" aria-label=""><svg viewBox="0 0 30 30"><path d="M15 30c-1.5 0-2.9-.2-4.3-.6.6-.9 1.2-2 1.5-3.2.2-.7 1-4.1 1-4.1.5 1 2 1.9 3.7 1.9 4.8 0 8.1-4.4 8.1-10.3 0-4.4-3.8-8.6-9.5-8.6-7.1-.1-10.6 5-10.6 9.3 0 2.6 1 4.9 3.1 5.7.3.1.7 0 .8-.4.1-.2.2-.9.3-1.2.1-.4 0-.5-.2-.8-.6-.7-1-1.6-1-3 0-3.8 2.8-7.2 7.4-7.2 4 0 6.2 2.5 6.2 5.8 0 4.3-1.9 8-4.8 8-1.6 0-2.7-1.3-2.4-2.9.5-1.9 1.3-4 1.3-5.3 0-1.2-.7-2.3-2-2.3-1.6 0-2.9 1.7-2.9 3.9 0 1.4.5 2.4.5 2.4S9.5 24 9.3 25.3c-.3 1.1-.4 2.4-.3 3.5-5.3-2.4-9-7.7-9-13.8C0 6.7 6.7 0 15 0s15 6.7 15 15-6.7 15-15 15z"></path></svg></a></li></ul></div></section></footer></div></div><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/entry.client-DwbT9GtS.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/enums-CqpDel02.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/I18N-DkwmfuKm.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Wrapper-DhZo7Nml.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Section-Bl3w6paD.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/SideBySide-BIF2EZB1.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Provider-CQVAfcXd.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/HeadingGroup-1EyidEKf.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/root-DSZyfDOi.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/blog-CclTzyK5.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/layout-CR0rDhCR.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringBlogFooter-C9aEb07f.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/XIcon.svg-1TYfFUVM.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringPageLayout-BenRbSvA.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Checkmark-DIG1PPwH.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/ArticleCarousel-C5IDQsOb.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/useBlogPageTitle-B_wJ7raq.js"/><link rel="modulepreload" href="https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/route-BuTjHipM.js"/><script>window.__remixContext = {"url":"/shopifys-platform-is-the-web-platform","basename":"/","future":{"v3_fetcherPersist":false,"v3_relativeSplatPath":false,"v3_throwAbortReason":false,"unstable_singleFetch":false,"unstable_fogOfWar":true},"isSpaMode":false,"state":{"loaderData":{"pages/shopify.engineering/$article":{"article":{"__typename":"Article","authorV2":{"__typename":"ArticleAuthor","name":"Surma ","avatarUrl":"https://www.gravatar.com/avatar/4034b3a1814ab27074d27fdf64253ec0?s=200\u0026d=404","isDisabledAuthor":false},"id":"gid://shopify/Article/557940179000","handle":"shopifys-platform-is-the-web-platform","title":"Shopify’s platform is the Web platform","publishedAt":"2023-07-26T15:51:33Z","image":{"__typename":"Image","url":"https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786","altText":null,"width":1024,"height":430},"tags":["Apps","Popular"],"contentHtml":"\u003ch2\u003eRemix for Shopify Apps\u003c/h2\u003e\n\u003ch3\u003eTL;DR\u003c/h3\u003e\n\u003cp\u003eRemix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix also embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills when developing for Shopify. We are reshaping Shopify’s platform to embody the same values, for example by releasing a new, web-centric version of App Bridge.\u003c/p\u003e\n\u003ch3\u003eAdmin Apps\u003c/h3\u003e\n\u003cp\u003eOne of the powerful ways you can develop for Shopify is by building apps that merchants install to their store. Apps can consist of multiple parts that extend Shopify in different ways, and one core component found in almost every app is the Admin App: A UI that merchants interact with within the admin area of their store. Here, you can let merchants configure the way your app behaves in their store, visualize data or integrate it with other services outside of Shopify.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ci\u003eHeads-up\u003c/i\u003e\u003c/strong\u003e\u003ci\u003e: The restrictions outlined below apply specifically to cross-origin iframes, where the iframe is on a different origin than the top-level page. This article exclusively talks about cross-origin iframes \u003ci\u003eas all Admin Apps are hosted on a different origin than Shopify Admin.\u003c/i\u003e\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003eAdmin apps are, at their core, web apps that Shopify Admin runs in an \u003ccode\u003e\u0026lt;iframe\u0026gt;\u003c/code\u003e. Iframes are the web’s way of composing multiple web apps together into one, allowing each iframe to take control of a dedicated space of the top-level page. The browser provides a strong isolation between these individual apps (“sandboxing”), so that each app can only influence the space they have been assigned and not interfere with anything else. In a sense, Shopify Admin functions like an operating system where merchants install multiple applications and use them to customize and enhance their workflows.\u003c/p\u003e\n\u003cp\u003eWithout going into technical details, iframes have been misused in the last few decades as a way to track user behavior on the web. To counteract that, browser vendors have started to restrict what web apps running inside an iframe can and cannot do. As an example, iframes in Safari do not get to set cookies or store data in IndexDB, LocalStorage or SessionStorage. As a result of all these restrictions, some standard practices of web development do not work inside iframes. This can be a source of headaches for developers.\u003c/p\u003e\n\u003cp\u003eShopify wants to allow developers to deeply integrate their apps with Shopify Admin. The browser’s sandboxing can get in the way of that. The only way to pierce the isolation between Shopify Admin and the app’s iframe is through the \u003ccode\u003epostMessage()\u003c/code\u003e API, which allows the two pages to send each other messages in the form of JavaScript objects.\u003c/p\u003e\n\u003ch3\u003eThe journey so far: App Bridge\u003c/h3\u003e\n\u003cp\u003eWith \u003ccode\u003epostMessage()\u003c/code\u003e being the only way to pierce the browser sandbox between page and iframe, we built \u003ca href=\"https://shopify.dev/docs/apps/tools/app-bridge/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eApp Bridge\u003c/a\u003e, a message-based protocol. On the one hand, it provides capabilities that can be used to restore functionality that browsers removed in their quest to protect user privacy. On the other hand, it also exposes a set of capabilities and information that allows deep integration of apps with Shopify Admin. The App Bridge protocol is supported by Shopify Admin on the Web and on the mobile app, giving merchants a consistent experience no matter how they prefer to work.\u003c/p\u003e\n\u003cstrong\u003eRestoring Web Development\u003c/strong\u003e\n\u003cp\u003eOne example for web development patterns that don’t work in iframes are URLs. When a merchant navigates through an admin app, the app typically updates their URL using client-side routers like \u003ccode\u003ereact-router\u003c/code\u003e (which in turn uses \u003ccode\u003epushState()\u003c/code\u003e and friends from the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWeb’s History API\u003c/a\u003e), to update what is shown in the iframe. However, that new URL is not reflected in the browser’s address bar at all. The iframe can only change its own URL, not the parent’s page. That means if a merchant reloads the page, they will reload Shopify Admin in the same place, but the app will be opened on the landing page. Through App Bridge, we allow apps to update a dedicated fragment of the top-level page URL, fixing this behavior.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Restoring_Web_Development_-_Admin.png?v=1690215094\" alt=\"Image of the Shopify Admin, highlight show Shopify renders and how Developer Renders\"\u003e\u003c/p\u003e\n\u003cp\u003eAnother example can be found in the sidebar of Shopify Admin, which by default is inaccessible for any iframe running in the Admin. Through App Bridge, however, an app is able to add additional menu items in the sidebar, giving merchants a more efficient way of navigating:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Screenshot_2023-07-31_at_11.56.31.png?v=1690809573\" alt=\"Image of additional menu items in sidebar navigation. This image calls out additional pages as the new nav.\"\u003e\u003c/p\u003e\n\u003cp\u003eAs a last example, let’s talk about cookies. Cookies and other storage mechanisms are not (reliably) available in iframes, so a developer has no way to remember which user originally opened the app. This is critical information for the app because it ensures GraphQL API requests are working against the correct shop. To remedy this, \u003ca href=\"https://shopify.dev/docs/apps/auth/oauth/session-tokens\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eApp Bridge provides an OpenID Connect ID Token\u003c/a\u003e to give the app a way to always determine the identity of the currently active user.\u003c/p\u003e\n\u003cstrong\u003eDeveloper Experience\u003c/strong\u003e\n\u003cp\u003eSo far, App Bridge was given to developers in two shapes: \u003ccode\u003e@shopify/app-bridge\u003c/code\u003e, which was a very thin wrapper over the \u003ccode\u003epostMessage()\u003c/code\u003e-based interface. The API still felt like passing messages around, and it left a lot of work up to developers, like mapping requests to responses. While this was flexible and assumed almost nothing, it was not convenient to use.\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/c8953181b8d34880ad6bd73ca44c24a0.js\"\u003e\u003c/script\u003e\n\u003cp\u003eTo address this, we also maintained \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e, which wrapped the low-level primitives from the former in React components, providing a much better developer experience (DX).\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/3b8a2157dde05bcddb568d1b52eaac34.js\"\u003e\u003c/script\u003e\n\u003cp\u003eThis was a substantial improvement when you are using React, but these components were not really idiomatic and did not work with systems like Remix that utilize server-side rendering (SSR). This meant we had to invest into updating App Bridge, so while we were at it, we took a page out of Remix’s playbook: Instead of making developers who are new to Shopify learn how to use the \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e, we wanted to allow them to use APIs they are already familiar with by nature of doing web development.\u003c/p\u003e\n\u003ch3\u003eThe last version of App Bridge\u003c/h3\u003e\n\u003cp\u003eWe have a new — and final! — version of App Bridge! It replaces \u003ccode\u003e@shopify/app-bridge\u003c/code\u003e and, in the near future, will form the underpinnings of \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e. We have rewritten it from the ground up, embracing modern web development technologies and best practices.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSimpler, one-off setup\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eTo use one of our previous App Bridge clients, developers had to copy a snippet of initialization code. We realized that this is unnecessary and can lead to confusion. Going forward, all you need to do is include a \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e tag in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e of your document, and you are good to go!\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/63f9e1c27fb3a2a110551cb1444a6faf.js\"\u003e\u003c/script\u003e\n\u003cp\u003eWhile loading a script from a CDN might seem a bit old-school, it is an intentional choice: This way we can deploy fixes to App Bridge that reach all apps \u003ci\u003eimmediately. \u003c/i\u003eWe are committed to maintaining backwards compatibility, without asking developers again to update their npm dependencies and redeploy their app. Now, developers have a more stable and reliable platform to build on!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eFixing the environment\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eApp Bridge aims to fix all the things that got broken by browsers (or by Shopify!) by running apps inside an iframe. For example, with App Bridge running, you can use \u003ccode\u003ehistory.pushState()\u003c/code\u003e like you would in normal web development, and App Bridge will automatically inform Shopify Admin about the URL changes.\u003c/p\u003e\n\u003cp\u003eThis has wider implications than what it might seem like at first. For the \u003ccode\u003ehistory\u003c/code\u003e example, the implication is that client-side routing libraries like \u003ccode\u003ereact-router\u003c/code\u003e work inside Admin apps \u003cem\u003eout of the box\u003c/em\u003e. Our goal with App Bridge is to fix iframes to the extent that all your standard web development practices, libraries and even frameworks work as expected without having to write custom logic or adapters.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eEnhancing the environment\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eTo enable deeper integrations like the side navigation mentioned above, we chose to go with \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCustom Elements\u003c/a\u003e to build custom HTML elements. Custom Elements are a web standard and are supported by all browsers. The choice was simple: All web frameworks, past, present and future make extensive use of the DOM API and as such will be able to interface with any HTML element, custom and built-in. Another nice benefit is that these Custom Elements can be inspected and manipulated with your browser’s DevTools — no extension required.\u003c/p\u003e\n\n\u003cp style=\"text-align: center;\"\u003e\u003cvideo controls=\"controls\" width=\"100%\" height=\"100%\" loop=\"loop\" muted=\"\" type=\"video/mp4\" autoplay=\"autoplay\"\u003e\u003csource src=\"https://cdn.shopify.com/videos/c/o/v/c141d006e291465d98a11db0e0aaa429.mp4\" type=\"video/mp4\"\u003eYour browser does not support the video tag.\n\u003c/source\u003e\u003c/video\u003e\u003c/p\u003e\n\n\u003cp\u003eIf a merchant clicks any of these links, App Bridge will automatically forward that \u003ccode\u003eclick\u003c/code\u003e event to the corresponding \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag inside the iframe. This means that a client-side router like Remix’s \u003ccode\u003ereact-router\u003c/code\u003e will also work with these links as expected.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eStatus Quo\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eYou can find a list of all our capabilities in App Bridge in our \u003ca href=\"https://shopify.dev/docs/api/app-bridge\" target=\"_blank\" rel=\"noopener noreferrer\"\u003edocumentation\u003c/a\u003e. This new version of App Bridge is ready for you to use in production right now! However, we did not break the old App Bridge clients. Deployed apps will continue to work with no action required from the developer. If, for some reason, you want to mix-and-match the new and the old App Bridge clients, you can do that, too!\u003c/p\u003e\n\u003ch3\u003eRemix\u003c/h3\u003e\n\u003cp\u003eIn October 2022, \u003ca href=\"https://shopify.engineering/remix-joins-shopify\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ewe announced that Remix joined Shopify\u003c/a\u003e. Remix and its team are pioneers at putting the web at the center of their framework to help developers build fast and resilient web apps with ease. With App Bridge restoring a normal web development environment (despite being inside an iframe), Remix works out of the box. \u003c/p\u003e\n\u003cp\u003eRemix is opinionated about how to build apps. Remix stipulates that apps are separated into routes and each route defines how to get the data it needs to render its content. Whenever the app is opened on a specific URL or path, Remix looks inside the special \u003ccode\u003eroutes/\u003c/code\u003e folder and loads the JavaScript file at that path. For example, if your app is loaded with the URL \u003ccode\u003ehttp://myapp.com/products/4\u003c/code\u003e, Remix will look for \u003ccode\u003e/routes/products/4.js\u003c/code\u003e and if it can’t find that, it will look if there are matches with placeholders, like \u003ccode\u003e/routes/products/$id.js\u003c/code\u003e. These files define the content that should be delivered through React components. Remix will detect whether the incoming request is a browser navigation (where HTML needs to be returned) or a client-side navigation (where data needs to be returned, so it can be consumed by \u003ccode\u003ereact-router\u003c/code\u003e), and will render the response appropriately. Each route can define a loader function which is called to load the data it needs to render. The \u003ccode\u003eloader\u003c/code\u003e runs server-side and can make use of databases or 3rd party APIs. Remix takes care of feeding that data into the server-side render or transporting it to the frontend for the client-side render. This happens completely transparently for the developer, allowing them to focus on the \u003ci\u003ewhat, \u003c/i\u003enot the\u003ci\u003e \u003ci\u003ehow. \u003c/i\u003e\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003eWith Remix, an app’s backend and the API becomes a by-product of writing the frontend. The API endpoints are implicitly generated and maintained by Remix \u003ca href=\"https://www.youtube.com/watch?v=NXqEP_PsPNc\u0026amp;list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ethrough the definition of loaders and actions\u003c/a\u003e. This is not only a massive improvement in developer convenience, but also has performance benefits as server-side rendering lets apps get personalized content on screen faster than a traditional, client-side app.\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eShopify’s API\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eMost Shopify apps need to interact with \u003ca href=\"https://shopify.dev/docs/api/admin-graphql\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eShopify’s GraphQL API\u003c/a\u003e. While our GraphQL API is usable with any GraphQL client, there are a small number of Shopify-specific parts that need to be set up, like getting the OAuth access token, handling ID Tokens and HMAC signature verification. To keep the template as clutter-free as possible, we have implemented all of this in our \u003ccode\u003e@shopify/shopify-app-remix\u003c/code\u003e package, which does all the heavy lifting, so you can continue to focus on the business logic.\u003c/p\u003e\n\u003cp\u003eHere is how you configure your \u003ccode\u003eshopify\u003c/code\u003e singleton:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/64c6990bf861148d90826b7958dbfdf0.js\"\u003e\u003c/script\u003e\n\u003cp\u003eAnd here is how you use it to get access to Shopify’s Admin GraphQL API for the shop that is loading the app:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/029f8455f5be3b3bc5f4f011fd1b6aab.js\"\u003e\u003c/script\u003e\n\u003ch3\u003e\u003cstrong\u003eStorage\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eMany apps need to store additional data, about the customers, merchants, products, or store session data. In the past, our templates came with a SQLite database and some adapters to use popular databases like \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-mysql\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eMySQL\u003c/a\u003e or \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-redis\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eRedis\u003c/a\u003e. An opinionated approach is a core part of Remix, so we are following suit by providing \u003ca href=\"https://www.prisma.io/\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"Prisma.io\"\u003ePrisma\u003c/a\u003e out of the box. Prisma provides battle-tested adapters for most databases and provides an ergonomic ORM API and a UI to inspect your database’s contents.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Storage.png?v=1690215618\" alt=\"Storage screenshot of Prisma provided databse and UI\"\u003e\u003c/p\u003e\n\u003cp\u003eWe don’t want you to reinvent the wheel on how to store your user’s session information, so we’ve published a \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ePrisma Adapter\u003c/a\u003e that takes care of storing sessions. You can use this adapter even if you use one of our previous app templates, as it is completely Remix agnostic.\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eQuickstart\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eTo get you started as quickly as possible, we have integrated the new Remix template for Admin apps into our Shopify CLI. You can get started right now with this command and choose the brand-new Remix option:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/225f4ef5da6a6746ab7846168f106c95.js\"\u003e\u003c/script\u003e\n\u003cp\u003eIf you have any feedback or questions, please feel free to open an issue on the repository’s \u003ca href=\"https://github.com/Shopify/shopify-app-template-remix/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eissue tracker\u003c/a\u003e.\u003c/p\u003e\n\u003ch3\u003eGoing forward\u003c/h3\u003e\n\u003cp\u003eA Remix template for Admin apps and the new App Bridge client are just the start of Shopify’s effort to make its platform more stable and intuitive for developers. We are also launching similar reworks for Checkout extensions and are rethinking our design system, \u003ca href=\"https://polaris.shopify.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ePolaris\u003c/a\u003e, to be more flexible, idiomatic and generic.\u003c/p\u003e\n\u003cp\u003eWe are extremely excited about this direction for Shopify’s platform. We want to leverage more of the web development ecosystem and want to get out the way more to let you choose the right tools for the job. We can’t wait to see how you will put all these new powers to good use!\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded\"\u003e\n\u003cp\u003eThis post was written by\u003cstrong\u003e Surma.\u003c/strong\u003e DX at Shopify. Web Platform Advocate. Craving simplicity, finding it nowhere. He/him. Internetrovert 🏳️‍🌈. Find him on \u003ca href=\"https://twitter.com/dassurma\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003e, \u003ca href=\"https://github.com/surma\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eGitHub\u003c/a\u003e, or at \u003ca href=\"https://surma.dev\" target=\"_blank\" rel=\"noopener noreferrer\"\u003esurma.dev\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e","excerpt":"","excerptHtml":"","seo":{"__typename":"SEO","title":null,"description":"Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills."},"metafields":[null,null,null,null,null,null,null],"imageUrl":"https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786","imageAltText":null,"imageClass":"","modifiedAt":"Jul 26, 2023","modifiedAtRaw":"2023-07-26T15:51:33Z"},"metaDescription":"Remix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills.","contentHtml":"\u003ch2\u003eRemix for Shopify Apps\u003c/h2\u003e\n\u003ch3\u003eTL;DR\u003c/h3\u003e\n\u003cp\u003eRemix is now the recommended way to build Admin apps on Shopify. With Remix, you get a best-in-class developer experience while ensuring exceptional out-of-the-box performance for your app. Remix also embraces the web platform and web standards, allowing web developers to use more of their existing knowledge and skills when developing for Shopify. We are reshaping Shopify’s platform to embody the same values, for example by releasing a new, web-centric version of App Bridge.\u003c/p\u003e\n\u003ch3\u003eAdmin Apps\u003c/h3\u003e\n\u003cp\u003eOne of the powerful ways you can develop for Shopify is by building apps that merchants install to their store. Apps can consist of multiple parts that extend Shopify in different ways, and one core component found\u0026nbsp; in almost every app is the Admin App: A UI that merchants interact with within the admin area of their store. Here, you can let merchants configure the way your app behaves in their store, visualize data or integrate it with other services outside of Shopify.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ci\u003eHeads-up\u003c/i\u003e\u003c/strong\u003e\u003ci\u003e: The restrictions outlined below apply specifically to cross-origin iframes, where the iframe is on a different origin than the top-level page. This article exclusively talks about cross-origin iframes \u003ci\u003eas all Admin Apps are hosted on a different origin than Shopify Admin.\u003c/i\u003e\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003eAdmin apps are, at their core, web apps that Shopify Admin runs in an \u003ccode\u003e\u0026lt;iframe\u0026gt;\u003c/code\u003e. Iframes are the web’s way of composing multiple web apps together into one, allowing each iframe to take control of a dedicated space of the top-level page. The browser provides a strong isolation between these individual apps (“sandboxing”), so that each app can only influence the space they have been assigned and not interfere with anything else. In a sense, Shopify Admin functions like an operating system where merchants install multiple applications and use them to customize and enhance their workflows.\u003c/p\u003e\n\u003cp\u003eWithout going into technical details, iframes have been misused in the last few decades as a way to track user behavior on the web. To counteract that, browser vendors have started to restrict what web apps running inside an iframe can and cannot do. As an example, iframes in Safari do not get to set cookies or store data in IndexDB, LocalStorage or SessionStorage. As a result of all these restrictions, some standard practices of web development do not work inside iframes. This can be a source of headaches for developers.\u003c/p\u003e\n\u003cp\u003eShopify wants to allow developers to deeply integrate their apps with Shopify Admin. The browser’s sandboxing can get in the way of that. The only way to pierce the isolation between Shopify Admin and the app’s iframe is through the \u003ccode\u003epostMessage()\u003c/code\u003e API, which allows the two pages to send each other messages in the form of JavaScript objects.\u003c/p\u003e\n\u003ch3\u003eThe journey so far: App Bridge\u003c/h3\u003e\n\u003cp\u003eWith \u003ccode\u003epostMessage()\u003c/code\u003e being the only way to pierce the browser sandbox between page and iframe, we built \u003ca href=\"https://shopify.dev/docs/apps/tools/app-bridge\" target=\"_blank\"\u003eApp Bridge\u003c/a\u003e, a message-based protocol. On the one hand, it provides capabilities that can be used to restore functionality that browsers removed in their quest to protect user privacy. On the other hand, it also exposes a set of capabilities and information that allows deep integration of apps with Shopify Admin. The App Bridge protocol is supported by Shopify Admin on the Web and on the mobile app, giving merchants a consistent experience no matter how they prefer to work.\u003c/p\u003e\n\u003cstrong\u003eRestoring Web Development\u003c/strong\u003e\n\u003cp\u003eOne example for web development patterns that don’t work in iframes are URLs. When a merchant navigates through an admin app, the app typically updates their URL using client-side routers like \u003ccode\u003ereact-router\u003c/code\u003e (which in turn uses \u003ccode\u003epushState()\u003c/code\u003e and friends from the \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/History_API\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eWeb’s History API\u003c/a\u003e), to update what is shown in the iframe. However, that new URL is not reflected in the browser’s address bar at all. The iframe can only change its own URL, not the parent’s page. That means if a merchant reloads the page, they will reload Shopify Admin in the same place, but the app will be opened on the landing page. Through App Bridge, we allow apps to update a dedicated fragment of the top-level page URL, fixing this behavior.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Restoring_Web_Development_-_Admin.png?v=1690215094\" alt=\"Image of the Shopify Admin, highlight show Shopify renders and how Developer Renders\"\u003e\u003c/p\u003e\n\u003cp\u003eAnother example can be found in the sidebar of Shopify Admin, which by default is inaccessible for any iframe running in the Admin. Through App Bridge, however, an app is able to add additional menu items in the sidebar, giving\u0026nbsp; merchants a more efficient way of navigating:\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Screenshot_2023-07-31_at_11.56.31.png?v=1690809573\" alt=\"Image of additional menu items in sidebar navigation. This image calls out additional pages as the new nav.\" loading=\"lazy\"\u003e\u003c/p\u003e\n\u003cp\u003eAs a last example, let’s talk about cookies. Cookies and other storage mechanisms are not (reliably) available in iframes, so a developer has no way to remember which user originally opened the app. This is critical information for the app because it ensures GraphQL API requests are working against the correct shop. To remedy this, \u003ca href=\"https://shopify.dev/docs/apps/auth/oauth/session-tokens\" target=\"_blank\"\u003eApp Bridge provides an OpenID Connect ID Token\u003c/a\u003e to give the app a way to always determine the identity of the currently active user.\u003c/p\u003e\n\u003cstrong\u003eDeveloper Experience\u003c/strong\u003e\n\u003cp\u003eSo far, App Bridge was given to developers in two shapes: \u003ccode\u003e@shopify/app-bridge\u003c/code\u003e, which was a very thin wrapper over the \u003ccode\u003epostMessage()\u003c/code\u003e-based interface. The API still felt like passing messages around, and it left a lot of work up to developers, like mapping requests to responses. While this was flexible and assumed almost nothing, it was not convenient to use.\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/c8953181b8d34880ad6bd73ca44c24a0.js\"\u003e\u003c/script\u003e\n\u003cp\u003eTo address this, we also maintained \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e, which wrapped the low-level primitives from the former in React components, providing a much better developer experience (DX).\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/3b8a2157dde05bcddb568d1b52eaac34.js\"\u003e\u003c/script\u003e\n\u003cp\u003eThis was a substantial improvement when you are using React, but these components were not really idiomatic and did not work with systems like Remix that utilize server-side rendering (SSR). This meant we had to invest into updating App Bridge, so while we were at it, we took a page out of Remix’s playbook: Instead of making developers who are new to Shopify learn how to use the \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e, we wanted to allow them to use APIs they are already familiar with by nature of doing web development.\u003c/p\u003e\n\u003ch3\u003eThe last version of App Bridge\u003c/h3\u003e\n\u003cp\u003eWe have a new — and final! — version of\u0026nbsp; App Bridge! It replaces \u003ccode\u003e@shopify/app-bridge\u003c/code\u003e and, in the near future, will form the underpinnings of \u003ccode\u003e@shopify/app-bridge-react\u003c/code\u003e. We have rewritten it from the ground up, embracing modern web development technologies and best practices.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eSimpler, one-off setup\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eTo use one of our previous App Bridge clients, developers had to copy a snippet of initialization code. We realized that this is unnecessary and can lead to confusion. Going forward, all you need to do is include a \u003ccode\u003e\u0026lt;script\u0026gt;\u003c/code\u003e tag in the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e of your document, and you are good to go!\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/63f9e1c27fb3a2a110551cb1444a6faf.js\"\u003e\u003c/script\u003e\n\u003cp\u003eWhile loading a script from a CDN might seem a bit old-school, it is an intentional choice: This way we can deploy fixes to App Bridge that reach all apps \u003ci\u003eimmediately. \u003c/i\u003eWe are committed to maintaining backwards compatibility, without asking developers again to update their npm dependencies and redeploy their app. Now, developers have a more stable and reliable platform to build on!\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eFixing the environment\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eApp Bridge aims to fix all the things that got broken by browsers (or by Shopify!) by running apps inside an iframe. For example, with App Bridge running, you can use \u003ccode\u003ehistory.pushState()\u003c/code\u003e like you would in normal web development, and App Bridge will automatically inform Shopify Admin about the URL changes.\u003c/p\u003e\n\u003cp\u003eThis has wider implications than what it might seem like at first. For the \u003ccode\u003ehistory\u003c/code\u003e example, the implication is that client-side routing libraries like \u003ccode\u003ereact-router\u003c/code\u003e work inside Admin apps \u003cem\u003eout of the box\u003c/em\u003e. Our goal with App Bridge is to fix iframes to the extent that all your standard web development practices, libraries and even frameworks work as expected without having to write custom logic or adapters.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eEnhancing the environment\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eTo enable deeper integrations like the side navigation mentioned above, we chose to go with \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eCustom Elements\u003c/a\u003e to build custom HTML elements. Custom Elements are a web standard and are supported by all browsers. The choice was simple: All web frameworks, past, present and future make extensive use of the DOM API and as such will be able to interface with any HTML element, custom and built-in. Another nice benefit is that these Custom Elements can be inspected and manipulated with your browser’s DevTools — no extension required.\u003c/p\u003e\n\n\u003cp style=\"text-align: center;\"\u003e\u003cvideo controls=\"controls\" width=\"100%\" height=\"100%\" loop=\"loop\" muted=\"\" type=\"video/mp4\" autoplay=\"autoplay\"\u003e\u003csource src=\"https://cdn.shopify.com/videos/c/o/v/c141d006e291465d98a11db0e0aaa429.mp4\" type=\"video/mp4\"\u003eYour browser does not support the video tag.\n\u003c/video\u003e\u003c/p\u003e\n\n\u003cp\u003eIf a merchant clicks any of these links, App Bridge will automatically forward that \u003ccode\u003eclick\u003c/code\u003e event to the corresponding \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag inside the iframe. This means that a client-side router like Remix’s \u003ccode\u003ereact-router\u003c/code\u003e will also work with these links as expected.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eStatus Quo\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eYou can find a list of all our capabilities in App Bridge in our \u003ca href=\"https://shopify.dev/docs/api/app-bridge\" target=\"_blank\"\u003edocumentation\u003c/a\u003e. This new version of App Bridge is ready for you to use in production right now! However, we did not break the old App Bridge clients. Deployed apps will continue to work with no action required from the developer. If, for some reason, you want to mix-and-match the new and the old App Bridge clients, you can do that, too!\u003c/p\u003e\n\u003ch3\u003eRemix\u003c/h3\u003e\n\u003cp\u003eIn October 2022, \u003ca href=\"/remix-joins-shopify\" target=\"_blank\"\u003ewe announced that Remix joined Shopify\u003c/a\u003e. Remix and its team are pioneers at putting the web at the center of their framework to help developers build fast and resilient web apps with ease. With App Bridge restoring a normal web development environment (despite being inside an iframe), Remix works out of the box.\u0026nbsp;\u003c/p\u003e\n\u003cp\u003eRemix is opinionated about how to build apps. Remix stipulates that apps are separated into routes and each route defines how to get the data it needs to render its content. Whenever the app is opened on a specific URL or path, Remix looks inside the special \u003ccode\u003eroutes/\u003c/code\u003e folder and loads the JavaScript file at that path. For example, if your app is loaded with the URL \u003ccode\u003ehttp://myapp.com/products/4\u003c/code\u003e, Remix will look for \u003ccode\u003e/routes/products/4.js\u003c/code\u003e and if it can’t find that, it will look if there are matches with placeholders, like \u003ccode\u003e/routes/products/$id.js\u003c/code\u003e. These files define the content that should be delivered through React components. Remix will detect whether the incoming request is a browser navigation (where HTML needs to be returned) or a client-side navigation (where data needs to be returned, so it can be consumed by \u003ccode\u003ereact-router\u003c/code\u003e), and will render the response appropriately. Each route can define a loader function which is called to load the data it needs to render. The \u003ccode\u003eloader\u003c/code\u003e runs server-side and can make use of databases or 3rd party APIs. Remix takes care of feeding that data into the server-side render or transporting it to the frontend for the client-side render. This happens completely transparently for the developer, allowing them to focus on the \u003ci\u003ewhat, \u003c/i\u003enot the\u003ci\u003e \u003ci\u003ehow.\u0026nbsp;\u003c/i\u003e\u003c/i\u003e\u003c/p\u003e\n\u003cp\u003eWith Remix, an app’s backend and the API becomes a by-product of writing the frontend. The API endpoints are implicitly generated and maintained by Remix \u003ca href=\"https://www.youtube.com/watch?v=NXqEP_PsPNc\u0026amp;list=PLXoynULbYuEDG2wBFSZ66b85EIspy3fy6\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003ethrough the definition of loaders and actions\u003c/a\u003e. This is not only a massive improvement in developer convenience, but also has performance benefits as server-side rendering lets apps get personalized content on screen faster than a traditional, client-side app.\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eShopify’s API\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eMost Shopify apps need to interact with \u003ca href=\"https://shopify.dev/docs/api/admin-graphql\" target=\"_blank\"\u003eShopify’s GraphQL API\u003c/a\u003e. While our GraphQL API is usable with any GraphQL client, there are a small number of Shopify-specific parts that need to be set up, like getting the OAuth access token, handling ID Tokens and HMAC signature verification. To keep the template as clutter-free as possible, we have implemented all of this in our \u003ccode\u003e@shopify/shopify-app-remix\u003c/code\u003e package, which does all the heavy lifting, so you can continue to focus on the business logic.\u003c/p\u003e\n\u003cp\u003eHere is how you configure your \u003ccode\u003eshopify\u003c/code\u003e singleton:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/64c6990bf861148d90826b7958dbfdf0.js\"\u003e\u003c/script\u003e\n\u003cp\u003eAnd here is how you use it to get access to Shopify’s Admin GraphQL API for the shop that is loading the app:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/029f8455f5be3b3bc5f4f011fd1b6aab.js\"\u003e\u003c/script\u003e\n\u003ch3\u003e\u003cstrong\u003eStorage\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eMany apps need to store additional data, about the customers, merchants, products, or store session data. In the past, our templates came with a SQLite database and some adapters to use popular databases like \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-mysql\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eMySQL\u003c/a\u003e or \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-redis\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eRedis\u003c/a\u003e. An opinionated approach is a core part of Remix, so we are following suit by providing \u003ca href=\"https://www.prisma.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" title=\"Prisma.io\"\u003ePrisma\u003c/a\u003e out of the box. Prisma provides battle-tested adapters for most databases and provides an ergonomic ORM API and a UI to inspect your database’s contents.\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://cdn.shopify.com/s/files/1/0779/4361/files/Storage.png?v=1690215618\" alt=\"Storage screenshot of Prisma provided databse and UI\" loading=\"lazy\"\u003e\u003c/p\u003e\n\u003cp\u003eWe don’t want you to reinvent the wheel on how to store your user’s session information, so we’ve published a \u003ca href=\"https://github.com/Shopify/shopify-app-js/tree/main/packages/shopify-app-session-storage-prisma\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003ePrisma Adapter\u003c/a\u003e that takes care of storing sessions. You can use this adapter even if you use one of our previous app templates, as it is completely Remix agnostic.\u003c/p\u003e\n\u003ch3\u003e\u003cstrong\u003eQuickstart\u003c/strong\u003e\u003c/h3\u003e\n\u003cp\u003eTo get you started as quickly as possible, we have integrated the new Remix template for Admin apps into our Shopify CLI. You can get started right now with this command and choose the brand-new Remix option:\u003c/p\u003e\n\u003cscript src=\"https://gist.github.com/ShopifyEng/225f4ef5da6a6746ab7846168f106c95.js\"\u003e\u003c/script\u003e\n\u003cp\u003eIf you have any feedback or questions, please feel free to open an issue on the repository’s \u003ca href=\"https://github.com/Shopify/shopify-app-template-remix/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eissue tracker\u003c/a\u003e.\u003c/p\u003e\n\u003ch3\u003eGoing forward\u003c/h3\u003e\n\u003cp\u003eA Remix template for Admin apps and the new App Bridge client are just the start of Shopify’s effort to make its platform more stable and intuitive for developers. We are also launching similar reworks for Checkout extensions and are rethinking our design system, \u003ca href=\"https://polaris.shopify.com\" target=\"_blank\"\u003ePolaris\u003c/a\u003e, to be more flexible, idiomatic and generic.\u003c/p\u003e\n\u003cp\u003eWe are extremely excited about this direction for Shopify’s platform. We want to leverage more of the web development ecosystem and want to get out the way more to let you choose the right tools for the job. We can’t wait to see how you will put all these new powers to good use!\u003c/p\u003e\n\u003cdiv class=\"marketing-block marketing-block--light marketing-block--padded my-12 border-l-2 pl-4 [\u0026amp;_h2]:!mt-0 [\u0026amp;_h2]:mb-6 [\u0026amp;_h2]:text-t5 [\u0026amp;_h3]:!mt-0 [\u0026amp;_h3]:mb-6 [\u0026amp;_h3]:text-t7 [\u0026amp;_h4]:!mt-0 [\u0026amp;_h4]:mb-6 [\u0026amp;_h4]:text-t8 [\u0026amp;_ul]:!mt-0 [\u0026amp;_ul]:mb-6 [\u0026amp;_ul:last-child]:mb-0 [\u0026amp;_ol]:!mt-0 [\u0026amp;_ol]:mb-6 [\u0026amp;_ol:last-child]:mb-0 [\u0026amp;_p]:!mt-0 [\u0026amp;_p]:mb-6 [\u0026amp;_p:last-child]:mb-0 text-engineering-dark-text [\u0026amp;_*]:!text-engineering-dark-text bg-transparent border-engineering-highlight text-body-sm my-8 tablet:my-16 p-8 bg-marketingBg !border-l-0 border-t-2 pl-8 [\u0026amp;_[itemscope]]:mb-6 [\u0026amp;_[itemscope]:last-child]:mb-0 !bg-[#0C052B]\"\u003e\n\u003cp\u003eThis post was written by\u003cstrong\u003e Surma.\u003c/strong\u003e\u0026nbsp;DX at Shopify. Web Platform Advocate. Craving simplicity, finding it nowhere. He/him. Internetrovert 🏳️‍🌈. Find him on \u003ca href=\"https://twitter.com/dassurma\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eTwitter\u003c/a\u003e, \u003ca href=\"https://github.com/surma\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003eGitHub\u003c/a\u003e, or at \u003ca href=\"https://surma.dev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"\u003esurma.dev\u003c/a\u003e.\u003c/p\u003e\n\u003c/div\u003e","latestArticles":[],"contentNavigationLinks":[],"blogHandle":"engineering","settings":{"topSectionImages":[{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/2ecdaa09da44408d3c2a2b9cba3a2c07.png?originalWidth=1005\u0026originalHeight=1288"},{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/8262a99b5702f964162106b94a23ad2d.png?originalWidth=1005\u0026originalHeight=1288"},{"src":"https://cdn.shopify.com/b/shopify-brochure2-assets/16db235a9390238e6f9b8fd2a5c29680.png?originalWidth=1005\u0026originalHeight=1288"}],"images":{"guides-modal-default":"https://cdn.shopify.com/shopifycloud/brochure/assets/content-marketing/blog/guides/default-popup-small-507879111d55acdd759b202ab869ea0b8bd0f4af9f9aaa7c540efe59b8e046db.jpg","guides-modal-photography":"https://cdn.shopify.com/b/shopify-brochure2-assets/1bd4b072dc187a774c9af650d0f16d0b.jpg","guides-modal-seo":"https://cdn.shopify.com/b/shopify-brochure2-assets/63781344c2932de6e553a54b02291692.jpg","subscription":{"image":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420\u0026originalHeight=1040"}},"rightColSideBannerImg":"https://cdn.shopify.com/b/shopify-brochure2-assets/c8790c0f3c1fa91ccc845e45ce067bbe.png","articleNavigation":{"banner":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/e570727d45209fec56c410f802faa0fe.png"}}},"subscription":{"settings":{"subscriptionId":"DE84EF61-2A02-4778-8807-F01B108DE974"}},"citation":{}},"shareImage":"https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786","availableRegions":["en","en-ca","en-gb","en-au","en-id","en-nz","en-za","en-ng","en-ph","en-sg","en-hk","en-ie","en-my"],"popularArticles":[{"title":"Introducing Ruvy","tags":["Development","Popular"],"handle":"introducing-ruvy","imageUrl":"https://cdn.shopify.com/s/files/1/0779/4361/articles/ShopifyEng_BlogIllustrations_211008_72ppi_01_YJIT-BuildingaNewJITCompilerforCRuby_0a00a8cf-3951-4556-9b2c-3f88e9de76ff.jpg?v=1697134143","imageAltText":null,"modifiedAt":"2023-10-18"},{"title":"Building a ShopifyQL Code Editor","tags":["Developer Tooling","Popular"],"handle":"building-a-shopifyql-code-editor","imageUrl":"https://cdn.shopify.com/s/files/1/0779/4361/articles/ShopifyEng_BlogIllustrations_210719_72ppi_05_FiveStepsforBuildingMachineLearning_886f2915-8848-4dfe-9278-f2575912073a.jpg?v=1694216014","imageAltText":null,"modifiedAt":"2023-09-11"},{"title":"Shopify’s platform is the Web platform","tags":["Apps","Popular"],"handle":"shopifys-platform-is-the-web-platform","imageUrl":"https://cdn.shopify.com/s/files/1/0779/4361/articles/remix-app-bridge.png?v=1690230786","imageAltText":null,"modifiedAt":"2023-07-26"},{"title":"The Engineering Story Behind Flex Comp","tags":["Development","Hero","Popular"],"handle":"building-flex-comp","imageUrl":"https://cdn.shopify.com/s/files/1/0779/4361/articles/ShopifyEng_BlogIllustrations_220927_72ppi_03_BuildingShopifysNewFlexCompSystem.jpg?v=1666044315","imageAltText":null,"modifiedAt":"2022-10-05"}],"hreflangs":[{"tagName":"link","rel":"alternate","hreflang":"en","href":"https://shopify.engineering/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-ca","href":"https://shopify.engineering/ca/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-gb","href":"https://shopify.engineering/uk/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-au","href":"https://shopify.engineering/au/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-id","href":"https://shopify.engineering/id/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-nz","href":"https://shopify.engineering/nz/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-za","href":"https://shopify.engineering/za/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-ng","href":"https://shopify.engineering/ng/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-ph","href":"https://shopify.engineering/ph/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-sg","href":"https://shopify.engineering/sg/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-hk","href":"https://shopify.engineering/hk/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-ie","href":"https://shopify.engineering/ie/shopifys-platform-is-the-web-platform"},{"tagName":"link","rel":"alternate","hreflang":"en-my","href":"https://shopify.engineering/my/shopifys-platform-is-the-web-platform"}],"url":"https://shopify.engineering/shopifys-platform-is-the-web-platform","canonicalUrl":"https://shopify.engineering/shopifys-platform-is-the-web-platform","rootDomain":"shopify.engineering","experimentVariationId":"","realCountryCode":"SG","geoCountryCode":"","regionCode":"","site":{"domain":"www.shopify.engineering","countryCode":"US","hreflang":"en","locale":"en","baseEnDomain":true,"currencyCode":"USD","features":[],"languageCode":"en"},"fileRoutePath":"/$article","regions":[{"domain":"www.shopify.engineering","href":"https://shopify.engineering/shopifys-platform-is-the-web-platform","hreflang":"en","label":"USA","lang":"en","base":false,"selector":true,"isActive":true,"published":true}],"enPath":"/shopifys-platform-is-the-web-platform","handle":"engineering-article","geoPricingIsEnabled":false,"editMode":false,"translations":{"en":{"global":{"argoPlaceholder":"2","ariaLabels":{"close":"Close","carousel":{"name":"carousel","slide":"slide","xOfY":"{x} of {y}","play":"Play carousel","pause":"Pause carousel"},"footer":{"regionsNav":"Region Navigation","regionsClose":"Close Region Navigation","newWindow":"Opens an external site in a new window"},"header":{"mobileNavMenu":"Menu","mainNav":"Main","secondaryNav":"Related pages","skipToContent":"Skip to Content"},"headerLight":{"dismissIcon":"Dismiss banner"},"learnMore":"Learn more about {title}","modal":{"close":"Close modal","pip":"Picture in picture"},"next":"Next","previous":"Previous","testimonial":{"plural":"Testimonials","next":"Next Testimonial","previous":"Previous Testimonial","play":"Play Testimonial","pause":"Pause Testimonial"},"videoModal":"video","video":{"play":"Play video","pause":"Pause video"}},"incentivesPromoBanner":{"app_store_credit":"\u003ca href=\"{{signupUrl}}\"\u003eJoin Shopify and get $50 USD to use in the Shopify App Store. \u003c/a\u003e\u003ca id=\"incentivesTermsLink\" target=\"_blank\" data-component-name=\"acquisition-incentive-terms\" href=\"{{incentiveTerms}}\"/\u003eTerms apply\u003c/a\u003e","gpv_acquisition_incentive_flag":"Join today and get up to \u003ca id=\"showTermsLink\" target=\"_blank\" data-component-name=\"sales-bonus-terms\" href=\"{{incentiveTerms}}\"/ style=\"color: inherit; font-weight: normal\"\u003e$5,000 in cash rebates\u003c/a\u003e on your first six months of sales","retail":{"spRateTermsLink":"\u0026nbsp\u003ca id=\"spIncentivesTermsLink\" target=\"_blank\" class=\"!font-normal\" target=\"_blank\" data-component-name=\"sp-incentive-terms\" href=\"{{incentiveTerms}}\"/\u003eTerms apply\u003c/a\u003e","subscriptionIncentive":"Special offer: get 6 months of POS Pro for {{incentivePrice}}/month","spRateIncentive":"Get {{rate}}% card rates on up to {{gpvLimit}} USD of in-person sales during your first {{length}} months.","spRateIncentiveTerms":"Terms apply"}},"cookiesNotice":{"acceptAllButtonText":"Accept all","activeConsentContentHtml":"We use cookies (and other similar technologies) for many purposes, including to improve your experience on our site and for ads and analytics. Click \"Accept all\" to accept these uses. Read more in our \u003ca href=\"{{legalCookiesPath}}\"\u003eCookie Policy\u003c/a\u003e.","buttonText":"OK","contentHtml":"Shopify uses cookies to provide necessary site functionality and improve your experience. By using our website, you agree to our \u003ca href=\"{{legalPrivacyPath}}\"\u003ePrivacy Policy\u003c/a\u003e and our \u003ca href=\"{{legalCookiesPath}}\"\u003eCookie Policy\u003c/a\u003e.","rejectAllButtonText":"Reject all"},"countries":{"au":"Australia","be":"Belgium","br":"Brazil","ca":"Canada","cn":"China","co":"Colombia","dk":"Denmark","en":"USA","es":"Spain","de":"Germany","fr":"France","gb":"UK","hk":"Hong Kong SAR","id":"Indonesia","ie":"Ireland","in":"India","it":"Italy","jp":"Japan","kr":"Korea","my":"Malaysia","mx":"Mexico","ng":"Nigeria","nl":"Netherlands","no":"Norway","nz":"New Zealand","ph":"Philippines","se":"Sweden","sg":"Singapore","tw":"Taiwan","vn":"Vietnam","za":"South Africa"},"downloadApp":{"androidAlt":"Get the Shopify app on Google Play","androidUrl":"https://shopify.com/install/android","iosAlt":"Download the Shopify app on the Apple App Store","iosUrl":"https://shopify.com/install/mobile","qrCodeAlt":"QR code to download from","qrTitle":"Scan to install"},"downloadposApp":{"androidAlt":"Get the Shopify POS Mobile app on Google Play","androidUrl":"https://play.google.com/store/apps/details?id=com.shopify.pos","iosAlt":"Download the Shopify POS Mobile app on the Apple App Store","iosUrl":"https://apps.apple.com/us/app/shopify-point-of-sale-pos/id686830644","qrCodeAlt":"QR code to download from","qrTitle":"Scan or click below to install"},"forms":{"fields":{"country":{"label":"Country","placeholder":"Select one","error":"Please select a country"}}},"globalNav":{"applyText":"Apply for early access","applyTextPlain":"Apply for access","getStarted":"Get started","homeUrl":"{{home}}","loginGetStartedText":"Log in to get started","loginText":"Log in","loginUrl":"/login","signinText":"Sign in","signupText":"Start free trial","signupTextFree":"Sign up free","signupTextPlain":"Sign up","searchText":"Search","searchPlaceholder":"Type something you're looking for","searchPlaceholderMobile":"Search"},"showLess":"Show less","showMore":"Show more","home":"{{home}}","learnMore":"Learn more","plans":{"pricingFaqAnswerWithDiscount":"We offer a 25% discount for yearly subscriptions if you choose the Basic, Shopify, or Advanced plans. If you choose a 3-year Shopify Plus plan, we offer a monthly discount and lower online variable platform fees."},"sell":{"header":"Explore your options","title":"Apps that help you sell {{vertical}}","subheading":"Some popular apps other merchants use","seeRecommendedApps":"See more recommended apps","by":"By {{partner}}"},"shopify":"Shopify","pagination":{"page":"Page"},"signup":{"buttonText":"Start free trial","plusButtonText":"Get in touch","buttonText_fr":"Launch your store","label":"Email address","placeholder":"Enter your email address","disclaimerHtml":"Try Shopify free for {{trialLength}} days, no credit card\u0026nbsp;required. By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","disclaimerNoLengthHtml":"No credit card required. By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","testimonialButtonText":"Try Shopify free for {{trialLength}} days","freeTrialCtaHtml":"Try Shopify for free, and explore all the tools and services you need to start, run, and grow your\u0026nbsp;business.","mobileDisclaimerHtml":"Try Shopify free for {{trialLength}} days, no credit card\u0026nbsp;required.","signupPaidTrialPromo":{"default_one":"Get {{trialLength}} days free then 1 month for {{paidTrialAmount}}.","default_other":"Start for free, then get your first {{paidTrialMonths}} months for {{paidTrialAmount}}/mo.","disclaimer":"By entering your email, you agree to receive marketing emails\u0026nbsp;from\u0026nbsp;Shopify.","disclaimerNoEmail_one":"Don’t have a Shopify store? \u003ca href=\"{{deeplinkFreeTrial}}\" data-component-name=\"{{deeplinkFreeTrialName}}\"\u003eStart free, then get your first month for {{paidTrialAmount}}.\u003c/a\u003e","disclaimerNoEmail_other":"Don’t have a Shopify store? \u003ca href=\"{{deeplinkFreeTrial}}\" data-component-name=\"{{deeplinkFreeTrialName}}\"\u003eStart for free, then get your first {{paidTrialMonths}} months for {{paidTrialAmount}}/mo.\u003c/a\u003e"}},"social":{"facebook":{"text":"Facebook","url":"https://www.facebook.com/shopify","url_de":"https://www.facebook.com/shopifyDE","url_jp":"https://www.facebook.com/ShopifyJP"},"twitter":{"text":"Twitter","url":"https://twitter.com/shopify","url_jp":"https://twitter.com/ShopifyJP"},"youtube":{"text":"YouTube","url":"https://www.youtube.com/user/shopify","url_de":"https://www.youtube.com/c/ShopifyDeutsch","url_fr":"https://www.youtube.com/c/ShopifyFrançais","url_it":"https://www.youtube.com/c/ShopifyItaliano","url_jp":"https://www.youtube.com/c/ShopifyJapan","url_nl":"https://www.youtube.com/c/ShopifyNederlands","url_br":"https://www.youtube.com/c/ShopifyBrasil"},"instagram":{"text":"Instagram","url":"https://www.instagram.com/shopify/"},"tiktok":{"text":"TikTok","url":"https://www.tiktok.com/@shopify"},"linkedin":{"text":"LinkedIn","url":"https://www.linkedin.com/company/shopify"},"pinterest":{"text":"Pinterest","url":"https://www.pinterest.com/shopify/","url_jp":"https://www.pinterest.com/shopifyjp/"},"email":{"text":"Email","url":"mailto:"}},"tableOfContents":"Table of Contents","totalApps":6000,"totalThemes":70,"supportedLanguages":50,"totalGateways":100,"totalStores":1700000,"uptime":99.98,"waitlistForm":{"errors":{"general":"Something went wrong, try again later","emailFormat":"Email is formatted incorrectly"},"successMessage":"Done","placeholder":"Enter your email address","buttonText":"Signup"},"editionsEyebrow":{"text":"Shopify Editions | Winter ’24 is live"},"nav":{"about":"About Shopify","academy":"Shopify Academy","allFeatures":"All features","allProducts":"All Products","allProductsDescription":"Explore all Shopify products \u0026 features","appStore":"Find business apps","appStoreDescription":"Shopify app store","b2b":"Sell wholesale \u0026 direct","b2bDescription":"Business-to-business (B2B)","balance":"Balance","banking":"Banking","billPay":"Bill Pay","blog":"Blog","blogEnterprise":"Enterprise Blog","blogMerchants":"Merchant Blog","blogRetail":"Retail Blog","borrowing":"Borrowing","branding":"Branding","brandingDescriptionV2":"Build your brand from scratch","brandingFlyoutDescription":"Look professional and help customers connect with your business","build":"Build","burst":"Free stock photos","businessEncyclopedia":"Business encyclopedia","businessFunding":"Secure business funding","businessFinancing":"Secure business financing","businessFundingDescription":"Shopify Capital","businessFinancingDescription":"Shopify Lending","businessGrowth":"Business growth","businessGrowthDescription":"Scale your business","businessNameGenerator":"Business name generator","businessPlanTemplate":"Business plan template","businessTypes":"Business Types","buyButton":"Buy Button","buyButtonDescription":"Transform an existing website or blog into an online store","buyButtonSubnav":"Explore Buy Button","capital":"Capital for small business","capitalLoansAndCashAdvances":"Capital for large retailers","cdiscount":"Cdiscount","changelog":"Changelog","changelogDescription":"Your source for recent updates","checkout":"Checkout","checkoutDescription":"Provide fast, smooth checkout experiences","checkoutDescriptionV2":"World-class checkout","checkoutV2":"Check out customers","commerceComponents":"Enterprise","commerceComponentsDescription":"Solutions for the world's largest brands","community":"Community","communityEvents":"Community Events","compass":"Business courses","compassDescription":"Learn from proven experts","calculator":"Cost calculator","credit":"Credit","ctaAlt":"Free Trial","docs":"Docs","customerInsights":"Know your audience","customerInsightsDescription":"Gain customer insights","domains":"Domains","domainsAndHosting":"Own your site domain","domainsAndHostingDescription":"Domains \u0026 hosting","dropshipping":"Dropshipping","ecommerce":"Online store","ecommerceDescription":"Online store editor","ecommerceSeo":"Ecommerce SEO","ecommerceSeoDescription":"Improve your search ranking","ecommerceV2":"Create your website","editions":"Editions","editionsAll":"All Editions","editionsAllDescription":"Archive of past Shopify Editions","editionsLast":"Winter ’24 Edition","editionsLastDescription":"The latest 100+ product updates","emailMarketing":"Email marketing","encyclopedia":"Encyclopedia","essentialTools":"Essential tools","examples":"Examples","exchange":"Websites for sale","experts":"Experts","facebook":"Facebook Shops","facebookAds":"Facebook Ads","facebookInstagram":"Facebook \u0026 Instagram","faq":"FAQ","features":"Features","financialServices":"Financial Services","flow":"Ecommerce automation","flowDescription":"Shopify Flow","flowV2":"Automate your business","forums":"Shopify Community","founderStories":"Founder stories","founderStoriesDescription":"Learn from successful merchants","fraudProtection":"Fraud Protection","freeBusinessTools":"Explore free business tools","freeBusinessToolsDescription":"Tools to run your business","freeTools":"Free tools","fulfillment":"Fulfillment","fulfillmentDescription":"Shopify Fulfillment Network","fulfillmentV2":"Outsource fulfillment \u0026 returns","getStarted":"Start free trial","getInTouch":"Get in touch","google":"Google","googleSmart":"Google","googleYoutube":"Google \u0026 Youtube","guides":"Guides","hardware":"Hardware","hardwareStore":"Hardware store","helpAndSupport":"Help and support","helpAndSupportDescription":"Get 24/7 support","helpCenter":"Help Center","howToGuides":"How-to guides","howToGuidesDescription":"Read in-depth business guides","impressumGenerator":"Impressum-Generator","inbox":"Business chat","inboxDescription":"Turn browsers into buyers","inboxDescriptionV2":"Shopify Inbox","inboxV2":"Chat with customers","instagram":"Instagram","installments":"Installments","internationalSales":"International sales","internationalSalesDescription":"Sell globally","inventoryOrderManagement":"Manage your stock \u0026 orders","inventoryOrderManagementDescription":"Inventory \u0026 order management","joinNow":"Join Now","learn":"Learn","lending":"Lending","lendingOverview":"Lending overview","lineOfCredit":"Line of Credit","linkInBioTool":"Link in bio tool","login":"Log in","logoMaker":"Logo maker","manage":"Manage","manageEverything":"Manage everything","manageYourBusiness":"Manage your business","manageYourBusinessDescription":"Track sales, orders \u0026 analytics","market":"Market","marketDescription":"Market your business","marketDescriptionV2":"Reach \u0026 retain customers","marketing":"Marketing","marketingAutomation":"Marketing automation","marketingDescription":"Build a marketing plan","marketingTools":"Marketing tools","marketingToolsDescription":"Ads, email campaigns, and more","marketplaces":"Online marketplaces","markets":"International commerce","marketsDescription":"Reach buyers in new markets with international selling tools","measureYourPerformance":"Measure your performance","measureYourPerformanceDescription":"Analytics and Reporting","mobileApp":"Mobile app","mobileAppDescription":"Respond in real time","moneyManagement":"Get paid faster","moneyManagementDescription":"Shopify Balance","more":"More","newsroom":"Newsroom","newsroomDescription":"All company news and press releases","onlineFlyoutDescription":"Find a domain, explore stock images, and amplify your brand","onlinePresence":"Online presence","onlineStoreDescription":"Sell online with an ecommerce website","omnichannel":"Omnichannel selling","orderManagementAndFulfillment":"Order management and delivery","overview":"Overview","partners":"Partners","payments":"Payment processing","paymentsDescription":"Set up forms of payment","paymentsOverview":"Overview","paymentsV2":"Accept online payments","pillarDropdownCta":"Get started","ping":"Shopify Ping","plus":"Plus","podcasts":"Podcasts","pointOfSale":"Point of Sale","pointOfSaleDescription":"Point of Sale (POS)","pointOfSaleV2":"Sell in person","popularTopics":"Popular topics","pos":"Shopify POS","posPricing":"POS Pricing","posSystemSmallBusiness":"Small business POS","posMultiStore":"Multi-store POS","posInventorySystem":"POS inventory system","posAndroid":"Android POS","posIpad":"iPad POS","posApp":"POS App","posSoftware":"POS Software","pricing":"Pricing","pricingOverview":"Pricing overview","productSourcing":"Product sourcing","productSourcingDescription":"Find products to sell","productsToSell":"Products to sell","qrCodeGenerator":"QR code generator","rakuten":"Rakuten","research":"Research","resources":"Resources","retail":"Retail POS","retailDescription":"Sell at retail locations, pop-ups, and beyond","salesChannels":"Sales channels","salesChannelsDescription":"Reach millions of shoppers and boost sales","salesChannelsDescriptionV2":"Channels for social \u0026 marketplaces","salesChannelsV2":"Sell across channels","segmentation":"Customer groups","sell":"Sell","sellEverywhere":"Sell everywhere","sellOnline":"Sell online","sellOnlineDescription":"Grow your business online","sellYourProducts":"Sell your products","sellYourProductsDescription":"Sell online or in person","shipping":"Shipping","shippingDescription":"Fulfill orders faster","shippingDescriptionV2":"Shopify Shipping","shippingV2":"Ship orders faster","shop":"Shop","shopPay":"Shop Pay","shopifyBlog":"Shopify blog","shopifyBlogDescription":"Business strategy tips","shopifyDevelopers":"Shopify Developers","shopifyDevelopersDescription":"Build with Shopify's powerful APIs","shopifyEditions":"Shopify Editions","shopifyEditionsDescription":"New, innovative Shopify products","shopifyEmail":"Nurture customers","shopifyEmailDescription":"Shopify Email","shopifyGold":"Enterprise","shopifyOnlineStore":"Shopify Online store","shopifyPlus":"Enterprise","shopifyPlusDescription":"A commerce solution for growing digital brands","shopifyPointOfSale":"Shopify Point of Sale","shopifySite":"shopify.com","signup":"Sign up","social":"Social media","socialDescription":"Social media integrations","socialMediaStrategy":"Social media strategy","socialMediaStrategyDescription":"Turn social into sales","socialV2":"Market across social","solutions":"Solutions","staffManagement":"Staff management","start":"Start","startYourBusiness":"Start your business","startYourBusinessDescription":"Build your brand","stockPhotography":"Stock photography","storeSetup":"Store set up","storeSetupDescription":"Use Shopify’s powerful features to start selling","storeThemes":"Store themes","storeThemesDescription":"Customize your store","successStories":"Success stories","termLoans":"Term Loans","themeStore":"Theme store","themes":"Themes","tiktok":"TikTok","videos":"Videos","walmart":"Walmart Marketplace","waysToSell":"Ways to sell","webAddress":"Domain name","websiteBuilder":"Website Builder","whatIsShopify":"What is Shopify?","whatIsShopifyDescription":"How our commerce platform works","whatsNew":"What's new","youtube":"YouTube","blogEngineering":"Engineering Blog","workingShopify":"Working at Shopify","openSource":"Open Source at Shopify","devDegree":"Dev Degree"},"footer":{"about":"About","aboutShopify":"About Shopify","accessibility":"Accessibility","affiliateProgram":"Affiliate program","affiliates":"Affiliates","apiDocs":"API documentation","appDemo":"App demo","appDeveloperProgram":"App developers","appStore":"App Store","ar":"Shopify AR","blog":"Blog","blogTopics":"Blog topics","brand":"Brand","buildBlack":"Build Black","buildNative":"Build Native","businessNameGenerator":"Business name generator","burst":"Free stock photos","buyButton":"Buy Button","capital":"Capital","careers":"Careers","commerceComponents":"Commerce Components","communityEvents":"Community Events","company":"Company","companyInfo":"Company info","contact":"Contact","contactShopify":"Contact Shopify","countrySelect":"Change your country or region.","countrySelectHeading":"Country/region","devDegree":"Dev Degree","developers":"Developers","documentation":"Shopify Help Center","domainNames":"Domain names","domains":"Domains","dropshipping":"Dropshipping Business","ecommerce":"Online store","ecommerceHosting":"Ecommerce hosting","ecommerceSoftware":"Ecommerce software","economicGrowth":"Economic growth","email":"Email","examples":"Examples","experts":"Shopify Partners","featureTour":"Website builder","features":"Features","forums":"Shopify Community","fulfillment":"Fulfillment","gaming":"Gaming","globalImpact":"Global impact","hardware":"Hardware","hatchful":"Hatchful","heading":"More resources","helpCenter":"Help center","hireAnExpert":"Hire a Partner","investors":"Investors","leadership":"Leadership","legal":"Legal","linkpop":"Linkpop","logoGenerator":"Logo Maker","managePrivacy":"Manage Privacy","merchantSupport":"Merchant support","mobileCommerce":"Mobile commerce","onlineStore":"Ecommerce website","onlineStoreBuilder":"Online store builder","partnerProgram":"Partner program","partners":"Partners","payments":"Payments","phoneNumber":"1-888-329-0139","platform":"Platform","pointOfSale":"Point of sale","posFeatures":"Features","posSoftware":"POS software","pressAndMedia":"Press and Media","pressReleases":"Press releases","privacyChoices":"Privacy Choices","privacyPolicy":"Privacy Policy","products":"Products","research":"Research","resources":"Support","sellInStore":"Point of sale","sellOnline":"Sell online","sellOnlineTour":"Online retail","serviceStatus":"Service status","setUp":"Setup","sfn":"Shopify Fulfillment Network","shipping":"Shipping","shop":"Shop","shopPay":"Shop Pay","shopify":"Shopify","shopifyEvents":"Shopify Events","shopifyExperts":"Shopify Partners","shopifyForEnterprise":"Shopify for enterprise","shopifyGold":"Enterprise","shopifyLite":"Shopify Lite","shopifyPlus":"Shopify Plus","shoppingCart":"Shopping cart","sitemap":"Sitemap","social":"Social","socialImpact":"Social impact","solutions":"Solutions","storeDesign":"Themes","storeThemes":"Store themes","support":"24/7 support","supportLimited":"Customer Support","sustainability":"Sustainability","termsOfService":"Terms of Service","themeStore":"Theme Store","themeSupport":"Theme support","themes":"Themes","tools":"Free tools","topics":"Topics","trustSealsAccessibilityText":"Use Shopify with confidence. Our platform has been assessed and certified by:","video":"Video","videoTutorials":"Video Tutorials"}},"pages/$article/guide_ctas":{"guidesCta":{"modal":{"subhead":"Almost there: please enter your email below to gain instant access.","disclaimer":"We'll also send you updates on new educational guides and success stories from the Shopify newsletter. We hate SPAM and promise to keep your email address safe."},"analytics":{"heading":"Free Ebook: Ecommerce Analytics for Beginners","content":"Find out which metrics are the key to establishing and growing your online business. This free guide is the perfect first step in learning about ecommerce analytics.","cta":"Get the free ebook now","modal_headline":"Get Ecommerce Analytics for Beginners delivered right to your inbox."},"back_to_school":{"heading":"The Complete Guide to Back to School Marketing for Retail Stores","content":"Get an update on this year's back to school marketing trends, compare strategies, and build out your plan with this short guide.","cta":"Get your free guide now","modal_headline":"Get the Back to School Marketing Guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"brand_storytelling":{"heading":"Free Worksheet: Brand Storytelling","content":"Use this handy exercise as a guide to help you craft a compelling brand story and build a loyal audience through the power of storytelling.","cta":"Get the worksheet","modal_headline":"Get our free Brand Storytelling Worksheet delivered right to your inbox."},"branding":{"heading":"Free Reading List: How to Brand Your Business","content":"A great brand can help your products stand out from the crowd. Get a crash course in small business branding with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Branding reading list delivered right to your inbox."},"businessplan":{"heading":"Free: Business Plan Template","content":"Business planning is often used to secure funding, but plenty of business owners find writing a plan valuable, even if they never work with an investor. That’s why we put together a free business plan template to help you get started.","cta":"Get the template now","modal_headline":"Get the business plan template delivered right to your inbox."},"businessideas":{"heading":"Free: The Big List of Business Ideas","content":"To help you find the inspiration to start, we compiled a list of 100+ in-demand business ideas, broken down into categories like fitness, apparel, and gaming.","cta":"Get the list now","modal_headline":"Get the big list of business ideas delivered right to your inbox."},"case_studies":{"heading":"Free Video Series: Ecommerce Inspiration","content":"Feeling uninspired? Watch some of the world's most successful entrepreneurs share their best advice for new business owners.","cta":"Get the free video series","modal_headline":"Get our Ecommerce Inspiration video series delivered right to your inbox."},"competitive":{"heading":"Free: Competitive Analysis Template","content":"By evaluating the strengths and weaknesses of your competition, you can begin to formulate how to give your company an advantage. Download our free competitive analysis template and gain an edge over the competition.","cta":"Get the template now","modal_headline":"Get the competitive analysis template delivered right to your inbox."},"copywriting":{"heading":"Free Reading List: Copywriting Tactics for Entrepreneurs","content":"Is your website content costing you sales? Learn how to improve your website copy with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Copywriting Tactics reading list delivered right to your inbox."},"customerservice":{"heading":"Free Reading List: Customer Service Strategies","content":"Focusing on customer service can turn negative interactions into positive reviews (and repeat customers). Learn how with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get the reading list delivered right to your inbox."},"design":{"heading":"Free Reading List: Online Store Design Tips","content":"Your online store's appearance can have a big impact sales. Unleash your inner designer with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get our Store Design reading list delivered right to your inbox."},"email":{"heading":"Free Ebook: How to Grow Your Ecommerce Business with Email Marketing","content":"Whether you're just getting started or dreaming up your next big campaign, this email marketing guide will provide you with insights and ideas to help your business grow.","cta":"Get the free ebook now","modal_headline":"Get our Email Marketing guide delivered right to your inbox."},"googleshopping":{"heading":"Free Ebook: Google Shopping for Small Businesses","content":"Google Shopping ads are one of the leading traffic sources that can give you the ultimate edge. Discover this hidden gem often overlooked by your competition.","cta":"Get the free ebook now","modal_headline":"Get Google Shopping for Small Businesses delivered right to your inbox."},"hiring_questions":{"heading":"Free Guide: Interview Questions for Hiring Retail Employees","content":"Hiring competent retail employees is becoming increasingly challenging. Use this guide to ask the right questions during the interview process to ensure you hire the right people for your store.","cta":"Get the free guide now","modal_headline":"Get our guide Interview Questions for Hiring Retail Employees delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"holiday_selling_2021":{"heading":"Free Holiday Selling Guide: Top 10 Holiday Selling Tips for Retail Stores","content":"A sale can happen anywhere, at any time. Use our top 10 strategies to unify your customer touch points and set yourself up for holiday success.","cta":"Get the free guide now","modal_headline":"Get our Top 10 Holiday Selling Tips for Retail Stores delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"inventory_templates":{"heading":"5 Free Templates to Better Understand Your Inventory","content":"Calculate your businesses cost of goods sold, sell through rate, inventory turnover, saftey stock, economic order quantity, or reorder point with ease using these custom templates. (No math required!)","cta":"Get your free templates","modal_headline":"Get your Inventory Templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free templates soon. In the meantime, start building your store with a free trial of Shopify."},"opening_closing_checklist":{"heading":"Free Checklist for Opening and Closing Your Store","content":"Ensure all protocols and procedures are completed each time you open and close your store with this handy, easy-to-follow checklist.","cta":"Get the free checklist","modal_headline":"Get our Opening and Closing Checklist delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"optimization":{"heading":"Free Reading List: Conversion Optimization for Beginners","content":"Turn more website visitors into customers by getting a crash course in conversion optimization. Access our free, curated list of high-impact articles below.","cta":"Get the free reading list","modal_headline":"Get our Conversion Optimization reading list delivered right to your inbox."},"parentpreneur":{"heading":"Playbook for the Aspiring Parentpreneur","content":"Unleash your creativity and turn your passion into a thriving business with our Parentprenuer brainstorming guide. Discover new ideas, set realistic goals, and map out a plan for success.","cta":"Download now","modal_headline":"Check your inbox for your copy of the Parentpreneur Playbook."},"phonecases":{"heading":"Get a Free Phone Case Business in a Box","content":"Free high quality phone case stock photos and a list of some places you can look to find phone case suppliers to work with.","cta":"Download startup bundle","modal_headline":"Get our startup bundle delivered right to your inbox."},"photography":{"heading":"Free Guide: DIY Product Photography","content":"Learn how to take beautiful product photos on a budget with our free, comprehensive video guide.","cta":"Get your free guide","modal_headline":"Get our DIY Guide to Beautiful Product Photography delivered right to your inbox."},"popup_guide":{"heading":"Pop-Up Shop Quickstart Guide","content":"Thinking about hosting a Pop-Up Shop? This free guide includes 3 checklists that help frame what you're looking to accomplish through your Pop-Up Shop, different types of Pop-Up Shops, and design ideas to help get you started.","cta":"Get your free guide","modal_headline":"Get your Pop-Up Shop Quickstart Guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"pressrelease":{"heading":"Free: Press Release Template","content":"To help you get started, we put together this template to help you structure your story using a common press release format. You can replace each component with your own information and adapt it according to your needs.","cta":"Get the template now","modal_headline":"Get the press release template delivered right to your inbox."},"productivity":{"heading":"Free Reading List: Ecommerce Motivation","content":"Having trouble focusing on growing your small business? Get access to our free, curated list of high-impact productivity articles.","cta":"Get the free reading list","modal_headline":"Get our Ecommerce Motivation reading list delivered right to your inbox."},"products":{"heading":"Free Guide: How to Find a Profitable Product to Sell Online","content":"Excited about starting a business, but not sure where to start? This free, comprehensive guide will teach you how to find great, newly trending products with high sales potential.","cta":"Get the free guide","modal_headline":"Get How To Find A Product To Sell Online: The Definitive Guide PDF delivered right to your inbox."},"retail_marketing":{"heading":"Free Download: From Clicks to Customers: How to Measure Your Retail Store's Marketing Success","content":"Every marketing campaign is an investment of your time, energy, and money. Do you ever wonder if your efforts were worth it? Read this guide and build a framework to plan, track, and measure the success of retail marketing campaigns.","cta":"Get your free guide","modal_headline":"Get your free Retail Marketing Success PDF delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"retention_audit":{"heading":"Free Download: Retention Audit Checklist","content":"Struggling with customer retention? This free checklist will help you build a retention mindset throughout your company by auditing retention strategies at every level of your business.","cta":"Get your free checklist","modal_headline":"Get this free Retention Audit Checklist PDF delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"rotating_schedules":{"heading":"Free Download: Rotating Schedules Templates","content":"Struggling to keep your stores fully staffed and running smoothly? Consider implementing a rotating shift program. Download these free templates to find the right schedule for you and your employees.","cta":"Get your free templates","modal_headline":"Get these free Rotating Schedules Templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"seo":{"heading":"Free Download: SEO Checklist","content":"Want to rank higher in search results? Get access to our free, checklist on search engine optimization.","cta":"Get the free checklist","modal_headline":"Get our SEO Checklist delivered right to your inbox."},"sfn_interview":{"heading":"Free Checklist: How to Interview a Third Party Logistics Provider","content":"Outsourcing fulfillment is a significant investment. Here’s a checklist of questions to ask in preparation of choosing the right fulfillment provider and transitioning your business.","cta":"Get the free checklist","modal_headline":"Get the checklist delivered right to your inbox."},"sfn_outsource":{"heading":"Free Checklist: Are You Ready to Outsource Your Fulfillment?","content":"Trusting a third party logistics (3PL) provider with your inventory and your customer experience is a significant investment. These questions will help determine if it's time to outsource your fulfillment and take the next step in growing your business.","cta":"Get the free checklist","modal_headline":"Get the checklist delivered right to your inbox."},"shipping":{"heading":"The Shopify guide to shipping and fulfillment","content":"Boost customer satisfaction while driving sales growth for your ecommerce business with an effective shipping and fulfillment strategy. Use this guide to create a plan that covers all aspects of shipping and fulfillment, from how much to charge your customers to choosing the right fulfillment method.","cta":"Download now and start optimizing your operations","modal_headline":"Get our shipping and fulfillment guide delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"social":{"heading":"Social media strategy and planning templates","content":"Ready to get started with your social media strategy? These free, customizable templates give you tools to plan and execute a strategy that connects you with your target audience while keeping your content calendar organized.","cta":"Download now and start seeing results","modal_headline":"Get your social media strategy and planning templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"social_template":{"heading":"Social media strategy and planning templates","content":"Ready to get started with your social media strategy? These free, customizable templates give you tools to plan and execute a strategy that connects you with your target audience while keeping your content calendar organized.","cta":"Download now and start seeing results","modal_headline":"Get social media strategy and planning templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"store_layouts":{"heading":"Free Download: Store Layout Templates","content":"Trying to decide which layout is right for your store? Download these free templates to learn which types of layouts work best for different industries and draw inspiration for your own design.","cta":"Get your free templates","modal_headline":"Get these free templates delivered right to your inbox.","modal_success_heading":"Thanks for downloading. You'll receive your free download soon. In the meantime, start building your store with a free trial of Shopify."},"swot":{"heading":"Free: SWOT Analysis Template","content":"Get your free SWOT Analysis Template. Use this free PDF to future-proof your business by identifying your strengths, weaknesses, opportunities, and threats.","cta":"Get the template now","modal_headline":"Get the SWOT analysis template delivered right to your inbox."},"tax_season":{"heading":"Free Download: 6 Steps to Get Your Business Ready for Tax Season","content":"Tax season is stressful for any business owner. This guide will go through the process of filing income taxes in America and provide you with checklists to keep you organized and prepared.","cta":"Get your free guide now","modal_headline":"Get your free guide","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"trust":{"heading":"Free: Shopify Store Trust Checklist","content":"Shopify’s research team conducted a series of in-depth interviews with North American shoppers to learn how customer trust is formed in online stores. This checklist is a summary of their findings, created to help business owners understand what essential aspects of their online store experience creates trust among customers, along with the trust-busting mistakes to avoid.","cta":"Get the checklist now","modal_headline":"Get the checklist delivered right to your inbox."},"ttp_guide":{"heading":"Free Download: The Online Sellers Guide to In-Person Sales","content":"In-person selling is more approachable than ever. This guide covers why selling in person can reduce customer acquisition costs, how to build a plan that will scale with your business, and tactics from ecommerce sellers that made the move successfully.","cta":"Get your free guide now","modal_headline":"Get your free guide","modal_success_heading":"Thanks for downloading. You'll receive your free copy soon. In the meantime, start building your store with a free trial of Shopify."},"twitter":{"heading":"Free Ebook: Twitter Marketing for Small Businesses","content":"This guide will teach you everything from earning your first followers to getting the most out of Twitter’s advertising platform. Claim your free download to get instant access.","cta":"Get the free ebook now","modal_headline":"Get Twitter Marketing for Small Businesses delivered right to your inbox."},"video":{"heading":"Free Reading List: Video Marketing Tips and Tricks","content":"Video marketing is a powerful tool you can’t afford to ignore. Get a crash course with our free, curated list of high-impact articles.","cta":"Get the free reading list","modal_headline":"Get the reading list delivered right to your inbox."}}},"pages/blogSubNav":{"argoPlaceholder":"0","subNav":{"title":"Engineering Blog","pageTitle":"Menu","overviewText":"Homepage","links":{"development":"Development","infrastructure":"Infrastructure","mobile":"Mobile","developer-tooling":"Developer Tooling","latest":"Latest","moreTopics":"More topics"},"subLinks":{"security":"Security","data-science-engineering":"Data Science Engineering","culture":"Culture"}}},"pages/$article/content":{"argoPlaceholder":"0","articleMetaTitle":"{{title}} ({{year}})","articleNavigation":{"title":"On this page","bannerTitle":"Engineering at Shopify","bannerSubTitle":"We’re hiring","buttonText":"See open roles"},"subscribeBanner":{"title":"Keep up with the latest from Shopify","description":"Get free ecommerce tips, inspiration, and resources delivered directly to your inbox.","placeholder":"Enter email","buttonText":"Subscribe","hint":"By entering your email, you agree to receive marketing emails from Shopify.","successMessage":{"heading":"Thank you for subscription!","contentHtml":"Check your email for instructions."}},"popularPostsTitle":"Most Read","subscribe":{"errors":{"email":"Please enter a valid email address."},"guidesCta":{"submit":"Get updates","success":{"heading":"Thanks for subscribing.","subhead":"You’ll start receiving free tips and resources soon. In the meantime, start building your store with a free trial of Shopify.","cta":"Get started"},"error":"Something went wrong, please try again later!"}},"readMoreLinks":{"title":"Read more"},"partnersSignup":{"service_partner":{"heading":"Grow your business with the Shopify Partner Program","content":"Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.","cta":"Sign up"},"app_developer":{"heading":"Build apps for Shopify merchants","content":"Whether you want to build apps for the Shopify App Store, offer custom app development services, or are looking for ways to grow your user base, the Shopify Partner Program will set you up for success. Join for free and access educational resources, developer preview environments, and recurring revenue share opportunities.","cta":"Sign up"},"affiliate":{"heading":"Become a Shopify Affiliate","content":"Use your voice to inspire entrepreneurship around the world. Whether you’re an existing partner or new to the Shopify Partner Program, apply to become a Shopify Affiliate and earn commission by referring your audience to Shopify.","cta":"Apply now"},"general":{"heading":"Grow your business with the Shopify Partner Program","content":"Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.","cta":"Sign up"}},"authorSection":{"headingHtml":"Share article","updated":"Last updated","byAuthor":"by \u003cwrapper\u003e\u003cname\u003e{{authorName}}\u003c/name\u003e\u003c/wrapper\u003e","byAuthor_withLink":"by \u003cwrapper\u003e\u003curl\u003e\u003cname\u003e{{authorName}}\u003c/name\u003e\u003c/url\u003e\u003c/wrapper\u003e","reviewed":"Reviewed","written":"Written","timeToRead":"{{minutes}} minute read"},"articleHeader":{"blogLink":{"text":"blog"}},"hero":{"heading":"Start selling with Shopify today","subhead":"Start your free trial with Shopify today—then use these resources to guide you through every step of the process.","image":{"alt":"My alt."},"button":{"href":"{{deeplinkFreeTrial}}","text":"Start free trial"},"lightButton":{"href":"/","text":"Learn more"},"treatment":{"heading":"The next big entrepreneur: you","subhead":"Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business."},"treatment_2":{"heading":"LET’S MAKE YOUR BUSINESS HAPPEN","subhead":"Shopify has everything you need to build, run, and grow a business. All you've got to do is start."}},"subscription":{"heading":"Keep up with the latest from Shopify","subhead":"Subscribe to our blog and get free ecommerce tips, inspiration, and resources delivered directly to your inbox.","disclaimer":"Unsubscribe anytime. By entering your email, you agree to receive marketing emails from Shopify.","conversionCta":{"text":"Subscribe","emailPlaceholder":"Email here","successMessage":{"heading":"Thank you for subscription!","contentHtml":"Check your email for instructions."}}},"latestArticles":{"heading":"Latest from Shopify","link":{"text":"See all"}},"workAnywhere":{"headingHtml":"Work from anywhere \u003cbr/\u003e with Shopify","subheadHtml":"See our open roles and learn more about our digital by design culture.","button":{"text":"See open roles"}},"textCta":{"href":"{{deeplinkFreeTrial}}","text":"Click here to start selling online now with Shopify"},"rightColSideBannerTitle":"The point of sale for every sale.","citation":{"header":"Sources"}},"pages/$article/settings":{"images":{"guides-modal-default":"https://cdn.shopify.com/shopifycloud/brochure/assets/content-marketing/blog/guides/default-popup-small-507879111d55acdd759b202ab869ea0b8bd0f4af9f9aaa7c540efe59b8e046db.jpg","guides-modal-photography":"https://cdn.shopify.com/b/shopify-brochure2-assets/1bd4b072dc187a774c9af650d0f16d0b.jpg","guides-modal-seo":"https://cdn.shopify.com/b/shopify-brochure2-assets/63781344c2932de6e553a54b02291692.jpg","subscription":{"image":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/c46f986d892538f4b0a15f25692330f7.png?originalWidth=1420\u0026originalHeight=1040"}},"articleNavigation":{"banner":{"en":"https://cdn.shopify.com/b/shopify-brochure2-assets/e570727d45209fec56c410f802faa0fe.png"}}}}}},"pricing":{"annualDiscountPercentage":25,"basicAnnualPrice":"\u003cspan\u003e$29.00 USD\u003c/span\u003e","googleCountryOffer":"$500 USD","minimumMonthlyPrice":"$5","minimumMonthlyPriceCurrency":"USD","paidTrialAmount":"$1","paidTrialMonths":3,"posProPriceUsd":"$89","posRetailLocations":"1,000","promoAmount":{"amount":1,"currencyCode":"USD","currencySymbol":"$"},"signupTypes":["paid_trial_experience"],"trialLength":3,"usd":"USD"}},"root":null,"pages/shopify.engineering~~layout":null},"actionData":null,"errors":null}};</script><script type="module" async="">; import * as route0 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/root-DSZyfDOi.js"; import * as route1 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/layout-CR0rDhCR.js"; import * as route2 from "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/route-BuTjHipM.js"; window.__remixManifest = { "entry": { "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/entry.client-DwbT9GtS.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js" ], "css": [] }, "routes": { "root": { "id": "root", "path": "", "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": true, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/root-DSZyfDOi.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/enums-CqpDel02.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/I18N-DkwmfuKm.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Wrapper-DhZo7Nml.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Section-Bl3w6paD.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/SideBySide-BIF2EZB1.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Provider-CQVAfcXd.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/HeadingGroup-1EyidEKf.js" ], "css": [] }, "pages/shopify.engineering~~layout": { "id": "pages/shopify.engineering~~layout", "parentId": "root", "path": "/", "hasAction": false, "hasLoader": false, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/layout-CR0rDhCR.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/enums-CqpDel02.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/I18N-DkwmfuKm.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Provider-CQVAfcXd.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/blog-CclTzyK5.js" ], "css": [] }, "pages/shopify.engineering/$article": { "id": "pages/shopify.engineering/$article", "parentId": "pages/shopify.engineering~~layout", "path": ":article", "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/route-BuTjHipM.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/enums-CqpDel02.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/I18N-DkwmfuKm.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Wrapper-DhZo7Nml.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringBlogFooter-C9aEb07f.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/XIcon.svg-1TYfFUVM.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringPageLayout-BenRbSvA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Section-Bl3w6paD.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Checkmark-DIG1PPwH.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/HeadingGroup-1EyidEKf.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/ArticleCarousel-C5IDQsOb.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/blog-CclTzyK5.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/useBlogPageTitle-B_wJ7raq.js" ], "css": [] }, "pages/shopify.engineering/_index": { "id": "pages/shopify.engineering/_index", "parentId": "pages/shopify.engineering~~layout", "index": true, "hasAction": false, "hasLoader": true, "hasClientAction": false, "hasClientLoader": false, "hasErrorBoundary": false, "module": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/route-B7ttWBQl.js", "imports": [ "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/components-Cjscd6JA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/enums-CqpDel02.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/I18N-DkwmfuKm.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/Wrapper-DhZo7Nml.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringBlogFooter-C9aEb07f.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/XIcon.svg-1TYfFUVM.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/EngineeringPageLayout-BenRbSvA.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/blog-CclTzyK5.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/ArticleCarousel-C5IDQsOb.js", "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/HeadingGroup-1EyidEKf.js" ], "css": [] } }, "url": "https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/manifest-bee77d95.js", "version": "bee77d95" }; window.__remixRouteModules = {"root":route0,"pages/shopify.engineering~~layout":route1,"pages/shopify.engineering/$article":route2}; import("https://cdn.shopify.com/shopifycloud/brochure-iii/production-engineering/assets/entry.client-DwbT9GtS.js");</script></body></html>