If you have used Shopify before, you’ve probably fallen in love with the Theme Editor. With its flexible content management options and smooth editing experience, this little piece of functionality is one of the reasons why brands love Shopify so much, and among the aspecs that make the platform so user-friendly compared to its competitors.

But if you decide to go headless, you might be appalled to find that the Theme Editor is not available on Hydrogen. In this case, you will need to either manage your content through code–a solution that dramatically slows down the pace at which you can make content changes–or implement your own content management solution.

In this article, we’ll show you how to do just that: by using Sanity, one of the most renowned and established headless content management solutions available today, we’ll give you quick walkthrough of how you can create a visual content management experience for your headless Hydrogen store.

Let’s dive in!

## Creating Our Content Schema

First of all, let’s create a new Hydrogen application:

```
$ npm create @shopify/hydrogen@latest
```

Now, sign into [Sanity](https://www.sanity.io) and create a new project. When asked how you want to set up your project, pick “From scratch with CLI”:

![](https://cdn.sanity.io/images/kqgmf0g2/production/6e5f37b582d5a25e0f14746437677f4f367331d5-1999x1165.png?fit=clip)

Your project and a public production dataset will be created. You will also receive instructions on setting up Sanity Studio for a JavaScript codebase.

![](https://cdn.sanity.io/images/kqgmf0g2/production/2a13ec2cd76a56f54e53e28442d682c9e82fb222-1999x1371.png?fit=clip)

Now, run the Sanity Studio setup command within the Hydrogen codebase, and name the resulting folder `studio`:

```
$ npm create sanity@latest -- --project [YOUR PROJECT ID] --dataset production --template clean
```

This should be the end result:

![](https://cdn.sanity.io/images/kqgmf0g2/production/3f411a4035a00219d829c4ce4387d89184246170-626x684.png?fit=clip)

All the files generated for Sanity Studio

Next, let's create a new document in Sanity to display later in Hydrogen. How about a promotional banner? Open `studio/schemaTypes/index.ts` and create the `banner` type:

```
import {defineField, defineType} from 'sanity'

const banner = defineType({
  name: 'banner',
  title: 'Banner',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
    }),
    defineField({
      name: 'content',
      title: 'Content',
      type: 'text',
    }),
  ],
})

export const schemaTypes = [banner]
```

Now run Sanity Studio locally, open [http://localhost:3333/](http://localhost:3333/), and create a few banners:

```
$ cd studio && npm run dev
```

![](https://cdn.sanity.io/images/kqgmf0g2/production/5038e128559f997b3b660faa780ac95a05aa43f4-1999x1234.png?fit=clip)

Et voilà, our content is available in Sanity! Now, it’s time to connect Hydrogen to Sanity, so that we can actually retrieve and display the content.

## Connecting Hydrogen to Sanity

We now need to connect our Hydrogen store to Sanity to retrieve this data and display it on the homepage. Let's install the official integration package in the root folder:

```
$ npm i hydrogen-sanity
```

Add a couple of environment variables to `.env`:
```
SANITY_STUDIO_PROJECT_ID=[YOUR PROJECT ID]
SANITY_STUDIO_DATASET=[YOUR DATASET NAME, USUALLY "production"]
SANITY_STUDIO_URL="http://localhost:3333"
```

Update the `server.ts` file from the root to include the Sanity Loader:

```
// ...all other imports
// Add imports for Sanity Loader and Preview Session
import {createSanityLoader} from 'hydrogen-sanity'

// Inside the default export
export default () => {
  // ... Leave all other functions like the storefront client as-is

  // (Prerequisite) If not already initialized, create a `withCache` handler...
  const withCache = createWithCache({cache, waitUntil, request})

  // 1. Configure the Sanity Loader and preview mode
  const sanity = createSanityLoader({
    withCache,
    client: {
      projectId: env.SANITY_PROJECT_ID,
      dataset: env.SANITY_DATASET,
      apiVersion: env.SANITY_API_VERSION || '2023-03-30',
      useCdn: process.env.NODE_ENV === 'production',
    },
  });

  // 2. Make Sanity available to all action and loader contexts
  const handleRequest = createRequestHandler({
    // ...other settings
    getLoadContext: () => ({
      // ...other providers
      withCache,
      sanity,
    }),
  })
}
```

Your Sanity client will now be available in `context.sanity` in all your Remix loaders!

## Retrieving Content from Sanity

Let’s try to visualize the banners we have created previously. 

Inside the homepage `app/routes/_index.tsx`, add a Sanity query to the loader function:

```
export async function loader({context}: LoaderFunctionArgs) {
  // ...other storefront queries

  const banners = await context.sanity.loadQuery(`*[_type == "banner"]`);

  return json({
    // ... storefront queries
    banners,
  });
}
```

And inside the same file, modify the UI to display the data we’re retrieving:

```
export default function Homepage() {
  const {banners} = useLoaderData<typeof loader>();

  return (
    <div className="banner-container">
      {banners.data.map((banner) => (
        <div key={banner._id} className="banner">
          <h2>{banner.title}</h2>
          <p>{banner.content}</p>
        </div>
      ))}
    </div>
  );
}
```

And here you go! We’ve added a bit of CSS to make the preview look nicer:

![](https://cdn.sanity.io/images/kqgmf0g2/production/9b20bed734c392865e89a5ec55bf3c2bf569c1a3-1534x416.png?fit=clip)

Obviously, this is a very basic example–in the real world, you’ll have a much richer content schema. You may even allow your content editors to compose pages however they want by creating a 1:1 mapping between your Sanity schemas to React components, adding live previews, etc.

The sky’s the limit, and we encourage you to check out [the Sanity documentation](https://www.sanity.io/docs) to learn about all the possibilities!

## Keep Up with The Ecosystem

In this article, we have rolled our custom Hydrogen-Sanity integration, but the Remix and Hydrogen ecosystem are evolving rapidly. In fact, Sanity used to offer ready-made templates for integrating with Hydrogen, but they’ve since been archived. Shopify also just announced that they will be [releasing their own visual editor very soon](https://hydrogen.shopify.dev/update/summer-editions-24-announcing-the-hydrogen-visual-editor-and-a-ton-of-dx-improvements), in which case it might be worth switching over!

All of this to say, make sure to stay on top of what’s happening in the ecosystem and follow the latest best practices if you don’t want to be left behind. And if you _do_ deviate from those best practices, make sure that you always have a good reason for doing it!

How To Integrate Your Shopify Hydrogen Store with Sanity CMS

With customer acquisition costs increasing by 222% between 2013 and 2022, modern brands must maximize retention and customer lifetime value. Over the last years, several brands have looked at subscriptions to help mitigate this challenge: by putting future purchases on autopilot, subscriptions can boost purchase frequency and drive more sustainable growth.

As more brands adopt subscriptions, however, many consumers have also begun experiencing [subscription fatigue](https://hbswk.hbs.edu/item/with-subscription-fatigue-setting-in-companies-need-to-think-hard-about-fees), which has led to a slew of cancellations. This trend can only get worse with the recent challenges in the macroeconomic environment, as consumers look to acquire greater control over their spending and cut back on unnecessary purchases.

In other words, subscriptions are a great business model, but they’re becoming increasingly challenging for e-commerce businesses to execute.

This is a complex, multi-faceted challenge that would take several blog posts to unpack. Today, we’d like to start by offering some tactical advice on how you can improve the pre-checkout UX of your subscription offering and incentivize more customers to subscribe based on our experience with brands such as [Cometeer](https://cometeer.com/), [MeUndies](https://meundies.com/), and [Blue Apron](https://www.blueapron.com/).

## #1: Create a “How It Works” Section

Every online store that offers subscriptions should have a “How It Works”section. This section can be a standalone page or embedded in the home page, landing page, pricing page, or any other prominent touchpoint on your e-commerce site.

A good How It Works section equips consumers with all they need to know about your product, pricing, and delivery options. It can be a significant make-or-break moment in the consumer’s decision-making process.

In our experience, a good How It Works page design covers:

* **Benefits, not features:** It goes without saying, but you should tell customers not just what you sell but also why it’s relevant to them. It’s good to know your meal delivery service only ships organic ingredients–but why should they care?
* **Subscription options:** Do you let customers pause, skip, and cancel deliveries at any time? (Hint: You should.) Say so! Let your customers know they will still have complete control and flexibility in managing their subscriptions.
* **Social proof:** UGC is always a critical component, but it becomes even more important with a subscription model, where there’s a significant trust barrier to overcome. Show your best reviews–even better if you include images/videos!

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/0d6024043b61b8db3d4e760aab3ed3fa78b17283-1600x1052.jpg?fit=clip">
   <figcaption>Purple Carrot provides detailed information on its Plans page, which leads to customers to sign-up and eventually checkout.</figcaption>
</figure>

For example, Purple Carrot uses its Pricing page to guide aspiring home chefs through its plant-based meal delivery service. This page helps customers complete the purchase by clearly outlining the high-quality nature of their product, per-meal pricing, and delivery and subscription management options. (But it could still be improved by adding some social proof!)

## #2: Put Your Pricing Front and Center

While new customers may be willing to splurge on a one-time purchase, they will often want reassurance they’re getting the best value for their money when committing to a recurring subscription.

The first step is to make your pricing clearly visible. It seems simple, but you’d be surprised how many brands hide their pricing information in the product details or hard-to-spot sections of the page–see Lovevery or Summer Fridays, highlighted below, as an example.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/68294e038d95e6f577cc162a5c5035f34b0a6a04-1600x1052.jpg?fit=clip">
   <figcaption></figcaption>
</figure>

To improve the visibility and clarity of pricing, consider playing with:

* **Text size:** Adjust text size so it stands out from surrounding content.
* **Contrast:** Use contrast effectively to make text pop against its background and nearby items, enhancing readability.
* **Whitespace:** Incorporate white space to declutter the page, making important information easier to locate and the layout more appealing.

Whenever possible, you should also try to break down your pricing in clever ways that highlight the value of your product. For example, meal delivery services typically use “cost per meal” as the north-star metric, as it helps customers clearly understand how much they’re spending to feed themselves and their families.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/157481bf311a40b75dcec56a1bc087d57019ba1a-1600x1052.jpg?fit=clip">
   <figcaption>Both Athletic Greens and Graza do a great job of clearly showing pricing information and plans on their websites.</figcaption>
</figure>

Finally, featuring pricing on other key touchpoints, such as the homepage page, as done by Athletic Greens, can significantly enhance user experience. Graza also does a great job by detailing pricing information for first and recurring orders directly in the Buy section.

Refining these elements can dramatically improve navigation and satisfaction, steering users from curiosity to commitment.

## #3: Don’t Rush Customers to Checkout

When brands use calls to action (CTAs) like "Get Started," they often rush the customer straight into the checkout process. Yet many users interpret such CTAs as an invitation to start exploring the brand, not to immediately commit.

While it might sound counterintuitive, we often advocate for brands not to disorient or frustrate users by teleporting them to the PDP or–worse–the checkout funnel if they haven’t had a chance to learn about the brand yet.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/9091d6b62146d8ace325963e55f94ece32d64475-1600x1052.jpg?fit=clip">
   <figcaption>MeUndies provides clear subscription service information after clicking the primary CTA and asks users to sign up at the end of the process.</figcaption>
</figure>

MeUndies, a Nebulab client, knows this very well. They link the “Get Started” CTA on their home page to the “How It Works” page. They don’t ask for the customer’s personal information until much later in the customer journey.

By earning the customer’s trust with content and data before moving into the actual checkout funnel, brands can create a smoother experience, reducing friction and increasing conversion rates.

## Bonus: Optimize Your Quiz Experience

While quizzes are not exclusive to subscriptions, subscription brands often use them to help prospective customers find the ideal product variant, subscription plan, and delivery frequency.

As a bonus, here are some tips on how to nail your quiz’s customer experience:

* **Offer an ETA**: By clearly stating the number of steps and completion time of your quiz, you can proactively manage customer expectations and increase engagement. Of course, this only works if your quiz is _actually_ quick!
* **Allow moving back and forth:** Customers should be able to move between different steps of your quiz and revisit previous questions without starting from scratch. You should also ensure that navigation is consistent with your site’s design.
* **Store user progress:** Ideally, you should store a user’s progress as they go through the quiz so they can resume it later. Pro tip: Just like you send cart abandonment emails, ask for the customer’s email upfront so that you can enroll them in a “quiz abandonment” flow if needed!

These tips will help create a smooth and pleasant quiz experience, which can dramatically impact your add-to-cart and conversion rates.

## Ready To Master Your Subscription UX?

Here's a brief refresher on the best practices that can elevate your subscription service:

1. Craft a compelling "How It Works" section that focuses on benefits rather than features, clearly outlines delivery and subscription options, and establishes credibility through social proof.
2. Put pricing front and center, not just on the PDP but also at other touchpoints in the customer journey. If possible, break down your pricing to demonstrate the value you deliver.
3. Rather than sending customers from your homepage straight to the PDP or checkout, focus on educating them on the value of your offering and only then closing the sale.

And our bonus tip: if you have a quiz functionality, allow your customers to navigate back and forth between steps and store their progress for later.

If you need UX design for your subscription offering, we can help! Since 2011, we’ve been helping brands anywhere from pre-revenue to $500M/year with the design, launch, and optimization of their subscription experience. [Feel free to reach out!](https://nebulab.com/contact-us)

3 (+1!) E-Commerce Subscription Tactics You Might Be Missing

So, you’ve reached the hard conclusion that [you need to build some middleware](https://nebulab.com/blog/ecommerce-middleware) for your Shopify store—perhaps you need to integrate with an exotic third-party system that doesn't offer a native app, or you have a complex subscription flow that cannot be accommodated by an off-the-shelf solution.

But once you've mapped out all the business requirements, you're still left with a million decisions to make: where should you host your middleware? What's the best architecture, a monolith or microservices? Should your code run on a fixed cadence or respond to Shopify's webhooks?

In this article, we're publishing some broad technical considerations we've collected over the years while working on middleware implementations for our clients. We suggest treating these as general guidelines: your mileage may vary depending on your requirements, team composition, and growth stage.

Let's dive in!

## Reactive vs. Scheduled Middleware

The first crucial architectural decision you'll make is whether your middleware should be reactive or scheduled.

Reactive middleware responds immediately to events triggered by external actions, such as customer purchases or inventory updates. It's the preferred choice when dealing with time-sensitive business logic, such as sending email notifications or updating order information.

In reactive middleware, incorporating a queue mechanism is imperative to facilitate the asynchronous processing of incoming event payloads. By decoupling the reception of webhooks from the actual processing logic, queues create a buffer that allows your middleware to absorb workload spikes seamlessly. They also mitigate the risk of data loss during processing disruptions, ensuring that all incoming events are reliably processed.

Queues are de facto mandatory when building middleware for Shopify, as your store will deactivate your webhook subscription [in case of multiple failures/timeouts.](https://shopify.dev/docs/apps/webhooks/best-practices#respond-quickly)

Additionally, you should design reactive middleware to be idempotent and resilient against race conditions, e.g., when handling duplicate or out-of-order event notifications. This allows brands to mitigate the risk of data corruption.

Scheduled middleware, on the other hand, operates on a predefined cadence, executing tasks at regular intervals. It's the preferred choice when dealing with bulk data operations, such as subscription processing or (in some cases) integrations with third-party systems.

Because scheduled middleware might process a substantial amount of data during each execution, optimizing performance and resource utilization is essential. This can be achieved by grouping data into manageable chunks and processing it in batches, minimizing resource contention and maximizing throughput. When integrating with third-party systems, it's also essential to be mindful of rate limits, maximum payload sizes, and the opportunity to leverage batch APIs whenever available.

By understanding the distinct functionalities of reactive and scheduled middleware, businesses can leverage these tools strategically to orchestrate complex workflows and optimize their Shopify operations for efficiency and scalability.

## Monoliths vs. Service-Oriented Architectures

Especially in larger projects, it's tempting to implement your middleware logic as a constellation of microservices, making up what's typically called a Service-Oriented Architecture, or SOA for short. Technically, these services may run as traditional long-lived web applications, but we often see them deployed in serverless environments such as AWS Lambda or Cloudflare Workers.

The theory is that this design increases technical freedom and reduces maintenance overhead: for instance, the subscription processing engine may be implemented using a technology different from the WMS integration. Plus, if they're deployed as serverless functions, there's no need to worry about scaling the services to match transaction volume because the infrastructure provider will handle that responsibility for us.

In our experience, however, most SOA setups suffer from premature optimization. The additional freedom and scalability come at the expense of a more complicated development and infrastructure setup, with multiple codebases to maintain and constraints on the deployment process. Code reuse is also more complicated, and rather than going through the hassle of building and maintaining an internal SDK, engineering teams often end up duplicating the shared code. In other words, the additional effort and complexity often outweigh the gains.

Because of this, when faced with complex middleware architectures, we always consider whether there's a chance to simplify things by moving to a [Majestic Monolith](https://signalvnoise.com/svn3/the-majestic-monolith/) deployed as a traditional, long-lived Web application. While they're not as fancy as a serverless SOA, monoliths have several advantages:

* Engineers only need to work in one codebase to make orthogonal changes, which makes it easier to work atomically.
* Code sharing across API endpoints and scheduled jobs is trivial since everything's in the same application.
* We only need to write and maintain a single deployment pipeline, which makes deployments simpler and more robust.
* We eliminate the need to deal with network failures, data model inconsistencies, and data synchronization issues.
* It's still easier and cheaper to find and onboard new engineers on a monolith vs. a SOA.

This is not to say that microservices and serverless architectures are always bad. There are situations where they can help with scalability, e.g., for trivial middleware that only needs to respond to a specific webhook (in which case a serverless infrastructure is acceptable) or when a particular piece of business logic can be optimized by rewriting it in a more suitable technology. However, these pros always need to balance against the additional complexity introduced into the system.


## Keep Your Options Open

As we mentioned at the beginning of this article, your mileage may and will vary, especially as time passes and your middleware starts taking on more responsibilities. Our suggestion is to regularly re-evaluate your design and architectural choices to ensure that your current setup is still the ideal fit for your needs.

Furthermore, remember that the best middleware is no middleware. Whenever you see an opportunity to simplify your architecture by removing custom logic in favor of a third-party solution, you should seriously evaluate it. E-commerce brands are not tech startups, and every dollar you save in development costs is a dollar you'll be able to invest in other areas of the business.

If you are struggling with fine-tuning your custom integrations or business logic, [don’t hesitate to reach out](https://nebulab.com/contact-us): we can help you navigate and streamline the complexity, finding the ideal setup for your brand.

Designing and Scaling High-Throughput Shopify Middleware

In the DTC landscape, where every pixel of your e-commerce site holds the potential to captivate customers and drive sales, the significance of a robust design system cannot be overstated. It's not just a luxury anymore—it's a necessity.

A design system comprises patterns and methodologies that assist not only designers and developers but also product managers and marketers in creating cohesive and user-friendly digital products. While various models exist, most encompass a pattern library, design tokens, brand and style guidelines, along with documentation detailing the system's usage.

At its core, a design system is the backbone of your brand's digital identity, ensuring that as your e-commerce business scales, every page, button, and interaction maintains a consistent brand image and delivers an optimized user experience.

But diving into the world of design systems can often leave brands navigating a maze of challenges, especially under the relentless pressure to rapidly deliver fresh, compelling landing pages and new features. That's where the magic of design systems truly shines—by providing a reservoir of pre-built components and guidelines, they turbocharge the creation process, allowing your team to keep pace with demand without sacrificing quality.

Explore the power of design systems to transform your digital journey and drive success in the competitive e-commerce landscape.

## How Design Systems Accelerate Time to Market

In a traditional scenario, the journey of redesigning product pages begins with designers crafting prototypes. These prototypes then undergo a series of checks: stakeholders review, QA stages with engineers, validation by UX researchers, and eventual exposure to a segment of the site’s visitors for performance evaluation through A/B testing. Multiple design iterations are crafted and assessed, with many discarded in pursuit of the optimal solution. This iterative process is vital to ensure only the highest quality updates reach the entire customer base. Yet, the involvement of various teams and multiple revisions makes it inherently time-intensive.

However, with the aid of a design system, the approach is streamlined to fewer phases, significantly accelerating the design-to-production timeline. Tools like [Figma](https://www.figma.com/) provide a collaborative environment where designers can rapidly prototype by pulling pre-defined components and patterns into their workspace, cutting down prototype creation from days to hours.

But the efficiency doesn't end there. Developers can swiftly compile new features by accessing the same pool of components, bypassing the need for detailed visual direction for every interface. Tools like [Storybook](https://storybook.js.org/) become invaluable in this context, enabling the isolation and coding of UI elements for seamless integration. This streamlined workflow ensures that projects progress swiftly from ideation to implementation, allowing teams to deliver high-quality updates in a fraction of the time.

## Implementing a Design System: First Steps for E-Commerce Brands

> A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. — Nathan Curtis

The journey towards a comprehensive system that aligns with [Nathan Curtis](https://medium.com/@nathanacurtis)'s vision—a "*living, funded product with a roadmap & backlog, serving an ecosystem*"—might feel overwhelming. Yet, the truth is, embarking on this path doesn't require an army. It's about smartly leveraging what you have and starting somewhere meaningful. Let's explore practical steps to initiate and nurture a design system with your current resources.

- **Conduct a Design Audit**: Begin by taking stock of your current design elements across all digital assets. This includes colors, fonts, button styles, and any reusable components. The goal here is to identify inconsistencies and opportunities for standardization. A comprehensive audit paves the way for a more cohesive digital presence. [FigJam](https://www.figma.com/figjam/) is a great tool to kickstart this first step and to keep all the screenshots accessible to everyone on the team.


- **Assemble a Cross-Functional Team**: This doesn't mean hiring new roles but individuating people across existing departments who will be responsible for creating and maintaining the design system. Even a small team, comprising a designer, a developer, and a product manager, can kickstart the process. Their diverse perspectives will shape the design system to be both usable and technically feasible.


- **Create Design Tokens and Components**: Start by standardizing the most frequently used elements. Design tokens are the building blocks (like colors, typography, and spacing) while components are reusable UI elements (such as buttons, and input fields). Focusing on these foundational elements is essential to pave the way for creating patterns (components that come in a specific combination).

- **Set Up Documentation**: Initially, your documentation could be as straightforward as a shared online document or a simple internal wiki. Maintaining the same structure (tokens, components, patterns) and vocabulary of your design system is the key to fostering accessibility and clarity.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/0202c0d7fe5620978d813c8a6d989a41ec7084e5-1600x1052.jpg?fit=clip" alt="Cometeer design system by Nebulab">
</figure>

Remember, the essence of a design system is to foster efficiency, consistency, and innovation across your online store. Starting small and scaling thoughtfully can lead to significant long-term benefits, setting a strong foundation for growth and adaptation.

## Overcoming Obstacles to Adoption

Introducing a design system might initially meet with skepticism from your teams. Overcoming this involves embracing a culture of collaboration and shared ownership. As discussed in [Boost Your eCommerce Team’s Productivity with Open Design](https://nebulab.com/blog/the-open-design-process), developing an open design process is essential for fostering broader adoption of the design system throughout the organization.

Demonstrating the design system's value through small, visible projects that improve the e-commerce experience—such as improving the navigation bar or updating product grids for holiday sales—showcases the practical benefits. These successes not only build confidence in the system but also serve to highlight its effectiveness in real-world applications.

Organize hands-on sessions where stakeholders from different teams—be it design, development, or even marketing—redesign an e-commerce product page or streamline the checkout flow using the design system components. This is a great opportunity to turn skeptics into advocates (and they can have fun doing it, too!).

> A design system’s value is realized when products ship features using parts from the system.
> 
> — Nathan Curtis

## Tips on Scaling Design Systems

As your e-commerce brand navigates through various stages of growth, the need for your design system to adapt and scale becomes increasingly apparent. A scalable design system not only ensures consistency across your digital presence but also facilitates a more collaborative and efficient workflow as your team expands and your product offerings diversify.

Here are some practical tips on achieving just that, ensuring your design system remains a thriving, integral part of your brand's evolution:

- **Foster Shared Language**: In a design system, a "primary button" component is defined with specific attributes such as size, color, and behavior. This terminology is consistently used by both designers (on Figma) and developers (on the code), ensuring seamless communication and alignment throughout the project.

- **Prioritize Regular Reviews**: Schedule frequent review sessions dedicated to assessing and updating the design system. These reviews are opportunities to adapt to new brand needs, incorporate feedback, and integrate emerging design and tech trends.

- **Encourage Contribution**: Organize workshops to make the design system a collaborative project where team members can contribute ideas, feedback, and improvements. This not only keeps the system dynamic but also fosters a sense of ownership among the team.

- **Document Religiously**: Keep comprehensive and up-to-date documentation of the design system. The documentation can be on Figma, a separate document, or a tool. It can even be a website, it depends on project dimensions. With [Shopify Polaris](https://polaris.shopify.com/), Shopify provides clear and accessible documentation to streamline the design and development process for Shopify merchants and partners.

Implementing these strategies can help your design system remain a vital, evolving asset that supports your brand's growth and adapts to its changing needs.

## Design Systems: The Blueprint for E-Commerce Excellence

In wrapping up our journey through the landscape of design systems, e-commerce brands must grasp just how vital these frameworks are. At the heart of it, design systems foster higher quality products and markedly enhance the user experience. One of the standout benefits is scalability. As your brand grows and your digital footprint expands, a design system ensures that scaling up doesn't mean starting from scratch every time. This seamless scalability goes hand in hand with maintaining brand consistency—vital for cultivating brand recognition and trust among your audience.

Moreover, design systems contribute to better website performance. By eliminating repetitive components and streamlining the design-to-development process, websites become leaner and more efficient. With a design system in place, accessibility is not the only built-in standard; for brands eyeing the global market, having a design system is a strategic step for embedding localization best practices right into each pattern, ensuring that your brand resonates with diverse cultural sensibilities —as we explained in [Expanding Your Brand Globally With Cross-Cultural Design](https://nebulab.com/blog/cross-cultural-ecommerce-design).

Embracing a design system isn't merely an operational upgrade; it's a commitment to elevating your brand's digital presence, ensuring that every interaction your customer has with your brand online is as intuitive, engaging, and memorable as possible. As you consider the next steps for your online store, remember that a design system offers more than just a collection of components. It's a pathway to crafting experiences that truly resonate, setting your brand apart in the competitive digital marketplace.

Why E-Commerce Brands Should Have a Design System

On August 28, 2025, [Shopify will sunset the ability to customize your `checkout.liquid` template](https://shopify.dev/docs/themes/architecture/layouts/checkout-liquid).

Newly created stores on the Shopify platform will already notice that they cannot use this template to customize their payment steps, thank you, and order status pages. Shopify is reigning in control over these pages and forcing merchants to migrate to [Checkout Extensibility](https://www.shopify.com/plus/upgrading-to-checkout-extensibility?shpxid=169152ee-9333-4686-13FB-D40F49B3F520). [Recent articles](https://www.shopify.com/plus/customers/monos) published by Shopify promote Checkout Extensibility as the faster and more maintainable way to extend your store’s checkout experience.

Unfortunately, with limited control over the checkout, thank you, and order status pages, merchants have also lost the ability to place tracking pixels on these pages. To remedy this, Shopify has introduced [Web Pixels](https://shopify.dev/docs/apps/marketing/pixels). Web Pixels can be either standalone (Custom Pixels) or part of a Shopify App (App Pixels), and merchants can use them to track both predefined and custom analytics events.

In this article, we’ll examine the inner workings of App Pixel and Custom Pixels and discuss alternatives merchants can deploy when they need additional granularity in their data.


## App Pixels

App Pixels are part of Shopify Apps that you install: for example, the [TikTok app](https://apps.shopify.com/tiktok) provides an App Pixel out of the box–you just need to enable it from the Shopify Admin.

There are several benefits to using App Pixels over adding custom tracking code to your theme: the new structure simplifies the installation and removal of the pixel, allows you to comply with customer privacy regulations out of the box, and streamlines the integration of your tracking logic across different types of checkout (e.g., Shop Pay vs. one-page vs. three-page checkout).

While this new approach to tracking pixels is a significant step forward, not every platform has a Shopify App available; therefore, not every platform exposes an App Pixel. If your tracking platform does not have an App Pixel you can install, you might need to go with Custom Pixels.


## Custom Pixels

Custom Pixels can be used to integrate tracking platforms that do not expose an App Pixel or when you want to track a custom event or datapoint. Your pixel can subscribe to a [fixed set of events that Shopify publishes](https://shopify.dev/docs/api/web-pixels-api/standard-events) or to [custom events](https://shopify.dev/docs/api/web-pixels-api/emitting-data) published by your theme and send the information to an external service.

Similar to App Pixels, Custom Pixels can be enabled and disabled through the Shopify Admin, and they automatically conform to the customer’s privacy preferences, which makes them a powerful tracking solution fully integrated within Shopify.

With that said, Custom Pixels also have their limitations.

First of all, Custom Pixels [are sandboxed in iframes](https://shopify.dev/docs/apps/marketing/pixels#lax-sandbox-custom-web-pixel). Because of that, you might run into limitations with specific tracking scripts. We recommend working with your tracking platform to resolve these issues whenever possible.

Secondly, Custom Pixels only have access to a limited set of data. During a recent migration from custom checkout scripts to Web Pixels, we encountered a limitation on some Custom Pixels, specifically around conversion tracking. By default, Shopify publishes the `checkout_completed` event. As part of this event, Shopify [sends along limited order- and customer information](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed). However, The tracking tags installed on our store used additional information, like the customer order count and type of purchase, that we originally included in the checkout script.

If you run into such limitations, there are a few alternatives you can try. That being said, each comes with trade-offs, and you should ensure the additional implementation and maintenance effort is worth it.


## Server-Side Tracking

Instead of relying only on Web Pixels, you can use server-side tracking to enrich (or replace) the data sent to your tracking platforms. Because this logic is not running in the browser, you can call the Admin API and access attributes that would otherwise not be available through the Storefront API.

This is a significant advantage, but it comes at a cost: you’ll have to manage custom code that runs on a separate server (or on a platform [such as Gadget](https://nebulab.com/blog/custom-shopify-automations)), and you will not be able to benefit from Shopify’s primitives for Web Pixels, putting the onus on you to deal with aspects such as privacy preference compliance.

An interesting middle ground is to use the [Shopify Flow](https://apps.shopify.com/flow) app. With the ability to [send HTTP requests](https://help.shopify.com/en/manual/shopify-flow/reference/actions/send-http-request) and the [new action to run custom JavaScript code](https://help.shopify.com/en/manual/shopify-flow/reference/actions/run-code), Flow gives you a robust set of tools to send information to an external API with attributes that your Web Pixels or frontend logic cannot easily access. You’ll still need to maintain the logic required for your solution, but Shopify will at least take care of hosting and executing it.


## Checkout Extensions

One of the benefits of the new Checkout Extensions system is that you can inject custom logic and UI into your checkout. Shopify allows extensions [to publish custom analytics events](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/analytics) with any attributes you want. As Checkout Extensions have fewer restrictions than Custom Pixels, they can be used to pull extra information from the Storefront API and emit a custom analytics event. Your Custom Pixel can then send this event to any third-party tracking platform.

The implementation and maintenance cost here is relatively low: as long as your Checkout Extension adheres to the official APIs, this can be a reasonably robust solution. However, because Checkout Extensions can only access the Storefront API, you will have access to a more limited dataset than with server-side tracking.

You will also need to set up a custom Shopify app on your store and expose the extension to your theme. Luckily, Shopify makes this relatively easy by providing robust tooling and hosting the app directly, which means you don’t need external servers.


## Session Storage

Finally, another approach is to use the browser’s Session Storage to temporarily store attributes as the customer browses your store. You can then retrieve these attributes from your Custom Pixel at checkout. 

For example, you could use Session Storage to store a referrer URL here or the type of order the customer is completing (OTP vs. Subscription) _before_ checkout starts. Custom Pixels have access to Session Storage, which means they can read these attributes when the `checkout_completed` event is fired and forward them to your tracking platform.

Using Session Storage is the simplest way to add additional context to any analytics event: there is no need to set up a custom Shopify app, as all the logic can live in your theme and Custom Pixel. Additionally, in contrast to Checkout Extension, it not only allows you to include additional data that you read from Shopify’s API but also to collect behavioral data while the customer is browsing your store.


## Balancing Data Enrichment with Maintenance Effort

Web Pixels are a robust tracking solution fully integrated within Shopify’s ecosystem.

With more platforms getting on board, App Pixels are quickly becoming a straightforward and reliable solution for installing tracking pixels. In addition, Shopify enforces that the customer has opted into data collection before enabling these pixels, which is a step that is often overlooked when implementing tracking tags on a storefront.

Custom Pixels have some rough edges: their sandbox allows Shopify to enforce similar privacy constraints as for App Pixels but also creates situations where tracking tags don’t work, leaving merchants at the mercy of the tracking platform to build an App Pixel or to update their tracking script.

Finally, when neither App Pixels nor Custom Pixels provide the right data, you can consider alternatives such as Server-Side Tracking, Checkout Extensions, or Session Storage.

We work closely with business stakeholders to determine what events and data we need to track and how the data will be used. We then use that information to build a solution that will satisfy the brand’s needs while also minimizing the technical maintenance burden.

If you are migrating to Checkout Extensibility or need assistance with your existing tracking setup, [don’t hesitate to reach out!](https://nebulab.com/contact-us)

Web Pixels on Steroids: How To Enrich Your Shopify Analytics

In the last few years, customer acquisition has become more challenging and expensive for direct-to-consumer (DTC) brands due to App Tracking Transparency, increased competition, and inflationary pressure. With Chrome deprecating third-party cookies in late 2024/early 2025 and the resulting “signal loss,” marketers expect campaign performance to take another hit, driving Customer Acquisition Cost (CAC) further up.

As a result, e-commerce executives have been paying increased attention to customer retention strategies. Existing customers are cheaper to re-engage, have a higher average order value, and can drive organic acquisition through referrals, UGC and word of mouth.

In our conversations with clients, Customer Relationship Management (CRM) strategies have been top-of-mind, and new or revamped loyalty programs are among the main projects that brands are putting on the roadmap for the next year–often coupled with more intentional zero-party/first-party data strategy and better personalization capabilities.

However, not all loyalty programs are created equal: different growth stages, categories, and business models call for different program designs. The loyalty ecosystem has become increasingly complex to navigate, with a deluge of tools and tactics that brands can tap into. While this leads to more flexibility and healthier competition, even expert practitioners are often at a loss when they want to launch a new program or when they need to understand the performance and pitfalls of their existing one.

In this article, we’d like to cover the e-commerce loyalty programs through a first-principles approach. We’ll look at how to pick a program structure, how to design the “earn” side and the “burn” side of your program to maximize ROI–based on factors such as your geography, target demographic, product category, and business model–and how to measure the effectiveness of your program.

Let’s dive right in!

## How to Structure Your Loyalty Program

The number one mistake we see brands making when rolling out their loyalty program is not being intentional enough when it comes to program structure. Instead, they just do the first thing that comes to mind, copy popular competitors or other brands they admire, or mindlessly adopt the functionality of whatever loyalty app they have decided to install (which, in turn, is often dictated by the app’s popularity).

Unfortunately, loyalty programs are extremely nuanced. The ideal program depends on factors such as geography, target demographic, product category, business model, internal capabilities, and several other elements that, taken together, make certain structures and rewards more effective than others.

If you don’t account for all these elements, you will end up with a program that’s underperforming at best and detrimental at worst. Think about a luxury fashion brand that releases a discount-based loyalty program: customers wouldn’t simply be uninterested, but some might actively resent the brand for putting forward a cheap, transactional program that is not consistent with your brand’s image.

In fact, we find that _consistency_, rather than _uniqueness_, is the primary trait of successful loyalty programs. **Good programs are consistent with the needs of both the brand and its consumers–at all times and across all touchpoints.** You don’t need to be cleverer than everyone else; you just need to consistently make your customers happy in ways that will ultimately benefit the brand. If you can align these two needs, you’re halfway there.

As you can imagine, that’s easier said than done. In reality, most brands are pulled in a million different directions, and a compromise is often needed to find the ideal structure.

In the following paragraphs, we’ll outline a streamlined, repeatable process that you can follow to design the foundational aspects of your loyalty program.

### 1. Pick a Loyalty Program Type

The very first step is to pick the structure of your loyalty program.

You’ll find a lot of conflicting and confusing information on the web about the different possible types of loyalty programs–most resources are trying to one-up each other by adding one more variation to a never-ending list of program structures.

Let’s simplify this. In our experience, all loyalty programs fall into one of two categories:

* **Balance-based programs.** In a balance-based program, customers are awarded points when they perform specific actions (e.g., spending with the brand) or at key moments (e.g., on their birthday). They can then spend those points to redeem rewards such as discounts or free products. This is similar to having a bank account where you accumulate money and then spend it.
* **Tier-based programs.** Tier-based programs are similar to transactional programs in that you design a way to “quantify” how loyal customers are. However, rather than the customer “spending” their loyalty, the customer is assigned a loyalty tier (which can be permanent or not). Based on the customer’s tier, they are then granted different perks, such as free shipping or early product access.

Everything else (gamified programs, [paid memberships](https://nebulab.com/blog/ecommerce-memberships), value-based programs, etc.) is a variation of the above. For instance, a paid membership is just a tiered loyalty program where your tier is determined by a digital subscription plan: you pay the brand every month just to have access to the perks of that specific tier.

Neither type of program is superior to the other. Whether to go with a balance-based program or a tier-based program is primarily a function of your brand’s positioning, price point, and consumer demographic:

* **Balance-based programs are better for brands selling to a price-sensitive audience** that worries about value for money and responds better to more tangible rewards. These customers are likely already subscribed to similar programs, e.g., at their grocery store, making the model more familiar.
* **Tier-based programs, on the other hand, are a better fit for a more affluent type of consumer** who worries about status more than about convenience. The aura of exclusivity associated with being on the upper tiers of a brand’s loyalty program is a perfect match for such a demographic.

Another factor to take into account has to do with the nature of the rewards you expect to give your customers: some rewards (such as freebies) are supposed to be one-offs, which makes them a better fit for a balance-based program, while others (such as free shipping) are better modeled as “permanent” rewards, which makes them a better fit for a tier-based program.

If you can’t decide, you should know that it’s not uncommon to see hybrid programs: Most airlines, for instance, have loyalty programs where consumers accumulate rewards as they travel with the airline. Certain perks (e.g., priority boarding) are unlocked through a tier-based mechanism, while others (e.g., free trips) are unlocked through a balanced-based mechanism.

**However, as we’ll see later, simplicity and ease of use are key elements that determine the success of a loyalty program**, so you should only take this approach as a last resort, _especially_ if you’re launching a brand-new program.

### 2. Model the “Earn” Side of Your Program

Once you’ve chosen the foundational structure of your loyalty program, it’s time to determine how your customers will earn their rewards. At Nebulab, we typically refer to these as _triggers_ because they trigger your customers to carry out certain behaviors.

When designing a trigger, there are only two elements you need to think about:

* What is the action you want customers to take?
* How are you going to reward customers for that action?

They might seem like trivial questions, but they’re really not. Think about it this way: a loyalty program is an investment. You’re giving away value (in the form of discounts, freebies, services, etc.) in exchange for a specific return. If you get your triggers wrong, you might fail to drive action or drive the wrong action, which means you’re giving away your loyalty program perks in exchange for nothing.

While most brands start by rewarding customers for spending more, you don’t have to stop there. Here are a few additional ideas that might be relevant:

* **Acquire zero-party data.** If you need more information about your customers, how about _asking_ them? You can use your loyalty program to collect data about a customer’s preferences, habits, and attitudes and then activate it as part of your personalization strategy or product manufacturing process.
* **Encourage event attendance.** If you host virtual or IRL events, you can encourage attendance by rewarding attendees through your loyalty program. (Note: Exclusive event access also makes for a very appealing loyalty perk, so this goes both ways!)
* **Collect user-generated content (UGC).** Are you struggling to collect UGC for your brand, or do you need some organic content for a new product launch? You can reward customers for posting content on social media and allowing you to reuse it across your digital properties.
* **Promote referrals.** For obvious reasons, referrals and loyalty go hand-in-hand. If you want to drive more referrals, you can use your loyalty program to encourage customers to tell their friends about your brand. Bonus: Make it an even better deal by also rewarding the _referee_, not just the referrer!

These are very generic examples that will apply to most brands. However, as we’ve already said, the sky’s the limit: find ways to activate your loyalty program that make sense for your brand, and keep in mind that the “right” triggers will change over time.

When working with brands, we encourage them to treat their loyalty program as a blank canvas that they’re constantly drawing on. At any given time, you should be able to draw a straight line from your current goals and challenges to your loyalty program’s structure: How does your program drive behavior that helps your business reach the next level?

### 3. Model the “Burn” Side of Your Program

Once you’ve established how customers will advance in your loyalty program, you need to determine what perks you’ll offer.

A common mistake at this stage is copying what everyone else does and offering discounts without thinking about what your customers really want.

Typically, we bucket loyalty program perks into four categories:

* **Exclusivity.** These perks include exclusive/early access to products, content, or events. They are typically a good fit for premium brands with an established “brand universe” (i.e., digital and physical IP) that they can expand, remix, and leverage as part of their loyalty program.
* **Cash.** These are more tangible monetary perks such as discounts, cashback, freebies, free shipping, and other forms of value add. They are typically a good fit for value-driven brands, where consumers are more price-sensitive and want to know they’re getting the most bang for their buck.
* **Services.** Think personal shoppers, pet grooming, and other services you can bundle with your product to create a holistic brand experience. They are a good fit for product categories that are service-adjacent (such as pets), require constant education (such as apparel/beauty), or both.
* **Community.** Exclusive communities are becoming increasingly popular, allowing customers to retreat from the open web into a “safe space.” These communities can double down as invaluable sources of UGC and customer feedback, creating a powerful loop.

It’s worth spending a few words on discounts, which are extremely common in loyalty programs. While discounts are easy to implement and seem like a safe bet, they are not necessarily the right choice for all brands. Discounting has several problems:

* **It’s expensive.** While this ultimately depends on your profit and operating model, discounting products year-round can severely impact your bottom line.
* **It scales poorly.** With most of the perks we have described, you can access economies of scale. That’s not the case with discounting: no matter your size, a 10% discount will always mean giving away 10% of revenue.
* **It hurts your brand.** Discounting lowers the perceived value of your product and can easily backfire, especially if your brand has a premium positioning.

So, how do you decide which perks to offer? It’s pretty simple, actually: you just ask!

Talk to 10-20 of your most loyal customers, i.e., those who will realistically reach the upper echelons of your loyalty program. You’ll want to ask them about their lifestyle, how your brand fits into their day-to-day, what other brands they shop with, and what they would value in your loyalty program. This should give you a comprehensive overview of what perks will resonate the most.

A final note: if your brand sells in different channels (e.g., online and in your physical stores), design your perks to appeal to customers no matter their shopping channel. For instance, a free shipping perk doesn’t make sense to someone who typically shops in-store, but having access to a personal stylist once a year is much more enticing.

## Optimizing Your Loyalty Program CX

When we talk about Customer Experience (CX), we refer to _how_ customers will interact with your loyalty program. Making your program as simple as possible to understand and consume is one of the main factors determining its success.

On that note, here are a few suggestions for creating an amazing loyalty program CX:

* **Unify the experience.** By funneling as many of your CRM operations as possible through your loyalty program, you will streamline the customer experience, maximize enrollment rates, and reduce operational overhead for your team. This can go as far as enrolling any customer with a registered account into your loyalty program.
* **Keep it simple.** At the same time, you want to avoid overcomplicating things: if customers get confused, they might stop engaging with the program. Provide clear instructions for earning and consuming rewards, and keep reminding customers of the existence and structure of your program across different touchpoints (e.g., via email, SMS, at checkout, etc.).
* **Leverage personalization.** Loyalty program personalization is a somewhat sophisticated but compelling technique. Some perks resonate more than others: if you can identify which customers are most likely to appreciate them, you can effectively maximize customer engagement.

Remember that if you’re using a third-party app to power your loyalty program, your ability to customize the CX might be somewhat limited. This isn’t a bad thing per se, but it is something you’ll want to account for when picking your ideal partner. You also shouldn’t be scared of deploying a little bit of custom technology, if it helps you stand out from the crowd and create a loyalty program that your customers will love you for.


## Measuring Loyalty Program Effectiveness

Launching your program is only half the battle. As we’ve mentioned, a good loyalty program is like a blank canvas: you should constantly adjust it to drive the behavior you want at that moment in time. To do that effectively, you need to measure the success of your program.

What KPIs to measure ultimately depends on your program's structure, perks, and rewards. At a minimum, you’ll want to look at the following:

* **Enrollment Rate:** % of unique customers who enrolled in your program
* **Engagement Rate:** % of unique customers that engaged with your program in any capacity (e.g., looking at their balance)
* **Redemption Rate:** % of unique customers that used a perk from your program
* **AOV, LTV, and Time-Bound Retention:** you’re already measuring these for your regular customers. For your loyalty members, you want to measure the program’s incrementality with respect to these KPIs–more on that below.
* **Program Costs:** you should have a clear picture of both variable costs (discounts, freebies, events, etc.) and fixed costs (IT, training, etc.).

Finally, don’t forget about customer feedback! Ideally, you should constantly seek qualitative and quantitative feedback from your customers in the form of NPS surveys and moderated/unmoderated interviews to improve the program.

### A Note on Self-Selection and Program Incrementality

Unfortunately, the literature on measuring loyalty program effectiveness can be extremely poor, when not misleading. Most resources will point you to metrics such as Customer Lifetime Value (CLTV) and leave it at that. Some will tell you to compare metrics between members and non-members, which is awfully incorrect.

**When it comes to loyalty programs, what you want to measure is their _incrementality,_ i.e., to what extent the loyalty program _actually_ affects your KPIs.** If you do that, you’ll find that the incrementality of any loyalty program is much lower than what you’d see if you just computed the performance delta between members and non-members.

For example, let’s assume you want to measure how much your loyalty program contributes to increasing Average Order Value (AOV). You look at the AOV of customers enrolled in your program and find that it is, on average, $25 higher than for non-members. You might be tempted to conclude that your loyalty program leads to a $25 increase in AOV, but you would be wrong–_very much_ wrong.

Think about it this way: many of your loyalty program’s members would have spent the exact same amount (or perhaps just a little less) with your brand, _even if the loyalty program was not there to begin with._ These customers are _not_ spending more because they’re subscribed to your loyalty program; instead, they have subscribed to your loyalty program _because_ they were spending more in the first place. This statistical mistake is called self-selection bias, and it’s unfortunately very common among inexperienced practitioners.

To properly compute program incrementality, you need to rely on techniques such as difference-in-differences analysis, where you measure a metric before and after customers join your program, and Propensity Score Matching (PSM), where you “cluster” customers by affinity and compare their behavior. Unfortunately, it would take an entire article to unpack these techniques, so we encourage you to do additional research.

## Loyalty Programs Are Powerful, but They Require Attention

As you’ve seen, launching a loyalty program for your brand is not an initiative you can treat as an afterthought. It requires careful planning, spotless execution, and continuous, data-informed iteration to maximize your ROI. Otherwise, you might end up with a loyalty program that’s more expensive than the incremental revenue it generates.

In this article, we’ve only scratched the surface, but there’s so much more: depending on the structure of your program, you’ll need to think about tier pricing or point expiration; interviewing customers is an art in and of itself, as is measuring program incrementality. All of these topics would warrant separate articles.

If you need help launching your program or overhauling your existing one, feel free to reach out! Together, we can create a program that will grow your business while delighting your customers.


The Ultimate Guide to E-Commerce Loyalty Programs

The web is full of e-commerce websites that boast over-the-top designs, top-notch storytelling, and incredible lifestyle imagery. However, some of these stores still fail to effectively acquire new customers, or to give previous customers a reason to come back.

Faced with this conundrum, brand owners often fall into the trap of adding more products, more content, and more apps to their store in hopes of solving the problem. Unfortunately, more often than not, this approach only makes the situation worse, leading to a more bloated, slower store that drives even more customers away.

When your store is not generating the results you’re looking for, it can help to see things from a fresh perspective, and design audits are structured to accomplish precisely that goal.

A design audit is a systematic review of specific areas of your store. The goal is to identify bottlenecks that are artificially driving down KPIs such as conversion rate (CVR), average order value (AOV), or repeat purchase rate (RPR). The audit benchmarks the store's visual design and user experience against industry best practices, considering factors such as customer feedback and satisfaction, accessibility, information architecture, and page speed across different device categories.

At Nebulab, we’ve been running design audits for our clients to help them identify what touchpoints (or absence thereof) create the most friction, what opportunities hold the most growth potential, and where to focus next. In this article, we’ll examine what benefits an audit can deliver to your brand, when it makes sense to run a one, and how the ideal audit is structured.

### The Benefits of E-Commerce Design Audits

A good design audit will not only provide you with a list of usability issues and opportunities for improvement: it will also help you understand why these are the right things to be focusing on.

For example, fashion brands often struggle with their product discovery flow. With an extensive product catalog, it can be challenging to implement proper search and filtering functionality and strike the right balance between what the consumer is looking for and what products the brand wants to prioritize. The business impact is enormous: [according to Baymard,](https://baymard.com/research/ecommerce-product-lists) cart abandonment rates on e-commerce sites with poor product listing pages are in the 67-90% range, dropping to a mere 17-33% when the usability issues are corrected.

By arming brands not just with insights about the status of their customer experience, but also with data about the business relevance of those insights, design audits allow brands to move faster and with more confidence as they work to improve your top line and bottom line.

Here are a few other benefits of e-commerce design audits:

* **Conversion Rate Optimization:** many brands approach CRO through the lens of A/B testing, running experiments for every change they have in mind. While A/B testing has its role, it comes with non-negligible [complexity](https://nebulab.com/blog/ecommerce-ab-testing-mistakes) and is not always warranted. A design audit can highlight the “fundamental” improvements you can make to increase conversions immediately, while also identifying areas where more data is needed to make a decision.
* **Brand Consistency:** early-stage brands need to move fast. As designers work frantically to keep up with the pace of the business, brand consistency often takes a hit. A design audit can provide the opportunity for a “brand reset,” taking stock of the brand’s digital touchpoints and ensuring they’re all working in harmony to provide a coherent image of your brand.
* **Stakeholder Alignment:** while the human element can never be completely removed from decision-making, design audits help harmonize the opinions of different teams and stakeholders by bringing trusted qualitative and quantitative insights into the discussion. In turn, better stakeholder alignment leads to improved team satisfaction and higher productivity.
* **Overhead Reduction:** sometimes, brands create human-driven processes to make up for existing inefficiencies. Design audits can shed light on situations where a better website design choice or a greater amount of automation can help you reduce operational overhead, freeing up your resources to focus on more strategic, higher-leverage projects.
* **Search Engine Optimization:** while design audits are typically not directly aimed at SEO, many design improvements can boost SEO as a secondary benefit. Some examples of this include improvements such as adding breadcrumbs to your navigation and improving website performance on desktop and mobile.

At this point, the advantages of conducting a design audit should be sufficiently clear. But how do you know when to perform one?

### When To Conduct a Design Audit

For brands that iterate on their online store very often, it’s helpful to perform design audits at a fixed cadence, e.g., every six months. With that said, there are a few additional key moments and indicators you want to watch out for:

* **After a major feature release:** it is often a good idea to follow up on large feature releases with a design audit. This can help guarantee brand consistency and ensure that no guidelines have been overlooked while implementing the new functionality. In this case, the audit can be scoped to the portions of your digital experience that have been changed significantly.
* **When you see a drop in KPIs:** if you see a drop in performance and can’t pinpoint the root cause, a design audit might help you clarify the problem. You can look at which metrics were impacted to understand where to focus your investigation or run a site-wide audit if you’re unsure where the friction is. Examples here are an increase in bounce rate, a drop in conversion rate or a decrease in average order value.
* **When you need to drive efficiency:** if you’re looking for ways to increase business efficiency, a design audit can help you uncover cumbersome user journeys that can be streamlined or automated. In this case, you should also evaluate an audit of your back office, as it has the potential to to highlight ways that you can make your team’s lives easier.

If you fit one of these scenarios, a design audit might be in order. More broadly, if you are facing a CX-related issue that could benefit from a fresh pair of eyes, a design audit can provide the clarity you need.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/5e46eafbb3763455a579d32443bc1d9ee2bf24fd-1600x1052.jpg?fit=clip" alt="How we conduct a design audit at Nebulab">
</figure>

## How We Conduct Design Audits

When our design team conducts an audit, the content is typically customized based on factors such as the brand’s stage, target audience, product category, e-commerce business model, and current challenges and priorities, as reported by key stakeholders.

That said, there are certain steps in our audit process that we always follow, and they can serve as a good template if you want to run a design audit in-house.

### 1. Define the Audit Scope

The first step is always to determine which areas of your website the audit should cover. 

For example, if the majority of your traffic comes from mobile, it makes sense to prioritize the mobile experience over desktop. If you’re seeing a drop in AOV, you’ll want to look deeper into your product discovery and cross-selling/upselling flows.

At this stage, we typically examine topline traffic and talk to stakeholders to understand the key issues and opportunities. We want to ensure the audit is as objective as possible while also reflecting the business's real challenges and goals.

### 2. Analyze Customers and Competitors

When conducting an audit, we often find that brands have a treasure trove of data they’re not exploiting fully. Tools like Google Analytics, heatmaps, product reviews, customer support tickets, and loyalty programs can all offer valuable insights into user behavior, help uncover patterns, and identify points of friction in the customer experience.

In addition to looking at the brand’s zero-party and first-party data, we also look at competitors to evaluate them against the brand’s experience. While you don’t want to be the same as everyone else, understanding how your competition stacks up to you can help you prioritize areas for improvement, brainstorm new customer touchpoints, and double down on your competitive advantages.


### 3. Evaluate Your UX and UI

This is where things get interesting! Based on the context we have collected, we evaluate the store's digital design against industry best practices and foundational design principles, blending them with our expertise to pinpoint the areas of highest impact.

This assessment is completed by carrying out specific tasks from the customer’s perspective. It can be a site-wide analysis or it can focus on select areas of your store, such as:

* Homepage
* Main navigation
* Categories
* Website search
* Product Detail Page (PDP)
* Product Listing Page (PLP)
* Filtering and sorting
* Cart and checkout
* Account pages

With each insight, we include references to the guidelines and best practices that informed our analysis, one or more actionable recommendations on how to create a better user experience, and an explanation of the expected business impact.

Sometimes, we also provide sketches and mockups of the design enhancements we suggest so you can better envision the result.


### 4. Prioritize the Results

It is not uncommon for a design audit to run 40-50 pages in length. If left in its raw form, such a vast amount of information can be challenging for brands to ingest and make sense of, leading teams to endless debates about what suggestions to implement and, ultimately, analysis paralysis.

To avoid this problem and aid brands with prioritization, we score the audit’s results according to their **impact** on customer experience, **desirability** to the end user, and **feasibility** for the brand’s design/development team.

This scale, coupled with a scoring mechanism and full executive summary, allows for a more strategic allocation of resources that accounts for the brand’s current goals and their broader business context.


## Design Audits Foster a User-Centric Mindset

Besides their immediate benefits, what we appreciate most about e-commerce website audit is their ability to **foster a customer-centric mindset.**

A good design audit taps into multiple sources of quantitative and qualitative insights and industry best practices, and presents all the data in a digestible and actionable way. In doing so, it helps brand executives elevate the customer experience to perfectly fit into the customer’s daily context, needs, and aspirations. This inevitably leads to happier customers and stronger business outcomes.

If you have any questions about conducting design audits or would like our team to help with your very own audit, [feel free to reach out!](https://nebulab.com/contact-us)

Does Your E-Commerce Store Need a Design Audit?

In the complex world of e-commerce technology, Shopify stands out as a beacon for businesses eager to establish or expand their online presence. Its user-friendly interface, coupled with a vast ecosystem of apps and integrations, has made it the go-to platform for merchants. Still, the convenience offered in the off-the-shelf package is not enough for everyone.

While Shopify's app store provides many easy-to-install solutions that promise quick wins, the reality is that the more complex your business needs, the less likely you'll find an app that fits the requirements. And, as businesses grow and operations become more complex, the limitations of a simple Shopify build become more and more apparent until they bring businesses to a crossroads: either simplify operations to fit into Shopify’s boundaries, or heavily customize Shopify to play by their rules.

The former path might be acceptable and sometimes even advisable for smaller stores. Building complex Shopify customizations requires significant resources and can be a source of [technical debt](https://nebulab.com/blog/shopify-technical-debt); as such, these projects should always be justified by a clear and compelling ROI.

But for brands in the upper midmarket/enterprise segment, building more complex automations and customizations on top of Shopify often makes perfect sense: these companies have complex internal workflows, custom tooling, and nuanced policies, and their e-commerce platform must learn to adapt and play nice with the existing ecosystem.

Luckily, Shopify’s ecosystem comes with rich tooling designed to create custom apps and integrations. In this post, we'll delve into some of these tools. More specifically, we’ll cover Shopify Flow, Zapier, e-commerce iPaaS Solutions, Gadget, and Greenfield Apps, exploring their pros and cons, ideal use cases, and some examples of the customizations they enable.


## Shopify Flow

[Shopify Flow](https://help.shopify.com/manual/shopify-flow) is a tool built into Shopify that allows creating automations without leaving the platform. It's a basic yet powerful way to respond to events generated within your online store (e.g., a new order being placed) with a set of actions (e.g., sending an email to your staff).

**Pros:**

* **Seamless Integration:** It’s designed specifically for Shopify, ensuring a smooth integration with your store. It’s Included in Shopify for free; no need to pay for extra software.
* **User Friendliness:** Shopify Flow comes with a visual workflow builder that requires no coding, making it accessible to non-technical users.
* **Third-Party App Support:** Shopify apps can extend Shopify Flow by adding their own triggers and actions, which expand the possibilities of the tool. This functionality is only available to Shopify Plus merchants.

**Cons:**

* **Complexity Limitations:** While powerful, Shopify Flow does not always cater to highly intricate integration needs that require custom coding.
* **Partial Support for External API Calls:** You can create an action that performs an API request to an external service (if you’re on the Shopify, Advanced, or Plus plan), but you cannot use the data you receive in any way. Shopify has committed to solving this in 2024.
* **Partial Support for External Emails:** At the moment, it's not possible to send emails using Shopify Flow, except for emails to staff members or as part of email marketing automations. You cannot send transactional emails to your customers or anyone else.

**Ideal Use Case:** Shopify Flow is your go-to for automating operational tasks within Shopify's ecosystem, particularly if you're a Shopify Plus user and can use all of the functionality it offers. It's ideal for businesses looking to streamline processes like tagging high-value customers for exclusive offers or automating restock notifications.

**Example Customization:** Automating the tagging of VIP customers based on their spending history and automatically enrolling them in an exclusive loyalty program.

## Zapier

[Zapier](https://zapier.com/) can be a good alternative to Shopify Flow, if you find its limitations unbearable. Via the Zapier app for Shopify, you can connect Zapier to your Shopify store and pick from an extensive list of triggers and actions to build your automation.

**Pros:**

* **Wide Range of Integrations:** Zapier can connect Shopify with over 3,000 web services, facilitating many different kinds of automations.
* **No Coding Required:** Zapier’s interface is similar to Shopify Flow, but offers even more power by allowing you to build more complex, more robust automations.
* **Rapid Deployment:** You can quickly set up new integrations and automations without the time and cost associated with custom software development.

**Cons:**

* **Pricing:** Zapier’s costs can quickly escalate as you increase your usage of the platform and build more complex workflows.
* **Dependent on Third-Party Connectors:** Even though it boasts more integrations than Shopify Flow, Zapier still relies on the availability and limitations of third-party connectors.

**Ideal Use Case:** Zapier is best suited for businesses that find Shopify Flow too limiting, but still need to build automations or integrate Shopify with other platforms quickly and without custom development.

**Example Customization:** Automatically adding new Shopify orders to a Google Sheets spreadsheet for advanced reporting and analysis.


## E-Commerce iPaaS

Integration Platform as a Service (iPaaS) solutions connect your online store with a variety of other systems, such as ERP, POS, and warehouse management systems (WMS), facilitating the automation of business processes across platforms. There are plenty of iPaaS solutions that integrate with Shopify–our favorite are [Patchworks](https://www.wearepatchworks.com/), [VL OMNI](https://vlomni.com/), [High Cohesion](https://highcohesion.com/), and [Pipe17](https://pipe17.com/).

**Pros:**

* **Connector Ecosystem**: Unlike Zapier, which is a generic automation platform, e-commerce iPaaS platforms specialize in connecting e-commerce platforms like Shopify with CRM, ERP, POS, and WMS systems.
* **Data Integrity:** E-commerce iPaaS platforms were designed to ensure data consistency across platforms, reducing synchronization errors and improving operational efficiency.
* **Bespoke Support:** with most iPaaS platforms, you can typically engage their customer support or professional services team to build connectors that are not already available.

**Cons:**

* **Integration Complexity:** Setting up more sophisticated connectors and automations may require technical expertise to configure and manage.
* **Cost:** The investment required to use an iPaaS reflects its enterprise-level capabilities, making it more suitable for larger businesses with complex needs. Most platforms will charge you per connection or event (e.g., a new product being created).

**Ideal Use Case:** E-commerce iPaaS solutions are ideal for medium-to-large businesses that require robust, real-time integrations between Shopify and other enterprise systems.

**Example Customization:** Integrating Shopify with an ERP system to automate order management, inventory management, and financial reporting, streamlining operations and reducing manual errors.

## Gadget

[Gadget](https://gadget.dev/) is a powerful full-stack serverless platform that allows building and hosting custom Shopify Apps, skipping all the repetitive tasks and accelerating the development cycle of your custom app. Through Gadget, you can accomplish all the automations and integrations that are not possible with off-the-shelf apps and integrators.

**Pros:**

* **Rapid Development:** Gadget offers a rapid development environment for Shopify apps, reducing time to market and human error.
* **Scalability:** Gadget is built to handle high volumes of data and traffic, making it suitable for growing businesses.
* **Developer-Friendly:** Gadget provides advanced tools and resources tailored for developers who need to create sophisticated apps, like Shopify API version management and pre-built React frontends that are compatible with Shopify’s security policies.

**Cons:**

* **Learning Curve:** Developing with Gadget requires a significant amount of technical knowledge, making it hard to access for non-developers.
* **Cost:** Custom apps may involve higher initial development costs compared to simpler integration approaches.
* **Single Environment:** As of today, multi-environment applications (staging+production, for example) are not supported. However, Gadget claims the feature will be released soon.

**Ideal Use Case**: Gadget is a powerful choice for tech-savvy teams looking to build a private Shopify app for their brand as quickly as possible.

**Example Customization:** Creating a custom loyalty program that’s not supported by any off-the-shelf loyalty apps for Shopify.


## Greenfield Apps

When none of the tools above is capable of fulfilling our complex business requirements, we are left with one extra solution, probably the most flexible one: building a custom Shopify app completely from scratch. We call these “Greenfield Apps.”

Greenfield Apps can extend the functionality of your Shopify store in whatever way you want, as long as your desired workflow is supported by Shopify’s APIs.

**Pros:**

* **Malleability:** Greenfield apps can be designed to meet your exact business requirements, offering unparalleled flexibility.
* **Direct Integration:** You can use greenfield apps to interact with all of Shopify's APIs, enriching your online store with custom business logic, Storefront and Admin UI components, and complex automation and integration workflows.
* **Technical Scalability:** Greenfield apps can grow with your business, accommodating new features and processes as needed, without financial or technological lock-ins.

**Cons:**

* **Development Cost**: Custom development is typically more expensive and time-consuming than pre-existing solutions.
* **Maintenance Effort:** Greenfield apps require ongoing maintenance and updates to ensure compatibility with Shopify's evolving ecosystem. \

**Ideal Use Case:** When your business requires unique functionality that cannot be addressed with existing apps or tools, greenfield Shopify apps provide a solution tailored specifically to your needs.

**Example Customization:** A bespoke app that provides a UI for a marketplace’s vendors to update product prices and availability, and instantly propagates those updates across multiple warehouses within your Shopify storefront.

## Complexity Is Not Always a Bad Thing

While Shopify's app ecosystem offers a solid foundation for run-of-the-mill retailers, expanding beyond these boundaries unlocks new levels of operational efficiency, customization, and customer satisfaction.

When considering your options for customizing your e-commerce store, remember that the right choice depends on your needs, budget, and technical capabilities. Make sure that you’re factoring in all of these elements before committing to a specific solution.

Building custom features and integrations may seem daunting, and might require resources and expertise that you don’t have in-house. But at the end of the day, this growing complexity is often a testament to your brand’s growth and the need to evolve your customer experience.

If you need help launching a custom feature or integration for your Shopify store, [feel free to reach out!](https://nebulab.com/contact-us) Our engineering team would love to help you figure out the right solution.


Building Custom Shopify Automations, From Beginner to Pro

Have you ever found yourself pondering over a complex problem for hours or days? You explore all possible paths yet end up with more doubts than certainty. Then, a casual conversation with a colleague suddenly illuminates your thoughts. Just articulating your challenge out loud, especially in a trusted circle, opens your mind and allows your ideas to blossom.

Imagine having a format to refer to every time you are stuck on a problem–a structured approach that unblocks the flow of ideas and brings order to chaos. A workshop is precisely that: a repeatable process to create an environment where conversation flows, ideas flourish, and solutions are nailed down.

At Nebulab, we use workshops to help our teams and clients navigate complex business domains, design efficient middleware integrations, and tackle multi-faceted productivity and collaboration challenges. Over the years, the humble workshop has proven, time and again, one of the most effective ways of taming complexity.

In this post, we’ll explore the practices we adopt for running workshops that bring value to both organizers and attendees.

## The Key Ingredients of a Good Workshop

If you’ve watched movies like A Beautiful Mind or the recently released Oppenheimer, you might be familiar with the process mathematicians use to dig into a problem. They gather in front of a whiteboard, and for the most part, they sketch formulas and diagrams rather than relying on verbal communication. They alternate themselves in the writing, pause, take a step back to glimpse what they produced, and question their thoughts with “what if” questions. 

It might not be evident at first glance, but these whiteboard conversations have a lot in common with workshops:

* The participants are exploring a complex domain
* The rules of engagement are well-understood
* The physical environment has the proper setup
* The participants visualize their concepts

All these elements are integral to a successful workshop, all concurring to create a space where ideas can be developed and examined collaboratively.

Let’s take a look at each of them, one at a time.

### Complexity and Collective Intelligence

The heart of a workshop lies in the rich interaction between participants.

This interactive environment is particularly effective when tackling complex problems characterized by uncertainty or requiring diverse expertise. Participants from different areas of the business (e.g., industry experts, e-commerce managers, and tech leaders) bring a range of diverse insights that rarely have a chance to converge.

In a workshop, we leverage the group's collective intelligence, which often leads to superior decision-making, problem-solving, and innovation than an individual could achieve by themselves. This is particularly true in scenarios where the complexity of the subject matter benefits from a multitude of perspectives.

Each aspect of a workshop–from its physical setup to the methods of visualization and facilitation– is designed to harness this collective wisdom to navigate and illuminate complex issues.

### Rules of Engagement

A simple, clearly understood set of rules is essential to facilitate efficient interaction and meaningful conversation in a workshop.

We can’t just put people in a room and expect valuable outcomes to emerge. Every workshop has a format and rules; for mathematicians, the format is mathematical symbolism, and the rule is to alternate in front of the whiteboard until a satisfactory outcome is achieved.

It’s critical to keep things simple: the participants need to be focused on exploring the problem domain, not on remembering or feeling constrained by the rules.

For instance, in a workshop I recently facilitated, we started with two rules: blue sticky notes to indicate a system and yellow sticky notes for activity in a system or data exchanged by two systems. In the second half of the workshop, I introduced a third rule: red sticky notes to highlight the critical/challenging aspects of a system’s behavior. With such a simple set of rules, all participants had an easy time contributing, the workshop ran all day with little effort, and the outcomes were excellent.

Pro tip: progressively revealing the rules is a trick that helps attendees focus on the matter at hand and ensures they aren’t overwhelmed.

### Physical Environment

An often overlooked but crucial aspect of workshops is the room setup.

Adequate space is necessary for participants to move freely, interact with each other, and engage with tools like boards or flipcharts. Think of the mathematician with unobstructed access to their whiteboard–this accessibility is critical.

In my experience, it's beneficial to rearrange the furniture to suit the workshop's needs. Typically, I align chairs along the room's perimeter, creating a central, open area in front of the board or designated workspace. This layout encourages movement, collaboration, and a focus on the current task.

Remember: the ideal setup can vary depending on the nature and size of the workshop. The goal is to create an environment that fosters active participation and easy access to your collaboration tools.

### The Power of Visualization

Relying exclusively on verbal communication often limits us to our existing mental models, creating a clash where new, breakthrough ideas struggle to emerge. This is because it's easier to interpret what we hear within our existing frameworks than to challenge and change them. 

Visualization offers a powerful solution to this limitation.

Going back to our example, mathematical symbols serve as the visualization tool. For a diverse workshop audience, simpler tools are often more effective: these can be post-its, diagrams, or even Lego bricks. Visualizing concepts on a wall is particularly impactful: it not only allows workshop participants to step back and see the 'big picture,' but also ensures that all participants can engage and contribute equally.

This method ties in with our earlier discussion on room setup (an open space in front of a wall facilitates this kind of visualization) and with the idea of a simple ruleset (guiding participants on how to contribute visually is vital).

## The Role of the Facilitator

In our example, a group of mathematicians might naturally fall into a collaborative rhythm without a facilitator. However, in a larger group setting, especially with individuals who have strong perspectives and diverse backgrounds, having a facilitator becomes essential.

A facilitator isn’t required to be a domain expert. Instead, their skills lie in observing group dynamics, actively engaging participants, offering suggestions discreetly, and summarizing discussions. The facilitator must be able to identify and guide the group’s focus to emerging concepts, even when they don’t have an in-depth understanding of the workshop’s subject.

Facilitators are crucial in navigating the complexities of group interactions, which can be unpredictable and challenging.

A note of caution to facilitators: not every workshop goes as planned, hence flexibility is key. Much like a jazz musician improvising in a jam session, a facilitator must read the room and adjust the workshop's flow as needed.

A good facilitator can transform a potentially chaotic discussion into a harmonious and productive session.

## How We Use Workshops at Nebulab

Across various industries, workshops are versatile tools that can be tailored to various needs. From Retrospectives and User Story Mapping in Agile teams to Event Storming for Domain-Driven Design architectures, their applications are manifold.

As an e-commerce agency, we find workshops particularly effective in two main areas. Hopefully, you can use these examples as inspiration for your own workshops.

### E-Commerce Middleware Design

Firstly, as detailed in [my previous blog post,](https://nebulab.com/blog/ecommerce-middleware) we use workshops to explore connections and dependencies between systems when architecting middleware software.

This workshop format is inspired by [Event Storming](https://www.eventstorming.com/), and it’s best described as a form of generative business process mapping: treating the wall as a timeline, we use sticky notes to represent the systems we are discussing (e.g., the e-commerce platform or the ERP software), the activities performed by the user or system, and events those activities generate.

Aligning the sticky notes on a timeline gives us a general overview of the business process and the system’s relationships. It also allows us to rearrange the responsibilities and dependencies between systems and the middleware.

On the brand side, we typically invite any stakeholders with an active role in the systems we’re analyzing. On the Nebulab side, we have a workshop facilitator, one or more strategists to provide insights into the business domain, and technologists to provide insights into the system’s architecture.

### E-Commerce Domain Mapping

Workshops are also invaluable when implementing complex business rules or requirements deeply rooted in a brand's unique domain.

In this case, we start by representing the different types of actors involved in the domain, then the names of the business rules, and then the logic behind each rule. Finally, we arrange everything as a tree. Focusing on the users and visually representing the conditions and constraints applied to the system helps us untangle complex business domains and spot corner cases that were not previously covered.

The value of these workshops lies in their ability to bring together people with diverse expertise–from those with deep business or process knowledge to technology experts who may not be as familiar with the brand's specific domain. This diversity is crucial for surfacing and clarifying assumptions, removing ambiguity, and fostering mutual understanding.

An additional benefit is the reorientation towards the “bigger picture.” It's common for individuals immersed in day-to-day tasks to lose sight of the organization’s broader objectives. These workshops serve as a vital tool to realign everyone’s focus on the overarching goals, ensuring a cohesive and comprehensive approach to problem-solving.

## Don’t Be Afraid To Experiment!

If you are tackling a gnarly issue or trying to untangle a business problem, a workshop might be the answer you’re looking for. While they seem intimidating at first, the benefits of an effective workshop far outweigh the complexities–just follow the rules we’ve outlined, and you’ll be halfway through!

Of course, if you’re an e-commerce brand and would like some help from experienced facilitators who can challenge your assumptions and contribute with their own insights, [feel free to reach out!](https://nebulab.com/contact-us) We’re always down for a good workshop.


Using Workshops to Navigate Complexity and Build Alignment

Have you ever struggled with a simple addition to your Shopify store turning into a nightmarish project, full of intricacies and edge cases? Or maybe you’ve experienced the impatience of looking at your product page take forever to load, longing for the good old days when it showed up instantaneously? Or perhaps you’ve run into weird UI bugs caused by two of your apps not playing nice with each other?

When you launch a new Shopify store, everything’s fantastic: the theme is beautiful, the pages load fast, and the apps you’ve picked are a joy to work with. It feels like you’ve got everything figured out, and no one and nothing will ever change that.

But after a while, some friction shows up. Implementing new features takes longer. Bugs pop up. Site speed decreases, as does your conversion rate.

Your team (or your agency) now spends more time hunting down the things that are not working than implementing new functionality that could move the needle. But even though everyone’s dissatisfied with the state of things and your business is suffering, no one can pinpoint the root cause or figure out a definitive solution.

Starting from scratch looks like the only option, so that’s what you do. You change agencies, rewrite your theme, and call it a day. Unfortunately, the rewrite only helps temporarily: give them enough time, and things will revert to their original state, and the cycle will start all over again.

Sounds scary, doesn’t it? And yet it’s a story that we’ve heard from many Shopify merchants, disenchanted with their agency, internal team, or the Shopify ecosystem as a whole.

The good news is that it doesn’t have to be like this. There’s a way to keep your ecommerce store from degrading over time; all it requires is a more thoughtful approach to store development. In this blog post, we’ll outline what that approach looks like, and how you can adopt it.

But before we do that, we need to introduce the concept of technical debt.

## What Is Technical Debt?

Technical debt, often called just “tech debt,” refers to the compromises made in a system for short-term gains, which may lead to more complex maintenance and updates in the long run. It is the practice of taking shortcuts: installing unvetted apps for the sake of shipping a feature, implementing untested JavaScript “hacks” in your theme, breaking best practices for theme maintenance, or failing to keep up with the latest Shopify API updates.

These solutions help you move faster and will not kill your store in the short term, which makes them so appealing in the first place. But in the long term, the consequences will show up in the form of bugs, lower site speed, a slowdown in development velocity, and, in extreme scenarios, a decrease in conversion rate.

Unfortunately, Shopify’s marketing can be misleading when it comes to technical debt: the promise is that, by using Shopify, merchants will never need to worry about technology, and by extension, they will never need to worry about technical debt.

That is only partially true: while Shopify handles a lot of responsibilities for merchants, a merchant’s theme and app stack is still for the merchant to maintain, and it can accumulate technical debt just like any other software. Your theme can either be a beautifully architected piece of technology, highly performant and easy to evolve, or a hot mess of obscure hacks and patches no one understands anymore. You, the merchant, are ultimately responsible for deciding where you want this pendulum to swing.

But in practice, what are the sources of technical debt in Shopify that cause stores to lean one way or the other? Here’s a non-exhaustive list, but keep in mind that there are additional factors that are often unique to each store:

* **Multiple stores:** even after the advent of Markets and B2B in Shopify, many merchants keep using multi-store setups when they are not needed. Because each store is independent and stores can diverge from each other, this setup can be a significant source of technical debt, increasing the cost and complexity of making changes.
* **Too many apps:** Shopify’s blessing–its app ecosystem–is often its curse. When we audit Shopify stores, we are often shocked by how many apps the average store has installed. Often, not even the merchant can explain what all the apps do. This is the #1 source of bugs, compatibility issues, and a steep increase in license fees.
* **Too much JavaScript:** some custom themes present a large amount of JavaScript code, often using external libraries such as React, Angular, or jQuery. This complexity, which is sometimes uncalled for, makes it harder for developers to find their way around a theme, slows down your website, and introduces bugs.
* **Large Liquid files**: similar to the point above, Liquid files that are hundreds of lines of code quickly become hard for developers to understand and change, to the point where they might be deemed completely unmaintainable.
* **Outdated code:** if your store is not leveraging metaobjects or not using the full potential of Online Store 2.0, you might end up with weird hacks and workarounds to implement functionality that is now natively available in Shopify. Apps can compound this problem because they are sometimes slow to adopt new Shopify APIs and capabilities, reducing the flexibility and optionality of their user base.

There are additional factors that are not technical debt _per se_ but often lead to technical debt over time: examples of these would be the lack of a defined QA process for theme changes, which increases the likelihood of bugs, or the lack of theme documentation, which makes it harder for unfamiliar developers to find their way around the project.

## A Three-Step Approach to Managing Shopify Technical Debt

Managing technical debt in a Shopify store can be tricky for inexperienced merchants and developers. However, a structured approach can go a long way in effectively controlling it. Here’s the three-step process we typically adopt when we work with a merchant.

### 1. Measure the Business Impact

Before tackling technical debt, it's essential to understand the extent of the problem.

In traditional software projects, there are tools that attempt to measure the health of your code. These tools typically ingest your entire codebase and produce a “quality” score that tells you the overall state of the software and what areas you should improve.

The bad news is that most of these tools don’t work with Shopify themes because they’re structured differently than most other software. The good news is that, in our experience, such tools are ineffective: technical debt only matters insofar as it _actually_ impacts your business. Code quality, as measured by a machine, is rarely a good proxy for business impact.

Instead, you want to measure the effects of technical debt on your store’s real-world performance. There’s no one-size-fits-all metric here, but here are some that we’ve used:

* **Defect rate,** which measures the number of features your team has shipped that introduced one or more bugs in the customer experience.
* **Cycle time,** which measures the time it takes for your team to implement a change after that change has been prioritized.
* **Site speed,** which should be pretty self-explanatory.

Both defect rate and cycle time can be measured with a good project management tool, while site speed is typically measured with tools such as PageSpeed Insights.

With all these metrics, what matters most is not their absolute value but their directional trend over time: if they’re getting better and not worse, you’re moving in the right direction and can double down on your current approach.

### 2. Establish a Solid Foundation

Once you have a good grasp of the extent of the problem, the next step is to ensure there are no obvious sources of technical debt in your Shopify setup.

These are the aspects we typically focus on:

* **Leverage native Shopify features**: by using native functionality as much as possible, you are reducing the need for ongoing maintenance. Whenever you diverge from the built-in functionality, you should always consider the balance between innovation and the additional complexity you’re introducing into your store.
* **Minimize third-party apps**: in addition to increasing your license fees, each app you install into your store introduces more complexity, potentially slows the website, and can lead to bugs in the customer experience. Vet all the apps you install and ensure they are needed.
* **Adopt a version control system (VCS):** a VCS makes it much easier to document the changes developers are making to your theme, and to roll back to a previous version of the theme in case a bug pops up. From a technical standpoint, there’s no reason not to have a VCS in place for your Shopify theme.
* **Set up a test store:** a staging environment (sometimes called a “test store”) allows you and your ecommerce development team to test your changes safely before rolling them out to your customers. The caveat is that you will likely need to install all your apps in the staging environment, increasing your license fees.

While this is just the beginning, it will give your team an initial foundation they can build upon.

### 3. Prevent and Reduce Debt Over Time

With the basics in place, you can now adopt team-wide policies to help your team minimize the technical debt you introduce over time.

These are some of the policies that we adopt:

* **Call technical debt by its name:** if you only do one thing outlined in this article, it should be this. The #1 reason technical debt keeps growing is that developers do not have the technical understanding or psychological safety to talk about it. Ensure everyone is familiar with technical debt and comfortable calling out when a corner has been cut. A recurring team retrospective can be very helpful here.
* **Perform technical code reviews:** encourage developers to review each other’s code whenever a change is introduced. This means that developers will need to schedule time for code reviews, and your development velocity will slow down a bit, but the quality of the end product will benefit tremendously.
* **Establish a structured QA process**: ideally, QA should be done on every new change by your development team, who should be familiar enough with your store to understand whether a feature meets all the acceptance criteria. If that’s not possible, you can also designate the person in charge of website development.
* **Set time aside for tackling technical debt:** in the past, Shopify shared their internal strategy for dealing with technical debt, the [25 Percent Rule](https://shopify.engineering/technical-debt-25-percent-rule). It might not work for everyone, but having a clear understanding of how much time is acceptable to dedicate to refactoring technical debt will create a safe space for developers to work on it.

Some of these policies might be overkill for small stores, while others must be adapted to your needs. Ultimately, it all boils down to how much technical debt impacts your store and how many resources you can dedicate to fighting it.

## Technical Debt Is a Tool: Learn to Use It!

With this entire article focusing on eliminating and preventing technical debt in your Shopify store, you might be tempted to think that technical debt is something to be avoided at all costs. The reality is a bit more nuanced.

Like financial debt, technical debt is a tool: cutting corners helps you move faster at critical times of your business, such as before a big launch or public holiday.

And _just like_ financial debt, technical debt must also be paid off at some point. If you ignore it, its adverse effects will compound over time, severely impacting team morale and dragging down business performance.

Leveraging technical debt thoughtfully and intentionally is critical to a merchant’s success in the Shopify ecosystem. Doing it well requires a collaborative effort, with clear team agreements and robust processes tailored to your growth stage and team composition.

If you’re struggling with managing technical debt in your Shopify store, [reach out!](https://nebulab.com/contact-us) As a Shopify partner, have worked with some of the largest brands in the ecosystem and can help find the best solution for your store.


The Nebulab