The Complete Guide to Shopify Development and Integration

Shopify is well understood as a platform for getting a store live quickly. What is less well understood is how far the platform extends when you build on it properly: custom checkout logic, headless storefronts, enterprise B2B channels, and a GraphQL API capable of running a full commerce backend. This guide covers the whole range, from the basics of Liquid through the integration topology of a mid-market brand running Shopify Plus alongside an ERP and three marketing tools. Read it end to end and you will understand our engagement before we ever speak.

Shopify's architecture

Shopify is a multi-tenant SaaS platform. You do not manage servers, databases, or infrastructure. Instead, you work within three layers: the storefront (what shoppers see), the admin (where merchants manage products, orders, and settings), and the API layer (how external systems read and write store data). Understanding which layer a problem lives in determines how you fix it.

Shopify storefront architecture: from browser to backend

The storefront is what shoppers interact with. The admin is where the data lives. The API layer is how everything else connects to it. A clean architecture keeps these three concerns separate so any one of them can be changed without breaking the others.

The storefront and admin are tightly coupled on standard Shopify: Liquid templates read directly from the Shopify data model and render on Shopify's CDN. On a headless setup, the storefront is decoupled and talks to Shopify through the Storefront API, which lets you use any frontend framework but adds complexity and removes some native features like the Shopify checkout hosted flow. Most stores do not need headless, and we will tell you that plainly.

Liquid theme development

Liquid is Shopify's templating language. It looks like HTML with added tags for outputting dynamic data, looping over collections, and conditionally rendering blocks. Every standard Shopify theme is built in Liquid, and most custom development on Shopify involves writing, extending, or debugging it.

The current theme architecture is Online Store 2.0, which introduced JSON templates and the section/block system that makes themes customisable in the visual editor without touching code. We always build to OS 2.0 standards:

JSON templates. Each page type (product, collection, page, blog) is defined by a JSON file that lists the sections it can contain. This separates structure from content and lets merchants add sections without a developer.
Sections and blocks. Sections are reusable layout components. Blocks are the customisable elements inside them. A well-built theme has a small library of sections that merchants can compose into any page layout without touching Liquid.
Metafields and metaobjects. Structured data attached to products, variants, collections, or pages. We use metafields for anything that does not fit the default product schema: technical specifications, care instructions, related products, or any custom data the business needs on the storefront.
App blocks. The OS 2.0 way for apps to inject content into a theme without editing template files directly. We prefer app blocks over manual template injection because they survive theme updates cleanly.

The single most common theme problem we see. Merchants inherit a heavily modified older theme (Debut, Brooklyn) that pre-dates OS 2.0. It cannot use the visual editor properly, it runs on an old version of the Shopify CDN pipeline, and adding a section means a code change every time. If this sounds familiar, the fix is a migration to a current architecture, not more patches on an old one.

Shopify Plus

Shopify Plus is the enterprise tier. The features that actually matter are specific and it is worth being clear about what they are, because the pitch from Shopify's sales team is not always calibrated to what your store actually needs.

The features worth paying for at Plus:

Checkout extensions. The only way to modify the checkout on Shopify is through the checkout extension framework, and it is available only on Plus. If you need custom upsells inside checkout, custom field capture, address validation that talks to your own API, or a loyalty points display, this is the path.
Shopify Flow. A no-code automation builder that runs on the backend. Useful for tagging high-value customers, triggering fulfillment workflows, sending internal alerts on specific order conditions, and a dozen other things that would otherwise require a custom app.
B2B on Shopify. Company accounts, custom price lists per account, net payment terms, purchase order support, and a separate wholesale storefront. Available only on Plus. If you run a B2B or hybrid DTC/wholesale business, this is the right foundation.
Higher API rate limits. The REST Admin API bucket is larger on Plus, which matters when you are syncing thousands of orders per day with an ERP or running batch product updates.
Launchpad. Schedule flash sales, price changes, and theme publishes in advance with automatic rollback. Useful for seasonal campaigns and product drops.

What Plus does not change: the underlying product catalog model, the GraphQL Storefront API, the CDN infrastructure for storefront delivery, or SEO fundamentals. If the only reason you are considering Plus is performance or SEO, the answer is probably no.

Headless and Hydrogen

A headless Shopify setup decouples the storefront from Shopify's rendering layer. The storefront is built in a separate framework, typically React or Next.js, and communicates with Shopify exclusively through the Storefront API or the GraphQL Admin API. Hydrogen is Shopify's own React-based framework for this pattern, built on Remix.

When headless makes sense: you need a storefront experience that Liquid genuinely cannot deliver, such as a highly interactive product configurator, a native app-style navigation model, or a storefront that is part of a larger web application with its own authentication and data layer. You also need a team with the frontend capability to maintain it, because a headless Shopify is a significantly more complex system to operate than a Liquid theme.

When headless does not make sense: almost every other situation. You lose the hosted checkout (and its conversion track record), the visual theme editor, and a large portion of the Shopify app ecosystem. You take on server infrastructure, deployment pipelines, and caching complexity that Shopify's CDN handles for you on a Liquid store. Most stores that went headless in 2020 to 2022 because it was fashionable have spent the years since maintaining infrastructure that a well-built Liquid theme would not have required.

Our default recommendation. Build in Liquid with OS 2.0. If you hit a specific functional limit that Liquid genuinely cannot solve and the business case justifies the operational overhead, then discuss Hydrogen. We will tell you which category you are in during the audit.

Migrations from WooCommerce or Magento

Platform migrations are where the most risk accumulates because there are so many things to get right in sequence, and a mistake on any one of them, whether the redirect map, the customer data export, or the SEO metadata, shows up in revenue or rankings weeks after the go-live date when it is harder to trace back.

Migration pipeline: from legacy platform to Shopify

The stages are sequential for a reason: each one validates the output of the previous. The staging phase is where most migration problems surface, which is why it exists before anything touches the live domain.

The items that cause migrations to go wrong:

Redirect coverage. Every URL on the old platform that Google has indexed needs a 301 to its equivalent on Shopify. Miss a URL and that page's ranking authority disappears. We export the full URL set from Search Console and the platform's sitemap and map every one before a single redirect is written.
Customer password portability. WooCommerce stores passwords hashed in a format Shopify does not understand. Customers cannot log in after the migration and must reset their password. This is not a bug but it needs a communication plan, and it needs to happen on a timeline that does not leave customers locked out over a weekend.
Order history access. Shopify does not import historical orders into its native order management natively. We handle this as a custom metafield structure on the customer record so your support team can access the history without leaving the admin, while keeping the native order system clean.
Custom WooCommerce plugins. Any custom plugin functionality that runs server-side on WooCommerce, whether it is a custom pricing rule, a subscription model, or a bespoke shipping calculator, needs to be rebuilt on Shopify. We map every plugin to either a Shopify equivalent, a third-party app, or a custom Shopify app that replicates the logic.
Magento's attribute sets and configurable products. Magento's product model is significantly more complex than Shopify's. Configurable products map to Shopify variants, but Magento supports more than three variant axes and Shopify does not. We normalise the catalog before migration, not after, because fixing a 20,000 SKU catalog post-migration is expensive.

Custom apps and the API

The Shopify Admin API is available in both REST and GraphQL. The GraphQL version is the current standard: it supports bulk operations, has higher rate limits measured in query cost rather than request count, and is required for several newer features. We write new custom apps against GraphQL and migrate any existing REST-only code when rate limits or feature access make it necessary.

Custom apps are the right tool when a required workflow cannot be served by an existing app on the Shopify App Store, when the data model needs to reach beyond what admin settings expose, or when an existing integration is unreliable and needs to be replaced with something purpose-built for the specific store.

Common cases we handle:

Bulk product update tooling that runs on a cron and syncs a supplier catalog to Shopify at scale, with field mapping and conflict resolution logic
Custom fulfillment routing that reads order attributes and sends to different 3PL endpoints based on product type, destination, or stock location
Reporting apps that pull order, customer, and inventory data and push it to a data warehouse or BI tool on a defined schedule
Subscription management for stores on Shopify that need custom billing logic outside the standard subscription app capabilities

Checkout extensions and conversion

The Shopify checkout is the highest-converting part of most stores and the hardest to change. For good reason: Shopify controls it to maintain PCI compliance and the performance baseline that makes its aggregate conversion rates what they are. On Shopify Plus, checkout extensions are the supported way to add functionality without breaking either.

What checkout extensions can do:

Display product upsells or cross-sells between cart and order confirmation, with add-to-cart handled inline without reloading the checkout
Capture custom fields, such as gift messages, delivery instructions, or business registration numbers, that post to order metafields for fulfillment downstream
Run address validation against an external API during checkout to catch invalid shipping addresses before the order is placed
Display loyalty points balance and allow redemption during checkout without leaving the flow
Apply custom discount logic based on customer tags, cart contents, or external API responses

Checkout conversion funnel: where DTC stores typically lose orders

Typical DTC averages. The largest drop is cart to checkout started, which is driven by price discovery and shipping cost surprises. The payment and final submit drops are mostly friction: form complexity, trust signals, and payment method availability. All three are addressable.

The conversion work that moves the needle consistently: showing shipping cost and estimated delivery date before checkout entry (eliminates the price surprise that drives the first drop), reducing required fields in the address form, ensuring your payment method selection covers the methods your audience actually uses (Klarna or Afterpay for fashion, PayPal for older demographics, Apple Pay for mobile), and adding trust signals at the point of payment entry rather than only on the product page.

ERP, CRM, and marketing integrations

The question is not whether to integrate Shopify with the rest of the business. It is when and how. Manual syncing via CSV export stops being viable somewhere around 50 to 100 orders per day, and the cost of the error rate from a stale export compounds faster than most operators realise.

Shopify integration topology: a mid-market brand

Shopify sits at the centre of the commerce data flow. The middleware layer handles field mapping, retry logic, and error alerting between each system pair. Without it, a failed API call drops data silently and you find out when a customer complains about a missing order.

The integrations we build most often:

ERP sync. Orders from Shopify written to the ERP on placement, with stock levels and fulfillment status written back. The sync runs on Shopify webhooks (near real-time) with a reconciliation job that catches any missed events. We use the Shopify GraphQL Admin API on the Shopify side and the target ERP's REST or SOAP API on the other.
CRM sync. Customer records created or updated on first purchase, with order history attached as CRM activity. Supports HubSpot, Salesforce, Zoho CRM, and any system with a REST API. We decide on the merge strategy before we write a line of code, because merging duplicate customer records after the fact is expensive.
Fulfillment and 3PL. Purchase orders and pick lists sent to the 3PL on order placement, with tracking numbers written back to Shopify and customer notification emails triggered. We map each carrier's tracking URL format so the customer receives a working link, not a raw tracking number.
Marketing platform sync. Customer segments and purchase events pushed to Klaviyo, Mailchimp, or a custom ESP for abandoned cart flows, post-purchase sequences, and win-back campaigns. We push the events that the platform needs without pushing PII that the platform does not need.
Finance and revenue reporting. Daily revenue summaries, refund records, and tax liability data pushed to Xero, QuickBooks, or a data warehouse. We reconcile against Shopify Payments payouts so the numbers tie to the bank account.

Performance and Core Web Vitals

A Shopify store with a Largest Contentful Paint above 4 seconds on mobile is losing real revenue. The number most cited in the industry is that a one second improvement in mobile load time correlates with an 8 to 10 percent uplift in conversion rate. The direction is reliable even if the exact figure varies by store and category.

The common culprits on Shopify themes:

Unoptimised hero images. A 4 MB JPEG as the first above-the-fold image is the single most common LCP problem we see. Fix: convert to WebP or AVIF, add width and height attributes, and use fetchpriority="high" on the LCP element. Shopify's CDN handles the delivery; the format and attributes are the developer's job.
Third-party scripts loading synchronously. Chat widgets, personalisation tools, and review apps that inject themselves into the head block block the main thread. Every third-party script should load with async or defer. Scripts that are not actively used on every page should not load on every page.
Render-blocking font loading. Loading a custom font with a standard link element blocks render until the font downloads. Use font-display: swap and preconnect to the font host. For Google Fonts specifically, host them locally via a build step to avoid the extra DNS lookup.
App bloat. Each installed Shopify app that injects JavaScript adds to the page weight. We audit the app stack during every engagement and identify apps whose functionality is duplicated elsewhere or unused in production. Every redundant app removed is a measurable performance improvement.

B2B and wholesale on Shopify Plus

The B2B on Shopify feature set, available on Plus, is mature enough for most mid-market wholesale use cases. The architecture is based on company records, which hold one or more contacts and one or more locations, each with its own shipping address and assigned price list. Orders placed through the B2B channel carry the company association and net payment terms through to fulfillment without custom code.

What the native B2B channel handles well: custom price lists per company (fixed prices or percentage discounts off the default), purchase order numbers on orders, net payment terms with due date tracking in the admin, and a separate storefront URL with password protection by company or open access with account-gated pricing.

What still needs custom work: complex tiered pricing rules that depend on cart total or SKU mix, integration of Shopify B2B orders with an ERP that handles trade credit differently from retail credit, and advanced approval workflows where a buyer's order requires a manager sign-off before it enters fulfillment. These are solvable with custom apps and Flow automations but they are not native.

What does not work

A short list of things we will not recommend, because they tend to waste money:

Going headless for performance alone. A well-optimised Liquid theme on Shopify's CDN is faster than most React applications in production. If the case for headless is performance, it is almost certainly not justified. Build the Liquid theme right first.
Installing every available app. Each installed app that runs JavaScript on the storefront adds overhead. An app stack that looks reasonable during setup can accumulate to 800 to 900 kilobytes of JavaScript by the time the store is mature. Review the app stack every six months and remove anything unused.
CSV-based integrations at any meaningful order volume. A CSV export plus manual import is a single point of failure that scales with order volume. It should be replaced with an API integration before it becomes a daily operational risk, not after the first data loss incident.
Migrating to Shopify Plus before needing it. Plus is roughly four times the monthly cost of Advanced Shopify. The checkout extensions, Flow, and B2B features that justify the cost are specific. If you are not using any of them, you are paying for infrastructure you do not need. We will tell you if you are in this situation.
Custom themes built without OS 2.0. A custom theme built before 2022 without the sections and blocks architecture will need to be rebuilt when you next do a significant store update. The rebuild is cheaper when planned than when forced by a deadline.

Frequently asked questions

Should we use Shopify or Shopify Plus? +

Shopify Plus makes sense when you need custom checkout logic via extensions, B2B wholesale functionality, Shopify Flow automation, or infrastructure that can handle flash sales and high concurrency. For most stores doing under roughly 1 million USD in annual revenue, the standard plan is the right call and Plus is an unnecessary cost. We assess this during the free audit.

How long does a migration from WooCommerce take? +

A straightforward catalog migration with under 5,000 products and no custom order workflows runs 3 to 6 weeks from kick-off to live. Complex migrations with custom data models, order history, and integration re-plumbing are 8 to 12 weeks. The audit maps the scope before we commit to a timeline.

What is Liquid and do I need a developer to change the theme? +

Liquid is Shopify's templating language, similar to HTML with added logic for looping over products, rendering dynamic content, and accessing store data. Simple copy and colour changes can be done in the theme editor without code. Structural changes, new sections, or custom functionality require Liquid development. We write and test changes in a staging environment before they touch the live store.

Can Shopify handle B2B and wholesale? +

Yes, on Shopify Plus. The B2B on Shopify channel supports company accounts with multiple contacts and locations, net payment terms, custom price lists per account, and a dedicated wholesale storefront. For simpler wholesale needs on standard Shopify, we can implement a password-protected wholesale section using metafield-based pricing and Liquid logic.

What happens to SEO during a platform migration? +

The risk is real but avoidable. We export all live URLs before migration, map every product, collection, and blog page to its new Shopify URL, implement 301 redirects for the full set, preserve all title and meta content, and validate the sitemap and crawlability post-launch. We monitor Search Console for crawl errors and ranking changes for 60 days after go-live.

How do we connect Shopify to our ERP without custom development? +

There is no off-the-shelf connector that handles most ERP pairings reliably at any meaningful order volume. Pre-built apps on the Shopify App Store work for simple one-directional syncs but break under custom field requirements, mixed inventory locations, or when the ERP's API is not REST-standard. We build a purpose-built middleware layer that maps your specific schema, handles retries, and alerts your team when a sync fails rather than silently dropping data.

That is the full picture. When you want it applied to your store, the next step is a free audit: specific findings on your actual setup, in about 48 hours, with no obligation.

Get a free Shopify audit

Building and integrating Shopify: the complete guide