<HeroSection
title="Apps to power commerce"
lightImage="/assets/landing-pages/apps/build-page/build-hero.png"
darkImage="/assets/landing-pages/apps/build-page/build-hero-dark.png"
ctaButtons={(
<IconCard
iconSize="small"
variant="elevated"
iconLocation="left"
title="Start building now"
image="/assets/icons/32/pickaxe-2x.png"
padding="small"
maxWidth
href="/docs/apps/build/scaffold-app"
>
Get set up and scaffold an app
</IconCard>
)}
>
Combine ready-made building blocks into novel solutions
</HeroSection>
<Section>
<h2>Where you can build</h2>
A single app can integrate into a wide range of Shopify surfaces and domains
<Grid columns={3}>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Shopify admin"
image="/assets/landing-pages/apps/build-page/admin.png"
darkImage="/assets/landing-pages/apps/build-page/admin-dark.png"
href="/docs/apps/build/admin"
>
Surface embedded pages and extension UI in the Shopify admin
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Online store themes"
image="/assets/landing-pages/apps/build-page/theme-extensions.png"
darkImage="/assets/landing-pages/apps/build-page/theme-extensions-dark.png"
href="/docs/apps/build/online-store"
>
Use your app to add dynamic functionality to merchants’ storefront themes
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Checkout"
image="/assets/landing-pages/apps/build-page/checkout-ui-extensions.png"
darkImage="/assets/landing-pages/apps/build-page/checkout-ui-extensions-dark.png"
href="/docs/apps/build/checkout"
>
Build custom functionality for checkout and customer accounts
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Customer accounts"
image="/assets/landing-pages/apps/build-page/customer-accounts.png"
darkImage="/assets/landing-pages/apps/build-page/customer-accounts-dark.png"
href="/docs/apps/build/customer-accounts"
>
Extend the order status page and logged-in customer experience
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Flow"
image="/assets/landing-pages/apps/build-page/shopify-flow.png"
darkImage="/assets/landing-pages/apps/build-page/shopify-flow-dark.png"
href="/docs/apps/build/flow"
>
Automate custom workflows by adding triggers and actions to Flow, Shopify’s workflow builder
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="POS"
image="/assets/landing-pages/apps/build-page/pos-extensions.png"
darkImage="/assets/landing-pages/apps/build-page/pos-extensions-dark.png"
href="/docs/apps/build/pos"
>
Extend Shopify’s Point-of-Sale software for physical retail shops
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Web pixels"
image="/assets/landing-pages/apps/build-page/web-pixels.png"
darkImage="/assets/landing-pages/apps/build-page/web-pixels-dark.png"
href="/docs/apps/build/marketing-analytics/build-web-pixels"
>
Add analytics pixels to track customer behavior and improve conversion rates
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Backend functions"
image="/assets/landing-pages/apps/build-page/functions.png"
darkImage="/assets/landing-pages/apps/build-page/functions-dark.png"
href="/docs/apps/build/functions"
>
Extend or customize backend logic by adding Shopify Functions to your app
</IconCard>
<IconCard
iconSize="extraLarge"
variant="elevated"
iconLocation="left"
title="Data"
image="/assets/landing-pages/apps/build-page/apis-and-webhooks.png"
darkImage="/assets/landing-pages/apps/build-page/apis-and-webhooks-dark.png"
href="/docs/api"
>
Stay in sync with Shopify data or perform an action after a specific event occurs in a merchant’s store
</IconCard>
</Grid>
</Section>
<Surface backgroundColor="blue">
<Section>
<SectionLayout columns={2}>
<SectionLayout.Column span={1} alignment="center">
<h2>Meeting merchant needs</h2>
Shopify itself meets about 80% of global merchant needs. For everything else, Shopify merchants turn to apps.
Successful apps solve merchant problems better than their competitors. Very successful apps solve problems that no one else has attempted.
</SectionLayout.Column>
<SectionLayout.Column span={1}>
<Image src="/assets/landing-pages/apps/build-page/meeting-merchant-needs.svg" darkSrc="/assets/landing-pages/apps/build-page/meeting-merchant-needs-dark.svg"/>
</SectionLayout.Column>
</SectionLayout>
</Section>
</Surface>
<Section>
<Grid columns={3}>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="top"
title="Best practices"
image="/assets/icons/48/tutorial.png"
darkImage="/assets/icons/48/tutorial-dark.png"
linkVariant="secondary"
href="/docs/apps/build/performance"
hrefLabel="Learn more"
>
Make your app more accessible, secure, and performant.
</IconCard>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="top"
title="Quality from the start"
image="/assets/icons/48/coin.png"
darkImage="/assets/icons/48/coin-dark.png"
linkVariant="secondary"
href="/docs/apps/store/requirements"
hrefLabel="Learn more"
>
Keep Shopify App Store requirements in mind as you build.
</IconCard>
<IconCard
iconSize="medium"
variant="flat"
iconLocation="top"
title="Deployment and distribution"
image="/assets/icons/48/growth.png"
darkImage="/assets/icons/48/growth-dark.png"
linkVariant="secondary"
href="/docs/apps/deployment"
hrefLabel="Learn more"
>
Deploy to the Shopify App Store to reach millions of merchants, or
directly to a single organization for targeted impact.
</IconCard>
</Grid>
</Section>
<Section>
<SectionLayout columns={2}>
<SectionLayout.Column span={1} alignment="center">
<IconCard
heading="h2"
iconSize="small"
variant="ghost"
padding="none"
iconLocation="left"
linkVariant="secondary"
title="Selling made easy"
hrefLabel="Learn more"
href="https://apps.shopify.com/"
>Put the Shopify App Store to work for you. With a trove of business intelligence, the platform sells your app to the right audience from among Shopify’s millions of merchants.</IconCard>
</SectionLayout.Column>
<SectionLayout.Column span={1}>
<Image src="/assets/landing-pages/apps/build-page/build.png" darkSrc="/assets/landing-pages/apps/build-page/build-dark.png"/>
</SectionLayout.Column>
</SectionLayout>
</Section>
<Surface backgroundColor="azure" backgroundImage="/assets/landing-pages/apps/build-page/deep-data.png" darkBackgroundImage="/assets/landing-pages/apps/build-page/deep-data-dark.png" backgroundPosition="bottom left" backgroundSize="contain">
<Section>
<SectionLayout columns={3}>
<SectionLayout.Column span={1} alignment="auto">
<h2>A deeper look at data</h2>
<p>Optimize user experience and get real-time data by building data connections</p>
</SectionLayout.Column>
<SectionLayout.Column span={2}>
<Grid columns={2}>
<CompactCard heading="h4" title="App configuration" href="/docs/apps/structure">Add data integrations as you architect your app</CompactCard>
<CompactCard heading="h4" title="APIs for commerce" href="/docs/api">With Shopify APIs, your app can integrate data with Shopify in real time</CompactCard>
<CompactCard heading="h4" title="Custom data" href="/docs/apps/custom-data">Boost performance by storing custom data on Shopify </CompactCard>
<CompactCard heading="h4" title="Webhooks" href="/docs/apps/webhooks">Get notified about events on a store by subscribing to webhook topics</CompactCard>
</Grid>
</SectionLayout.Column>
</SectionLayout>
</Section>
</Surface>
<Section>
<SectionLayout columns={2}>
<SectionLayout.Column span={1} alignment="center">
<IconCard
heading="h2"
iconSize="small"
variant="ghost"
padding="none"
iconLocation="left"
linkVariant="secondary"
title="Apps and their extensions"
hrefLabel="Learn more"
href="/docs/apps/build/app-extensions"
>An app’s centralized pages — the app home — and its backend are hosted externally. Meanwhile, an app’s extensions are hosted by Shopify and rendered with native technologies.</IconCard>
</SectionLayout.Column>
<SectionLayout.Column span={1}>
<Image src="/assets/landing-pages/apps/build-page/hosting-app.svg" darkSrc="/assets/landing-pages/apps/build-page/hosting-app-dark.svg" />
</SectionLayout.Column>
</SectionLayout>
</Section>