Alessandro Desantis

The battle for e-commerce growth has never been more challenging. As brands navigate an increasingly complex digital landscape, they're caught in a perfect storm of rising costs and shifting consumer behaviors that's fundamentally reshaping the economics of e-commerce.

The data paints a clear picture: [marketplaces](https://www.modernretail.co/technology/modern-retail-research-as-dtc-dominates-marketplaces-edge-out-retailer-channels-for-brand-investment/) now command 67% of global e-commerce sales volume, while DTC engagement continues to decline. [Recent data shows](https://www.retaildive.com/press-release/20241015-73-of-consumers-are-moving-their-shopping-more-online-in-2024-1worldsync/) only 15% of consumers reported browsing DTC sites more frequently in 2024, with 21% actually reducing their usage. This isn't a temporary trend—it reflects a fundamental shift in how consumers approach online shopping.

Two critical factors are driving this transformation. First, customer acquisition costs have risen dramatically, driven by increased competition and evolving privacy regulations. Second, consumer spending patterns have fundamentally changed—[data shows](https://www.mckinsey.com/industries/consumer-packaged-goods/our-insights/the-state-of-the-us-consumer) 76% of consumers actively traded down across categories in Q3 2024, with this behavior even more pronounced among younger generations, where 86% of Gen Z and millennials report making such adjustments.

The economic context makes this particularly challenging. [Research indicates](https://www.mckinsey.com/industries/consumer-packaged-goods/our-insights/the-value-now-consumer-making-sense-of-us-consumer-sentiment-and-spending) 53% of consumers remain pessimistic about the economy, creating a "value now" mindset where every purchase must thoroughly justify its cost. Looking ahead, [projections suggest](https://www2.deloitte.com/us/en/insights/economy/consumer-pulse/state-of-the-us-consumer.html) 61% of consumers plan to maintain or reduce their overall spending levels in 2025.

## Navigating the New DTC Economics

This environment has created a strategic dilemma for DTC brands.

The traditional growth playbook—centered around aggressive customer acquisition and premium pricing—is becoming increasingly unsustainable. While many brands are responding by shifting focus to marketplaces for easier scale and broader reach, this approach creates its own challenges: marketplaces inherently promote price-based competition, creating a race to the bottom that erodes brand value and profit margins. This is a trend we also explored in our recent article, [Redefining the Digital Value Chain for Multi-Brand Retail](https://nebulab.com/blog/multi-brand-retail-strategy).

However, our experience working with mid-market and enterprise brands suggests there's an underutilized lever that could help companies break free from this conundrum: customer experience (CX). When leveraged correctly, we've observed that customer experience can be transformed into a powerful engine for sustainable growth.

In this series of articles, we'll explore how brands can elevate customer experience from a basic operational requirement to a strategic differentiator that drives both top-line growth and bottom-line profitability.

## Promoting Customer Experience from Cost Center to Value Driver

For too long, brands have viewed customer experience primarily as a cost center–a necessary investment to meet basic competitive standards. This perspective, while common, overlooks the tremendous potential of CX as a strategic growth driver. The evidence for this missed opportunity is compelling, both in terms of rising consumer expectations and documented business impact.

Today's consumers have radically higher expectations for their digital shopping experiences. [Studies show](https://lucidworks.com/post/50-customer-experience-trends-2025/) 80% of customers now consider the digital experience to be just as important as the product itself, marking a fundamental shift in how value is perceived in e-commerce. These expectations manifest across multiple dimensions:

- **Personalization has become non-negotiable**: [Research indicates](https://www.salesfire.co.uk/articles/ecommerce-customer-experience/) 60% of consumers become repeat buyers when offered tailored experiences, while 42% express frustration with generic content. Despite this clear preference, [only 14%](https://www.bloomreach.com/en/blog/ecommerce-customer-experience) of consumers report fully personalized online experiences, highlighting a significant opportunity gap.
- **The cost of poor experiences has skyrocketed**: [Analysis reveals](https://www.bloomreach.com/en/blog/ecommerce-customer-experience) 80% of shoppers abandon purchases due to poor navigation, slow load times, or unclear product information. Even more concerning, [41% of customers](https://www.agilitypr.com/pr-news/public-relations/the-state-of-consumer-attitudes-on-ecommerce-fraud-and-cx-in-2023/) permanently abandon brands after a single false decline.
- **Speed and convenience set new benchmarks**: [Data shows](https://www.sekologistics.com/en/resource-hub/knowledge-hub/the-evolution-of-customer-expectations-in-ecommerce-and-how-to-meet-them/) 65% of consumers abandon their carts if delivery takes more than a week, demonstrating how operational excellence has become inextricably linked with customer experience.

The democratization of e-commerce technology, led by platforms like Shopify, has created an interesting paradox. While these platforms have made it easier for brands to deliver competent customer experiences, they've also led to a form of complacency. Many brands settle for the default experience provided by their platform, viewing it as "good enough" rather than a potential source of competitive advantage.

This is quite unfortunate, because recent research from McKinsey provides compelling evidence that savvy brands can transform customer experience from a cost center into a powerful growth engine. The numbers are striking:

- [Research shows](https://www.mckinsey.com/capabilities/growth-marketing-and-sales/our-insights/experience-led-growth-a-new-way-to-create-value) compensating for one lost customer requires acquiring three new customers, highlighting the multiplicative effect of customer experience on acquisition costs.
- Companies that excel at customer experience achieved more than double the revenue growth of "CX laggards" between 2016-2021.
- [Data indicates](https://www.mckinsey.com/capabilities/growth-marketing-and-sales/our-insights/experience-led-growth-a-new-way-to-create-value) companies that get growth right deliver 30% higher total return to shareholders and nearly double the shareholder value compared to industry peers.

Hopefully, the business case for treating customer experience as a value driver is clear and compelling. Yet many brands struggle to translate this opportunity into actionable strategies that deliver measurable results.

## Deploying CX Strategically through Experience-Led Commerce

Based on our work with mid-market and enterprise brands at Nebulab, and inspired by McKinsey's research on Experience-Led Growth (XLG), we've been experimenting with an innovative approach we call "Experience-Led Commerce" (XLC). This framework treats customer experience not as a standalone function but as a systematic process for driving growth and profitability.

XLC differs from traditional growth strategies in several key ways:

1. It amplifies traditional marketing-led growth strategies, helping brands maximize their marketing ROI by increasing customer lifetime value and reducing acquisition costs.
2. It decouples value creation from product and pricing alone, providing a path to differentiation that allows brands to create incremental profit.
3. It creates a virtuous cycle where improved experiences lead to higher customer retention, which in turn fosters organic customer acquisition and reduces the pressure created by acquisition.

McKinsey's research on companies that successfully implement experience-led approaches demonstrates the potential impact of this strategy. [Their findings](https://www.mckinsey.com/capabilities/growth-marketing-and-sales/our-insights/experience-led-growth-a-new-way-to-create-value) show that such companies can achieve remarkable results:

- 15-25% increase in cross-sell rates
- 5-10% boost in customer wallet share
- 20-30% improvement in satisfaction and engagement

For those willing to make the investment, the rewards can be transformative: all else being equal, brands with superior CX outperform their peers across all key performance indicators, creating a compelling case for treating customer experience not as a cost to be minimized but as a strategic business investment.

## Going From Idea to Action

While the case for investing in customer experience is clear, many brands find themselves overwhelmed by the sheer number of opportunities for improvement. From personalization to omnichannel integration, from self-service capabilities to loyalty programs, the possibilities can seem endless. Without a systematic approach to evaluating and prioritizing these opportunities, brands risk pursuing initiatives that deliver suboptimal returns or dilute their core value proposition.

Experience-Led Commerce solves precisely that problem: it helps brands cut through this complexity by providing a structured framework for identifying, evaluating, and executing customer experience initiatives that drive measurable business results.

In our next article, we'll take a deep dive into the XLC framework, exploring its key components and showing you how to put it into practice in your organization.

Turning Customer Experience Into Your Next E-Commerce Growth Engine

Alberto Vena

Last week, Shopify released their [Winter '25 Edition](https://www.shopify.com/editions/winter2025), aptly named “The Boring Edition.” Despite containing over 150 updates, the Winter '25 Edition contains very few new features, but rather a broad sweep of improvements touching everything from checkout to developer tools.

And honestly, we couldn't be happier about it.

While Shopify’s pace of innovation has delivered powerful new capabilities like Markets, Customer Accounts, and POS over the past few years, it has also created complexity within their ecosystem. Each new feature brings its own set of integration challenges and edge cases.

For merchants operating at scale, these seemingly minor compatibility issues can cascade into significant operational hurdles. Even when individual challenges have workarounds, the cumulative effect of managing multiple partial solutions creates friction in day-to-day operations.

By following up the Summer '24 Edition (“Unified”) with one that’s even more focused on stability, Shopify demonstrates a clear commitment to addressing these foundational challenges. This approach is particularly crucial as they continue expanding their enterprise presence, where system reliability and seamless integration are non-negotiable requirements.

Let’s explore how these improvements work together to create a more robust platform for enterprise commerce.

## Product Management and Discovery: Enhanced Control and Visibility

At the heart of any e-commerce operation is the product catalog, and this release brings several improvements to how merchants can manage and present different types of products.

Key updates include:

* Combined Listings now allows merchants to [choose if parent or child products should appear in search and product recommendations](https://www.shopify.com/editions/winter2025#configure-combined-listings-for-search), providing better control over catalog presentation.
* Bundles have been significantly improved with [new analytics](https://www.shopify.com/editions/winter2025#reporting-for-bundles), [more consistent presentation](https://www.shopify.com/editions/winter2025#a-clearer-view-of-bundles) across admin and customer touchpoints, and [accurate inventory status](https://www.shopify.com/editions/winter2025#accurate-bundle-inventory) when using fulfillable inventory.
* Subscription management has also been enhanced with [oversell protection](https://www.shopify.com/editions/winter2025#oversell-protection-for-subscription-renewals), ensuring renewals respect inventory settings and preventing out-of-stock issues.

All of these improvements aim at consolidating and improving interoperability between different features of the platform, making life easier for larger and more sophisticated merchants. We have run across several of these limitations in our own work in the past, so we’re glad to see them being addressed head-on.

## Checkout and Payments: More Flexibility and Customization

Building on the enhanced product management capabilities, Shopify has also made significant strides in making the checkout process more flexible and customizable.

Notable updates include:

* [Split shipping](https://www.shopify.com/editions/winter2025#split-shipping-now-available) is now available to all merchants, allowing customers to choose different shipping methods for different parts of their order when items will be fulfilled separately. This is critical for marketplaces, where the same order may be fulfilled by multiple vendors.
* [Checkout Blocks is now available on the thank you and order status page](https://www.shopify.com/editions/winter2025), and [chat apps can now hook into the checkout flow.] This unlocks completely new capabilities and customer touchpoints, and we can't wait to take the new customization APIs for a spin!

Checkout is an area where Shopify has historically been very restrictive. However, they have been opening up more and more customization APIs over the last couple of years, allowing merchants to build their own customizations without relying on ugly workarounds. We expect this trend to continue, enabling new use cases and further reducing the effort of checkout customizations for Shopify merchants across the board.

## Global Commerce and Compliance: Expanded International Capabilities

As merchants continue to expand globally, Shopify has introduced several features that make international selling more manageable and compliant.

This release brings significant improvements for merchants operating internationally:

* Semantic Search [is now available in more languages](https://www.shopify.com/editions/winter2025#natural-search-in-more-languages), allowing customers worldwide to search using natural, everyday language. While Shopify's native solution cannot compete with more robust paid offerings, it's an excellent starting point for brands looking to elevate their search experience—and now, it's available to even more merchants!
* Shopify Tax [has expanded to the EU and UK](https://www.shopify.com/editions/winter2025#shopify-tax-in-the-eu-uk), offering automated VAT compliance including automated calculation and [VAT invoice generation.](https://www.shopify.com/editions/winter2025#vat-invoices-with-shopify-tax) 
* [Customer account extensions](https://www.shopify.com/editions/winter2025#customer-account-extensions) have finally entered general availability, allowing merchants to customize the New Customer Accounts UI with proprietary and third-party apps. We’ve been using these in beta for a while now (e.g., see Nick's [excellent blog post on POS extensions](https://nebulab.com/blog/building-shopify-pos-extensions)), so we’re pretty excited about this!

On the compliance front, we would have loved to see a hint at more robust compliance primitives for international merchants and regulated industries (e.g., alcohol). However, this doesn't seem to be an area that Shopify is interested in exploring at the moment, which means these merchants will still need to rely on custom-built or third-party solutions.

## Order Management: Better Control Over Complex Fulfillment

The enhancements to global commerce capabilities are matched by improvements to order management, particularly for complex fulfillment scenarios.

Significant improvements include:

* The ability to [use custom metafields to inform order routing rules](https://www.shopify.com/editions/winter2025#metafields-for-order-routing), allowing merchants to create more sophisticated fulfillment logic based on their specific business needs.
* Several improvements to Shopify Flow, the platform's built-in automation platform. Flow now [supports all Admin API actions](https://www.shopify.com/editions/winter2025#automate-more-tasks-in-flow), [can be triggered by metaobjects](https://www.shopify.com/editions/winter2025#metaobject-triggers-in-flow), and [can automate returns](https://www.shopify.com/editions/winter2025#return-automation-in-flow).
* Product catalogs [can be synced via custom IDs](https://www.shopify.com/editions/winter2025#sync-catalogs-with-custom-ids), which makes it easier for brands to integrate with in-house or third-party ERPs/PIMs. Shopify has also introduced a new [Upsert API](https://changelog.shopify.com/posts/better-data-syncing-with-custom-ids-and-upserts) to reduce the number of API calls needed for data sync.

Granted—these are all quality-of-life improvements, especially since most of this logic was already achievable via other approaches. Still, they will help a lot of brands and agencies to simplify their customizations, allowing them to redirect their efforts to initiatives that actually move the needle!

## Organizations and RBAC for More Robust Multi-Store Setups

As operations scale and become more complex, team management becomes increasingly critical. Shopify has responded with several improvements to their billing, authentication and authorization systems.

Key changes in this area include:

* The ability to [group all your stores into a single organization](https://www.shopify.com/editions/winter2025#organizations-for-all-plans) with consolidated billing and user management, a feature previously reserved for Plus merchants.
* A new [role-based access control system](https://www.shopify.com/editions/winter2025#staff-access-by-role) that lets you define granular permissions and assign multiple roles to staff members. This was announced in the Summer '24 Edition and is now entering general availability.
* Improved support for [custom authentication flows in the admin](https://www.shopify.com/editions/winter2025#standardized-reauthentication), allowing organizations to roll their own authentication provider rather than leveraging Shopify.

These organizational improvements reflect Shopify's growing focus on enterprise-level merchants who manage multiple stores and complex team structures. By democratizing features previously limited to Plus merchants and providing more granular control over permissions, Shopify is building a foundation that can better support sophisticated organizational hierarchies and security requirements. This is particularly valuable for brands operating across multiple markets or running several distinct storefronts.

## Developer Tools to Support More Complex Implementations

When it comes to developer tooling, Shopify has been hard at work to make custom storefronts and custom apps more powerful and more customizable.

Significant changes include:

* A lot of limits being raised: function executions now [support carts with up to 200 line items](https://www.shopify.com/editions/winter2025#dynamic-scaling-for-execution-limits) (useful for B2B) and [payloads of up to 128 KB](https://www.shopify.com/editions/winter2025#increased-function-input-limit). Plus, brands can now have [up to 25 app-based automatic discounts](https://www.shopify.com/editions/winter2025#functions-work-with-25-automatic-discounts).
* A number of improvements to Hydrogen, including [support for gift cards](https://www.shopify.com/editions/winter2025#hydrogen-supports-gift-cards), a [Sitemaps API](https://www.shopify.com/editions/winter2025#sitemaps-api-for-hydrogen), and a [richer GraphQL API](https://www.shopify.com/editions/winter2025#more-content-in-graphql-apis) with support for menus, pages, articles, and blogs.
* [Self-serve return endpoints](https://www.shopify.com/editions/winter2025#self-serve-return-api) as part of the Customer Accounts API, allowing brands and apps to easily build self-serve return experiences.

These developer-focused enhancements demonstrate Shopify's commitment to supporting more sophisticated implementations while reducing technical limitations that previously constrained larger operations. The increased limits and expanded APIs give developers more flexibility to build complex, custom solutions that enterprise merchants often require, making the platform increasingly viable for technically demanding enterprise implementations.

## B Is For Boring, B Is For Better

For enterprise and upper mid-market merchants, all of these improvements mean fewer workarounds, better operational efficiency, and a more reliable platform for complex implementations. This release shows that Shopify understands the needs of larger merchants and is willing to do the “boring” work necessary to support them effectively across all aspects of the platform.

As always, we recommend reviewing the full [Editions changelog](https://www.shopify.com/editions/winter2025) to understand all the changes that might impact your business.

If you need help implementing any of these new features or would like to discuss how they could benefit your operation, don’t hesitate to [reach out](https://nebulab.com/contact-us) to our team for a consultation!

Shopify Winter ’25 Edition: Not So Boring After All

Nick Belzer

In our work with e-commerce brands, we frequently encounter a common challenge: how do you build trust in systems that operate invisibly? While custom algorithms and automation solutions may be working flawlessly behind the scenes, both business teams and customer service representatives often struggle to confidently explain these processes to stakeholders and customers.

This scenario plays out repeatedly across e-commerce operations. While custom solutions deliver tremendous value, their invisible nature creates four critical challenges:

* Reduced trust in automated systems
* Limited opportunities for cross-team collaboration
* Increased support resolution times
* More difficult iterative improvements

The good news? We've developed several approaches to solve these visibility challenges, each suited to different business needs and constraints.

Let's explore each approach, starting with the quickest to implement and moving toward more comprehensive solutions. We'll share real implementation experiences and help you understand which solution might work best for your specific situation.

## 1. Tags

The simplest place to start is with Shopify's built-in tagging system. These lightweight markers can provide immediate visibility into system states and trigger automated processes. The beauty of tags lies in their simplicity – they're provided out of the box on Shopify and integrate seamlessly with existing workflows.

At Tannico, one of Italy's leading wine retailers, we use tags to control their product synchronization with their enterprise resource planning system. When products need to be synced, the operations team can simply add a specific tag, and our middleware picks up these tagged products for processing. This gives the team direct control over the sync process without needing to understand the underlying technical complexities.

## 2. Metafields

As your needs grow more sophisticated, metafields offer structured data storage capabilities that go beyond simple flags.

Again looking at our work with Tannico, we use metafields to store and control parameters for their third-party pricing engine. This allows the team to fine-tune pricing rules and see their effects directly within Shopify, making complex pricing management feel like a native part of their workflow.

While metafields require more planning and development effort than tags, they provide much richer data visibility without adding significant complexity to operations. They're particularly valuable when you need to store detailed configuration data or track complex states that can't be captured with simple tags.

## 3. Admin UI Extensions

When simple flags and data storage aren't enough, Admin UI Extensions offer a more sophisticated approach. These extensions allow you to create custom interfaces directly within the Shopify Admin, making complex operations more intuitive and accessible to your team.

[Our work with Cometeer](https://nebulab.com/case-studies/cometeer) serves as a perfect example of this approach. Their algorithm was making sophisticated decisions about which coffees to include in each box, considering factors like customer preferences, previous orders, and inventory availability. However, without visibility into this process, it was difficult for teams to understand and trust these selections.

![](https://cdn.sanity.io/images/kqgmf0g2/production/a6b7f0a08d0748f778e20893e2dbb0a5373d226f-1386x1050.png?fit=clip)

We transformed this "black box" system into a transparent one through a comprehensive Admin UI extension that visualizes the entire decision-making process. The results were remarkable: customer service representatives could now explain algorithm selection decisions, the time required for algorithm adjustments dropped as developers could now see exactly how their changes affected the selection process and, perhaps most importantly, non-technical team members began contributing valuable suggestions for improvements.

While this approach requires more initial investment in development time and resources than tags or metafields, it offers the most flexibility for complex interactions and rich data presentation.

## 4. Third-Party Platforms

As systems grow more complex, teams often need more sophisticated ways to interact with custom logic. While the previous solutions work well within Shopify's Admin interface, sometimes the best approach is to meet your teams where they already work by integrating with their daily platforms.

Many customer service and operations platforms like Zendesk and [Kustomer](https://developer.kustomer.com/kustomer-apps-platform/docs/widgets) provide robust API integration capabilities. This means you can surface key data from your custom Shopify solutions directly within these platforms and, more importantly, enable actions to be taken from there.

![](https://cdn.sanity.io/images/kqgmf0g2/production/15f920216eff929c332ecf67a9c340c42f28cd27-956x1168.png?fit=clip)

At [MeUndies](https://nebulab.com/case-studies/meundies), we integrated their custom subscription logic directly with their customer service platform. This meant that when handling customer inquiries, support teams could see relevant subscription data (like upcoming shipment dates and product preferences) and perform actions like skipping deliveries or updating preferences—all without leaving their familiar support interface. The integration eliminated constant switching between tools and made customer interactions more efficient.

The complexity of this approach varies based on the platform you're integrating with. Data exposure typically involves formatting and forwarding information through authenticated API requests. Enabling actions requires more setup as you'll need to create secure endpoints in your middleware to handle authenticated requests from the third-party platform. While this requires careful planning and ongoing maintenance, it can significantly streamline workflows for teams that spend most of their day in these platforms.

## 5. Custom Frontends

While the previous approaches cover most use cases we encounter, there are times when you need complete control over the user experience. In these situations, creating a custom frontend offers the ultimate in flexibility. Shopify provides robust support for embedding custom applications directly into the Admin Panel through their embedded app framework, with dedicated libraries for both Remix and Rails to handle the complexities of setup and authentication.

This approach gives you complete control over the user interface and functionality, allowing you to create exactly the experience your team needs. While we haven't found this level of customization necessary for most clients at Nebulab – the other solutions typically provide sufficient flexibility – it's worth considering for unique use cases that require specialized interfaces or workflows.

![](https://cdn.sanity.io/images/kqgmf0g2/production/53bfe0a056a980d2d3bc89539ca562d0f4993be7-2880x1620.png?fit=clip)

Development platforms like [Retool](https://retool.com), [Replit](https://replit.com) and [Gadget](https://nebulab.com/blog/building-shopify-apps-with-gadget) can significantly accelerate this process. Retool's drag-and-drop interface builder and pre-built components can reduce frontend development time by 50-70%, while Replit's collaborative development environment streamlines the iteration process. These platforms handle much of the foundational setup work, letting your team focus on building the unique features your business needs.

The trade-off here is still higher development effort and maintenance complexity compared to other solutions we've discussed, even with these acceleration tools. However, for organizations with highly specific needs or unique operational requirements, the investment can pay off through perfectly tailored workflows and improved team efficiency.

## Choosing Your Path

The best visibility solution for your organization depends on your specific needs and constraints. Here's a quick decision guide:

* **Tags**: Best for simple status tracking and quick wins with minimal investment
* **Metafields**: Ideal for structured data storage and analysis platform integration
* **Admin UI Extensions**: Perfect for complex interactions and rich visualizations
* **Third-Party Integration**: Choose when teams primarily work in other platforms
* **Custom Frontends**: Best for highly specialized needs requiring complete control

**Our experience has taught us that successful implementations start small and scale up based on actual usage patterns.** Begin by identifying which processes are currently invisible and causing pain points for your teams. Then start with simple solutions that address these immediate needs, gather feedback from users, and iterate based on real-world usage. Document everything thoroughly and train your teams effectively – visibility tools are only valuable if people know how to use them.

**You'll know your implementation is successful when you see**:

* Customer service resolution times decreasing
* Internal teams expressing greater confidence in automated systems
* Cross-team collaboration increasing
* System maintenance time and error rates improving

**These metrics consistently improve with better visibility into custom solutions.**

Ready to explore how these visibility solutions might work for your specific needs? [Contact our team](https://nebulab.com/contact-us) for a consultation. We'd love to help you bring your custom solutions into the light.

Into the Light: Bringing Visibility to Your Shopify Customizations

Davide Di Stefano

The European Accessibility Act (EAA), set to take effect on **June 28, 2025**, will establish new standards for digital accessibility, transforming the lives of **over 87 million people with disabilities across the European Union**. This landmark legislation does more than enforce compliance—it challenges businesses to rethink their digital experiences and embrace inclusivity as a core priority.

For e-commerce brands operating locally or globally within the EU, this means re-evaluating your website to meet accessibility requirements. But accessibility isn’t just about legal compliance—it’s an opportunity to expand your audience, improve usability, and demonstrate your brand’s commitment to creating universally accessible online experiences.

The time to act is now. In this article, we’ll explore the significance of the EAA, what it means for your business, and actionable strategies to help you integrate accessibility into your e-commerce strategy.

## What Is the European Accessibility Act?

The European Accessibility Act (EAA), grounded in the principles of the [UN Convention on the Rights of Persons with Disabilities](https://employment-social-affairs.ec.europa.eu/policies-and-activities/social-protection-social-inclusion/persons-disabilities/united-nations-convention-rights-persons-disabilities_en), seeks to make products and services more accessible to individuals with disabilities, older adults, and people with temporary impairments. Its ultimate goal is to foster a fair and inclusive society where everyone can access the opportunities and resources modern life offers.

The EAA applies to various industries, including e-commerce, and mandates compliance with accessibility standards by 2025. Failure to meet these standards could result in significant legal and financial repercussions, with specific penalties determined by each EU member state.

However, certain exemptions exist:

* **Microenterprises** (companies with fewer than 10 employees and an annual turnover of under 2 million euros) are exempt from mandatory compliance but are encouraged to prioritize accessibility.
* **Member states** may also introduce limited exceptions tailored to specific contexts.

Businesses that are not exempt must prioritize compliance to mitigate financial risks and safeguard their reputation in the European market. Let’s explore the key requirements they need to follow.

## What Are the Requirements Requested by the EAA?

The EAA does not mandate specific technical standards, providing businesses with flexibility and room for innovation. However, the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) (WCAG) 2.1 are often referenced as the de facto framework for achieving compliance.

WCAG 2.1 is an internationally recognized set of standards developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to individuals with disabilities, including those with visual, auditory, physical, cognitive, or neurological impairments. These guidelines, also referenced in other major accessibility legislation like the **Americans with Disabilities Act** (ADA), offer a robust foundation for creating accessible digital experiences.

The guidelines are built around four core principles, ensuring that web content is:

* **Perceivable**: Information and user interface components must be presented in ways that users can perceive (e.g., providing text alternatives for images).
* **Operable**: Navigation and user interface elements must be operable (e.g., all functionalities must work via keyboard input).
* **Understandable**: Content and operation must be clear and intuitive (e.g., avoiding overly complex language and ensuring consistent navigation).
* **Robust**: Content must be compatible with assistive technologies, such as screen readers.

![](https://cdn.sanity.io/images/kqgmf0g2/production/a4856ec01e1d0310914fd4a5865a54c6a64f975e-2120x1324.png?fit=clip)

WCAG 2.1 defines accessibility through three levels of compliance:

* **Level A (Minimum)**: Covers the most basic web accessibility features and barriers.
* **Level AA (Recommended)**: Addresses a broader range of accessibility issues, making it the standard most commonly adopted by organizations.
* **Level AAA (Highest)**: The most stringent level, though not all content can realistically achieve this due to its complexity.

While the EAA does not explicitly mandate WCAG 2.1, its principles align closely with the framework, making WCAG 2.1 an essential reference for compliance. Businesses operating within the EU are encouraged to adopt **Level AA compliance** as a baseline to meet the EAA’s requirements by June 28, 2025. 

However, accessibility extends beyond mere compliance—it’s a strategic investment with tangible business benefits. By prioritizing accessibility, you not only fulfill legal obligations but also unlock opportunities for growth, customer satisfaction, and long-term economic advantages.


## What Are the Economic Benefits of Accessibility?

### Expanded Market Reach

Accessible websites and services open your business to a broader audience, including the over 87 million people with disabilities in the European Union alone. But the benefits extend beyond this demographic:

* **Aging Population**: As populations age, more users experience visual, auditory, or mobility-related challenges. Accessible design ensures these customers can engage with your e-commerce platform.
* **Temporary or Situational Impairments**: Accessibility considerations benefit people with temporary disabilities (e.g., a broken arm) or situational limitations (e.g., poor lighting or loud environments).
* **Global Audience:** Accessibility features like clear navigation, alt text, and keyboard usability often enhance cross-cultural usability, making it easier for non-native speakers and global audiences to interact with your brand.

By removing barriers, your brand becomes more inclusive, expanding its customer base and increasing revenue potential.

### Improved User Experience

Accessibility often aligns with usability best practices, benefiting all users, not just those with disabilities. For example:

* **Simplified Navigation**: Clear layouts, logical flow, and intuitive interfaces make it easier for users to find products and complete purchases.
* **Faster Checkout Process**: Accessible forms with clear labels and instructions reduce frustration and cart abandonment rates.
* **Mobile Optimization**: Many accessibility improvements, such as touch-friendly buttons and adaptable layouts, enhance the mobile shopping experience—a critical factor as mobile commerce continues to grow.

When users have a smooth, frustration-free experience, they are more likely to return and recommend your brand to others.

### Stronger Brand Reputation

Consumers increasingly value brands that demonstrate social responsibility. By prioritizing accessibility, you position your company as:

* **Inclusive and Ethical**: Showing commitment to inclusivity fosters trust and goodwill among diverse customer groups.
* **Progressive**: Leading in accessibility can position your brand as an innovator in the industry, setting an example for competitors.

Positive public perception translates into stronger customer loyalty, more referrals, and a brand that stands out in a crowded market.

Now that we’ve outlined the benefits of successfully implementing accessibility in your e-commerce strategy, let’s dive into some actionable steps to help you get started.

## How To Get Started With Accessibility

### 1. Conduct an Accessibility Audit

![](https://cdn.sanity.io/images/kqgmf0g2/production/7d1ba181aa6eb44c7a1af6a2e65012492e9ada3a-2120x1324.png?fit=clip)

The first step, once you familiarize yourself with the specific accessibility standards and requirements, is to conduct an accessibility audit of your e-commerce website.

This can be done manually—by navigating your site with a keyboard, testing screen reader compatibility, and reviewing color contrast—or automatically, using tools like [Level Access](https://www.levelaccess.com/), [WAVE](https://wave.webaim.org/), or [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=it), to identify areas that do not meet WCAG 2.1 standards.

### 2. Define Accessibility Goals

Once you have the audit, you can establish clear, measurable objectives to guide your accessibility efforts. 

When doing this, you’ll want to **prioritize high-impact areas** that have the most significant effect on user experience, including:

* **Navigation menus** to ensure seamless site exploration.
* **Product pages** for clear and accessible product information.
* **Checkout forms** to reduce barriers and improve conversions.
* **Search functionality** to help users find what they need effortlessly.

Remember: you should aim for **WCAG 2.1 Level AA** compliance as a baseline.

Develop a comprehensive roadmap that outlines the scope of your accessibility improvements, sets priorities, and defines a realistic timeline for implementation.

### 3. Educate Your Team About Accessibility

Accessibility is an ongoing effort, so educate your team to maintain compliance. 

* **Developers**: Train them to write accessible code using best practices and tools like Accessible Rich Internet Applications ([ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)) for enhancing screen reader compatibility. Implement a workflow that includes automated accessibility checks—such as using the Lighthouse API—to review accessibility scores for every change to the code before deploying updates to the production environment. This ensures continuous monitoring and improvement.
* **Designers**: Educate your design team on WCAG 2.1 principles, including color contrast guidelines, scalable text, and keyboard accessibility. Encourage them to integrate accessibility considerations from the very beginning of the design process, ensuring that every layout, component, and interaction is inclusive by design.
* **Content Creators**: Train content creators to write clear, concise, and descriptive content that is inclusive and accessible. This includes using plain language, providing meaningful alt text for images, creating descriptive link text, and ensuring proper use of headings for better readability and navigation.

### 4. Monitor and Maintain Accessibility

Accessibility isn’t a one-time project—it requires continuous monitoring and adaptation to ensure your website remains inclusive and compliant over time.

Here’s how to maintain accessibility effectively:

* **Conduct Regular Audits**: Conduct periodic accessibility reviews to identify and address new issues that may arise from updates or changes to your website.
* **Collect User Feedback**: Actively seek feedback from users with disabilities to uncover pain points and prioritize improvements based on real-world experiences.
* **Stay Up-to-Date**: Keep track of updates to accessibility standards, such as WCAG revisions and changes in related legislation, to ensure your site remains compliant and up-to-date.

### 5. Seek Professional Support

If the complexities of accessibility implementation seem overwhelming, you don’t have to navigate them alone. Partnering with experts can provide the specialized knowledge, tools, and strategies needed to achieve compliance efficiently and effectively.

Professional accessibility consultants can perform a comprehensive audit of your website, identify areas of non-compliance, and provide actionable recommendations tailored to your website. They can also work with your team to develop a long-term accessibility strategy, ensuring that future updates align with standards like WCAG 2.1.

## EAA: An Invitation to Innovate and Empathize

The EAA should not be viewed as a constraint but rather as an opportunity to innovate and build more inclusive digital experiences. By following the steps outlined above, accessibility can become a core focus of e-commerce development, driving both compliance and user satisfaction.

If you need assistance implementing accessibility in your e-commerce strategy, our team is here to help. We can audit your website to identify areas for improvement and guide you through achieving compliance. [Get in touch](https://nebulab.com/contact-us) to ensure your website is not only accessible but also a model of inclusivity and innovation.

European Accessibility Act: A Primer for E-Commerce Brands

Over the last couple of years, a lot has been written about [the rise and fall of Digitally-Native Vertical Brands (DNVBs)](https://www.retaildive.com/news/dtc-brands-are-dead-retail-wholesale-long-live-dtc/729365/). These players vowed to eliminate the middleman and sell their products exclusively online, seizing an incredibly profitable arbitrage opportunity that revolved around cheap advertising and meager interest rates.

As it turned out, this strategy was doomed to fail as the market saturated, advertising became more expensive, consumers resumed shopping in-store after the pandemic, and venture funding dried up. These (and a few more) factors led to a sharp and dramatic deflation of the DNVB bubble, with several giants falling from grace and having to file for bankruptcy or face drastic valuation adjustments.

Today, savvy commerce operators understand that DTC is a sales channel, not a business model, and must be deployed as part of a much more comprehensive marketing and distribution strategy to have a net positive impact on the brand. The result is a more mature retail scene, with operators that seek to be omnichannel and profitable from day one—a refreshing return to Brand Building 101.

However, one particular type of retailer has been struggling more than others to catch up to the new reality due to its unique business model and (in some cases) low digital maturity: the Multi-Brand Retailer (MBR).

In this article, we’re going to explore why MBRs have it harder than the rest and what they can do to establish, maintain, and further their competitive advantage.

## The Problem and Opportunity of Multi-Brand Retail

If retail is a tough business, multi-brand retail takes the difficulty level up a notch by eliminating product features from a retailer’s potential sources of competitive advantage. When you sell the same products as tens of other retailers, you need to give the consumer a reason to buy that product from you vs. the competition.

For brick-and-mortar MBRs, that reason has historically been mere geographic proximity. In the physical world, it’s impractical for the average consumer to travel long distances “just” to find a better deal or get a slightly better experience. As a result, many brick-and-mortar MBRs have historically operated a business of arbitrage, where their main job was to acquire and then monetize foot traffic.

Unfortunately, these retailers quickly realized that online shopping is a different game altogether. With every one of your competitors just a Google search (or, soon, [a Perplexity prompt](https://www.perplexity.ai/hub/blog/shop-like-a-pro)) away, the Internet is a giant comparison machine. It costs the digital consumer virtually no effort to find the best possible deal on that pair of boots they’re looking for.

To survive, most MBRs focused on the only factor within their immediate control: price. They deployed ever more aggressive discounting strategies in an effort to win the consumer’s business. Unfortunately, this resulted in a race to the bottom that destroyed their margins and diluted their brands. This phenomenon contributed to the demise of smaller, family-owned operations and larger, more established players—a prime example being [the recent sale of YNAP to Mytheresa.](https://www.voguebusiness.com/story/companies/without-farfetch-whats-next-for-ynap)

On the other hand, the same aspects that make multi-brand retail so complicated to crack also make it a high-potential business model. Unlike most mono-brand shopping destinations, MBRs can become a one-stop shop for entire product verticals or consumer segments, reaching more consumers and commanding larger wallet shares than a single brand could ever do.

But if price wars are not the way to do this, what is?

## Mapping the Actors Involved in Multi-Brand Retail

Before answering the question, it’s essential to map the actors involved in a multi-brand retail operation and how they typically interact.

In its most basic form, the relationship looks like this—a brand sells to a retailer, which in turn sells to the end consumer (often, things are slightly more complicated, but this simplification will work for the purpose of our article):

![](https://cdn.sanity.io/images/kqgmf0g2/production/f773f93199f44a0bc87c4d5977e8c26e883f7a3a-400x100.svg?fit=clip)

In reality, though, brands always sell through multiple retailers, which means the relationship graph _actually_ looks like this:

![](https://cdn.sanity.io/images/kqgmf0g2/production/ec2621cfffeabd8919ad8f80c01306ffa5258a30-500x200.svg?fit=clip)

To make matters more complex, most brands _also_ sell directly to the consumer, either online or through their brick-and-mortar stores:

![](https://cdn.sanity.io/images/kqgmf0g2/production/2967e7060654d23e2a9b59a3c78b2511f58fcf56-500x200.svg?fit=clip)

Each of these relationships creates opportunities and constraints for all the parties involved in the system. As a couple of examples:

- Brands need retailers in order to increase their market share and penetration. At the same time, most brands ultimately want customers to shop on their direct channels, where they can collect more data and increase their profits.
- Most consumers want the best price, which pressures retailers into offering discounts. At the same time, brands don’t want to dilute their market positioning or cannibalize their own channels, so they regulate product pricing and availability.

For a multi-brand retailer, there are many more similar contradictions to navigate—each brings challenges but also creates opportunities.

In fact, savvy operators are experts in creating outsized value for each actor in the ecosystem while “satisficing” all constraints. In doing so, the retailer eschews its transactional role as a mere middleman between the brand and the consumer and builds its own identity; in other words, the retailer becomes _its own brand._

This approach allows retailers to compete on factors other than value, such as product selection, customer experience, and value-added services, giving them more bargaining power (literally and figuratively) in their relationships with brands and consumers.

So far, this is all very theoretical. Let’s see what it looks like in practice by analyzing how multi-brand retailers can compete across three dimensions: Merchandising, Customer Experience, and Value-Added Services.

## A Retailer for Everyone Is a Retailer for No One

When it comes to merchandising, multi-brand retailers should lead with a strong value proposition, understanding what kind of consumer they want to serve and how they want to position themselves. This will serve as a North Star in determining not only product selection but the retailer’s entire go-to-market strategy.

Unfortunately, most MBRs err on the side of caution and try to be everything to everyone. This choice (or lack thereof) often spurs from the fear of alienating specific market segments. Unfortunately, it comes two significant drawbacks:

- It generates massive operational overhead for the retailer’s merchandising, marketing, logistics, and operations teams.
- It dilutes the retailer’s identity in the eyes of both consumers and brands, turning them into a commodified middleman rather than a standalone entity.

The primary value of a multi-brand retailer is to act as a tastemaker, helping consumers navigate the brand landscape through a distinct point of view. Retailers that neglect this aspect are giving up a significant competitive lever and will only be able to compete across other dimensions, further reducing their ability to maneuver in the market.

This is not to say that this approach can _never_ work. In fact, it’s exactly what Amazon does: it carries (or aims to carry) every single product from every single brand in every single category, generates massive efficiency through economies of scale, and reinvests those savings to compete exclusively on price and convenience.

Unfortunately, there can only be a handful of Amazons in the world; everyone else needs to take a stance if they want to stand out.

Furthermore, having a unique value proposition also enables and enriches the other two competitive dimensions we’re exploring in this article–customer experience and value-added services. Let’s see how.

## Nailing the Multi-Brand Customer Experience

Consumer expectations for customer experience have never been higher, as evidenced by [Shopify’s recent State of Commerce report](https://www.shopify.com/uk/enterprise/state-of-commerce-report-2024): Offering a modern, robust digital shopping experience is a must-have for anyone selling online today. Luckily, the technology to do so has been largely commoditized, and the playbooks are available for everyone to peruse and implement.

However, while mono-brand players may be able to settle for “good enough,” multi-brand retailers do not have that luxury. For an MBR, customer experience is a lever to exploit rather than a bar to clear. The reason for this is two-fold:

- As we’ve mentioned, multi-brand retailers rarely compete on product. As a result, customers will place more importance on the quality of the customer experience in a multi-brand retail context than they would for a mono-brand transaction since they have alternative shopping channels to choose from for that same product.
- Furthermore, multi-brand retailers lend themselves to higher AOVs and more frequent purchases, which means customers will be exposed to their shopping experience more often and deeply. Again, this means they will emphasize CX quality more than usual.

The leading multi-brand retailers understand this, and they create innovative shopping experiences that don’t settle for the bare minimum. Instead, they include advanced elements which may include any of the following:

- **Dynamic cross-selling:** MBRs can mix and match brands in ways that a customer wouldn’t (easily) be able to experience elsewhere. This can lead to cross-selling opportunities and contextual product recommendations.
- **Experience personalization**: By building a deep understanding of their audience, multi-brand retailers can create concierge experiences that help customers navigate what may be an otherwise intimidating product catalog.
- **Loyalty/membership programs:** Given that the ultimate goal of a multi-brand retailer is to become the one-stop shop for their customers, loyalty and membership programs can be highly impactful in improving customer retention—in some cases, they can even generate entirely new revenue streams.

All of these initiatives have the added benefit of helping the retailer collect data that can fuel merchandising decisions and further CX improvements.

In multi-brand retail, the customer experience is not just something you slap on top of the product. In fact, insofar as “product” is defined as the distinctive value the retailer offers its customers, customer experience is _the_ product they should worry about.

## Going the Extra Mile with Value-Added Services

Finally, multi-brand retailers can compete on what are typically called Value-Added Services (VAS). This is a broad term that often overlaps with the Customer Experience bucket. For the purpose of this article, we define VAS as any elements that are not part of the core shopping experience but are still perceived as valuable by the consumer.

Value-added services allow MBRs to create unique value that consumers couldn’t get through other channels—sometimes, not even through the brands’ direct-to-consumer channels. A few examples of VAS are:

- **Product alteration:** This may include services such as tailoring, embroidering, engraving, and any other product alteration and customization services relevant to the categories the MBR operates.
- **End-of-life options:** Through economies of scale, multi-brand retailers are well-positioned to offer customers the ability to repair, recycle, or resell their products. For example, [Net-a-Porter allows customers to resell products through Reflaunt.](https://netaporter.reflaunt.com/choose-your-location?redirect_url=%2F)
- **Community, content, curation, collabs:** [The 4Cs of the modern brand.](https://andjelicaaa.medium.com/4cs-of-the-modern-brand-8bb96c5b3597) Multi-brand retailers can expand their brand universe through community activations, bespoke and curated content, and collabs with adjacent verticals/categories.

Through Value-Added Services, multi-brand retailers build up their own brand, repositioning themselves from middlemen to value-creators in the consumer-brand relationship and adding a new dimension to their competitive strategy.

## Where to Start?

In this (very long) piece, we’ve seen how MBRs can stay competitive by identifying a distinctive and compelling value proposition, offering a best-in-class and innovative customer experience, and investing in value-added services to build a standalone brand.

Nebulab friend and [Commerce Thinking](https://www.commercethinking.com/) co-founder Luke Hodgson, interviewed for this piece, shares our perspective:

> “The economics of multi-brand retail demands a precise approach to everything, particularly digital merchandising. Without the cushion of production margins or brand marketing budgets and faced with high return rates, particularly in luxury fashion, successful MBRs master a different kind of value creation.
> 
> “Rather than competing on price or rushing to discount, \[multi-brand retailers\] become curators of lifestyle – they're crafting immersive digital and IRL experiences through photography, detailed product storytelling, and carefully constructed edits that speak directly to their customer. The future belongs to those who can understand and influence their customer's style journey better than the brands themselves.”

With that said, it’s also important to acknowledge that most of these investments require significant time, advanced know-how, and deep pockets. Very few retailers have the capabilities or the means to pursue a full-blown digital strategy from day one.

As always, we suggest [talking to your customers,](https://nebulab.com/blog/ecommerce-product-management) starting from low-hanging opportunities, and using data to iterate in a disciplined and intentional way. By truly understanding what their customers care about, MBRs can focus relentlessly on the areas more likely to make a difference and ignore everything else.

Over the following years, e-commerce will only get more challenging for MBRs as new players enter the market and brands ramp up their direct channels. While adjusting to this new reality may prove expensive, we believe that failing to keep up will further reduce a retailer’s competitiveness—and may ultimately prove fatal.

Redefining the Digital Value Chain for Multi-Brand Retail

Nicolò Rebughini

The Shopify ecosystem features a plethora of services and frameworks designed to help developers launch their own apps, whether they’re custom apps only meant to be installed on a specific store or public apps that will be listed on the Shopify app store.

Among these tools is [Gadget](https://gadget.dev/), claiming to be “the fastest way to build and run web apps.”

Gadget wants to be your one-stop shop for all of your full stack app development needs by providing a platform to handle all of the infrastructure needed to build and deploy an app.

At its core, it offers a managed PostgreSQL database and auto-generates an API package, complete with TypeScript support and React client integration. Developers can write server-side JavaScript code that runs on a serverless Node.js platform powered by Fastify, while the frontend development is simplified with a pre-configured React scaffold powered by Vite.

![](https://cdn.sanity.io/images/kqgmf0g2/production/ccc1ec82bad8e5a6f57c4d51528ddd41b1a9278a-2856x2172.png?fit=clip)

Gadget apps are always live from the moment they are created, and development environments can be promoted to production with a couple of clicks. On top of this, it offers an Integrated Development Environment (IDE) to manage both code and data in a unified location.

While Gadget is now a tool for building any sort of Web app, it was originally born to accelerate the development of Shopify apps. The Shopify integration provided by Gadget streamlines a lot of boilerplate work by offering:

- Data models for all your Shopify objects that you can augment with new attributes, stored on Shopify as custom metafields.
- Webhook subscriptions for object creation, update and deletion.
- So-called **actions** which allow you to run custom logic to keep Gadget in sync with your Shopify instance.

Gadget also publishes a TypeScript API that you can use to manage your custom data models. As an added bonus, this package is then made available through a registry, so it can be integrated in your Shopify storefront or any other JavaScript application.

Today, we’re going to take Gadget for a spin by using it to build a simple custom app that records the history of price changes for our Shopify products.

## Building Our Sample Gadget App

When creating a new app, we suggest starting with an  **Empty React embedded app**. Gadget also offers some pre-built app templates, but these don’t always work out of the box unfotunately, making for a subpar development experience.

Our Gadget app will need to read **productVariant** objects, as that’s where Shopify stores the variant price, so we need to select the **Product variant** scope when creating the app:

![](https://cdn.sanity.io/images/kqgmf0g2/production/50696d4cc9fd8601284264d42b53520aeae783ed-2910x2160.png?fit=clip)

At this point, can install the app in our Shopify store. To do this, we need to:

1. Create a Shopify app from the Shopify Partner Portal.
2. Copy the Shopify app’s Client ID (the app identifier) and Client Secret and plug them into Gadget’s configuration panel for our Gadget app.
3. Copy the URLs generated by Gadget and paste them in our Shopify app’s configuration panel. 
4. Go back to the Shopify app overview and select a store where we want to install the app.
5. Grant our app the required permissions in the dialog that pops up.

If all went well, we should now be able to see the default Gadget app UI in our Shopify store’s admin panel.

### Syncing Data Between Gadget and Shopify

To experience a bit of Gadget’s magic, we can check the **Installs** tab in the Gadget sidebar and start a **Sync** for the store we just installed our app in. This will sync our Gadget database with our Shopify store.

![](https://cdn.sanity.io/images/kqgmf0g2/production/4d65fe5ba7b9900c0d9944b25cff6d13aa58793f-2480x518.png?fit=clip)

To explore our data, we can head over to the **shopifyProduct** model and check out its data view. 

The **data** view is one of the highlights of Gadget: without Gadget, we’d have to make GraphQL API calls to be able to see the data. Being able to quickly see our Shopify data in a tabular form feels like magic.

![](https://cdn.sanity.io/images/kqgmf0g2/production/c00c913b45be8117514f0aa5fe3574c989eb79ab-3034x2244.png?fit=clip)

Furthermore, Gadget automatically creates webhook subscriptions for every accessible Shopify model, and by default, reacts to every change in the Shopify stores by ingesting changes: object creations, updates deletions are synced in near-real-time with Gadget’s database. If we attempt to edit a product, we should be able to see the changes shortly thereafter in the corresponding data view.

### Extending Our Gadget App with Custom Functionality

The simple app we're building just needs to record the history of prices set for our products. To do that, we need to store this data *somewhere*.

One way to do this would be to add a metafield to our variants. However, reading and writing the metafield would still requires going through the good old Shopify GraphQL queries and mutations, which requires a lot of boilerplate code. This is an annoying limitation of Gadget’s operating model.

Instead, let’s create a new **priceChange** model via the sidebar. Given we don't need to run calculations or any fancy analyses, we can structure the price field as a string, just as it is presented in the **productVariant** model.

We also want to correctly model the relationship between the **productVariant** model and the **priceChange** model: each **productVariant** should have multiple **priceChange** records. Setting this up via the Gadget UI is a breeze and very intuitive:

![](https://cdn.sanity.io/images/kqgmf0g2/production/1a30f13a82c332cfb7d06c17b3a903ad6af445cd-3034x1710.png?fit=clip)

Finally, we need to actually create a **priceChange** record on every price change. In order to do that, we can edit the **update** action for the **shopifyProductVariant** model, which governs what happens when variants are updated:

```jsx
// api/models/shopifyProductVariant/actions/update.js

export async function onSuccess({ params, record, logger, api, connections }) {
  const newPrice = params.shopifyProductVariant.price;

  if (newPrice != api.shopifyProductVariant.findOne(record.id).price) {
    api.priceChange.create({ newPrice, shopifyProductVariant: { _link: params.shopifyProductVariant.id } });
  }
};

```

With all of this in place, we can then test it by editing a product price on our store and then heading to the **priceChange** data view to verify the new addition:

![](https://cdn.sanity.io/images/kqgmf0g2/production/3fc38fe79407ae829db1952d8485118b7cb1cf73-2470x612.png?fit=clip)

### Taking It Further

Consuming the API built on the Gadget backend from any JavaScript or TypeScript application is as easy as installing an NPM package hosted directly in the Gadget registry, or including a minified script in your already existing web application. The API is kept in sync and documented automatically for you by the Gadget platform, which makes it a breeze to work with.

This would allow us, for instance, to read the record of price changes in our Shopify theme in order to show them to the customer (something that may be useful for compliance with the European Omnibus directive).

## Is Gadget Right For Your Shopify Customizations?

The answer is “it depends.”

If your team is already familiar with Gadget’s underlying technologies and ecosystem, picking up Gadget and feeling the magic of the robust webhook management and data synchronization  is a huge productivity boost, greatly reducing time-to-market for the applications you’ll be building.

However, if your Shopify application needs to deploy a checkout extension, a Shopify Function, or some other feature that’s not directly integrated in the app codebase, you can’t just use the Gadget UI. Instead, you’ll need to clone the code locally via the `ggt` command line tool, and then rely on the Shopify CLI to complete these tasks. While this adds some friction, it also allows you to use your preferred tools to work on the codebase, and `ggt` will still keep your data models in bi-directional sync between Gadget and your codebase.

Developers evaluating Gadget should also be mindful of platform lock-in: the platform takes over pretty much your entire custom app infrastructure, forcing you to play by their technical and commercial rules. If you ever need to migrate off of Gadget, the price to pay may be significant.

In conclusion, for teams prioritizing rapid Shopify app development over platform independence, Gadget offers a compelling and solid foundation to build upon. If, on the other hand, you value owning your infrastructure and want full control over your development environment, you’re probably better off developing your app from scratch.

A Primer to Building Custom Shopify Apps with Gadget

Michela Frecchiami

For direct-to-consumer (DTC) brands, Black Friday and Cyber Monday (BFCM) are more than just shopping events; they’re a prime opportunity to forge lasting customer relationships, expand market presence, and drive brand loyalty. [BFCM 2023 set new records](https://www.shopify.com/news/shopify-merchants-drive-record-high-9-3-billion-in-black-friday-cyber-monday-sales), with Shopify merchants generating $9.3 billion in sales—a 24% increase from the previous year. This isn't just a period for bargain hunters; shoppers are keen to treat themselves, stock up on essentials, and find meaningful gifts for loved ones.

Smart DTC brands that offer personalized recommendations, exclusive bundles, and tailored shopping experiences can take full advantage of this critical period. By focusing on these strategies, brands can enhance the shopping experience, boost cart values, and nurture customer loyalty well beyond the holiday season.

In this article, we’ll delve into five key strategies DTC brands can use to optimize the user experience, increase sales, and strengthen customer relationships during BFCM.

## 1. Use Personalization to Build a Tailored Shopping Journey

BFCM is the perfect time to elevate the shopping experience with personalized recommendations. Shoppers are often on the lookout for items they've been considering for months, and by tailoring product suggestions based on customer preferences, you can significantly improve conversion rates.

To achieve personalization during BFCM, DTC brands can leverage the following strategies:

* **Tailored Product Recommendations**: Use browsing history and previous purchases to recommend products that align with a customer's past behavior. For instance, if someone bought skincare products last year, suggest complementary items they might appreciate this season. Relevant suggestions make it easier for customers to find what they need and feel understood by your brand.
* **Exclusive Offers for Returning Customers**: Rewarding returning customers with early access to sales or exclusive discounts fosters loyalty. This personalized touch can be a game-changer during BFCM, making shoppers feel valued and more likely to return for future purchases.
* **Personalized Shopping Experience**: Tailoring the shopping journey with custom landing pages for different customer segments enhances the overall experience. These pages can feature curated collections that align with the customer’s preferences, creating a more relevant and engaging shopping experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/a8afd37c8557c53ec4629f67a9b0abff752996fd-1600x1052.jpg?fit=clip" alt="Cometeer personalized black friday email">
  <figcaption>Cometeer's Black Friday emails ensure that returning customers get the exclusive offers before the general public.</figcaption>
</figure>
<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/342ff6cf7110501c14642682563f633c42ae4842-1600x1052.jpg?fit=clip" alt="LuLuLemon upsell and personalizationl">
  <figcaption>Lululemon offering discounts on upsells and crossells as a way to tailor product recommendations to their customers.</figcaption>
</figure>

## 2. Increase AOV by Featuring Cross-Selling and Up-Selling Opportunities
The cart is a critical touchpoint for boosting the average order value (AOV). By implementing strategies like volume discounts, bundling, and upselling complementary items, DTC brands can maximize each purchase during BFCM.

* **“More of the Same” Strategies**: Capitalize on popular items frequently bought together, leveraging BFCM shoppers' tendencies to stock up. Offering volume discounts (e.g., "Buy 3, Get 1 Free") or bundling products is a great way to drive higher cart values.
* **Complementary Product Suggestions**: Highlight 2-3 complementary items based on what's already in the cart. For example, if someone is buying a skincare set, suggest related accessories or add-ons like travel-sized products. This makes it easier for customers to discover products that enhance their purchases.
* **Tiered Free Shipping and Gift Incentives**: Highlight how close customers are to free shipping or a gift incentive (e.g., "You’re only $20 away from free shipping!"). These small nudges often encourage additional purchases, enhancing the perceived value of the order.
* **Mobile-Friendly Design**: Ensure that upselling and cross-selling sections are visible on mobile devices without obstructing the user's view. Experiment with different methods, such as collapsible sections, carousels, or dismissible pop-up windows displaying relevant suggestions immediately after a customer adds an item to the cart. Monitor user engagement and adjust the design accordingly.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/d1e5f36a97b2d8b3979fd7a51adfee38b9927f5e-1600x1052.jpg?fit=clip" alt="Cart upsell examples">
  <figcaption>Some examples of mobile cart upsell UX that we love!</figcaption>
</figure>

## 3. Provide Alternative Product Recommendations for Out-of-Stock Items 
High-demand products sell out quickly during BFCM, leading to frustrated customers and missed sales opportunities. Offering alternative product recommendations is a proactive way to keep customers engaged and reduce the likelihood of abandonment.

However, the visibility of these recommendations is key—product recommendation carousels, while useful, can easily be missed if placed at the bottom of the page, particularly on mobile.

Here there are a few ideas, that brands should consider to leverage alternative products avoiding to miss any potential conversions:

* **Anchoring Similar Items**: implementing anchor links near the out-of-stock button (often disabled or converted to a “Notify Me when Available”) that direct customers to a section featuring similar items. This approach provides customers with immediate alternative choices, letting them discover deals on similar products.
* **Display product recommendations near the buy section**: Display alternative items near the “buy” button or in a non-intrusive pop-up when an out-of-stock product is selected. Make sure these suggestions are easy to find and relevant to the customer's browsing history.
* **Non-Intrusive Pop-Up Recommendations**: A pop-up window that recommends alternative products when a shopper encounters an out-of-stock item can save the sale. Ensure the pop-up is easy to close but remains accessible for the customer to revisit.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/fed609443a842656a8c6b1bfde54c1878f09e8d2-1600x1052.jpg?fit=clip" alt="Aloyoga out of stock messaging">
  <figcaption>Aloyoga (left) uses anchoring messaging and alternative cross sells when products are out of stock. Princess Polly (right) also uses "alternative" products alongside a "notify me" call to action.  </figcaption>
</figure>

## 4. Show Delivery and Return Expectations to Reduce Customer Anxiety 
Clear communication is key to preventing cart abandonment, especially during the BFCM rush. By setting clear expectations around delivery times, shipping costs, and return policies, you can reduce anxiety and encourage purchases.

Since gifting remains a significant element of the holiday shopping season, consider improving the shopping experience for gift-givers by implementing these key insights.

* **Transparent Shipping Costs**: Display shipping costs upfront, ideally on the product page or in the cart. Surprising customers with hidden fees during checkout is a surefire way to lose them.
* **Order Cutoff Dates**: Ensure customers know when they need to place orders to receive them on time, particularly for gifts. Prominent banners or product page messages like "Order by December 10 for guaranteed delivery before Christmas" give customers confidence in their purchase.
* **Extended Return Policies**: Offering an extended return window for purchases made during BFCM reassures customers that they can buy gifts without worrying about strict return deadlines.
* **Order Tracking**: Providing detailed tracking updates helps ease customer concerns about delivery times during this busy season. Clear tracking information can make a significant difference in the overall customer experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/e357399262e62a1eabe41e084d895a68f0eb2b3a-1600x1052.jpg?fit=clip" alt="Aloyoga out of stock messaging">
  <figcaption>Lake (left) and Alo (right) both have clear information about delivery and returns in the checkout, ensuring customers don't get an unwanted suprise!  </figcaption>
</figure>

## 5. Provide an Optimized Experience to Mobile and Desktop Users 
[During BFCM 2023](https://www.syte.ai/blog/bfcm-resources/bfcm-2023-top-trends-and-takeaways/), while mobile transactions were significant, desktop shoppers displayed higher conversion rates and average order values (AOV), particularly in industries like Fashion, Jewelry, and Home Decor. This trend suggests that many shoppers turned to their computers for focused sessions, whether they were stocking up on essentials for the upcoming year or purchasing high-value items they'd been considering and researching for some time.

To provide an exceptional shopping experience for both desktop and mobile users, consider these tactics:

* **Site Speed Optimization**: High traffic during BFCM can lead to slow load times or crashes, causing customers to abandon their carts. Use tactics like lazy loading, content delivery networks (CDNs), and site performance testing to ensure a smooth, speedy shopping experience.
* **User-Generated Content (UGC)**: Customer photos, Q&A sections, and verified reviews enhance trust, particularly for desktop shoppers researching high-value items. UGC adds authenticity to your brand and boosts conversion rates by providing social proof.
* **Accessible Product Information**: Make essential product details like size guides, specs, and return policies easy to find. During the hectic BFCM season, customers don’t want to search for information. Providing it upfront ensures a smoother shopping experience, and real-time support through chatbots can further assist.

## Maximizing BFCM Success for DTC Brands 
As BFCM approaches, DTC brands must seize the opportunity to optimize the shopping experience, connect with customers, and build long-term loyalty. By focusing on personalized shopping journeys, effective cross-selling strategies, and clear communication around shipping and returns, brands can turn BFCM into a catalyst for sustained growth and engagement.

Need help planning your e-commerce strategy for BFCM? We’re here to assist you in creating a seamless user experience that drives results. [Contact us](https://nebulab.com/contact-us) to learn more!

Unlocking BFCM Success: Key UX Strategies for DTC Brands

Gift-giving is an art, and when it comes to online shopping, the canvas can sometimes feel cluttered. For DTC brands, the opportunity to make this experience memorable is now more within reach than ever, especially as the global personalized gifts market—valued at USD 51.98 billion in 2024—is expected to grow to [USD 138.17 billion by 2030](https://www.marketresearchfuture.com/reports/personalized-gifts-market-10348). 

This demand for customization and gifting underscores the importance of adding thoughtful touches like personalized messages, gift wrapping, and unique packaging to create an exceptional and seamless gifting experience.

Many DTC brands with smaller catalogs rely on external platforms to offer ready-to-use gifting solutions, like sending e-cards instead of physical products or allowing recipients to provide their shipping information—creating a convenient, customizable experience similar to gift cards. 

However, this reliance on third-party platforms can result in a fragmented user experience, akin to a ping-pong match between the store and the gifting service, which can introduce friction into the process.

Even with custom gift options available, most stores fail to deliver an engaging gifting experience. It's easy to treat gifting as an afterthought, but in reality, a shopper's gift-giving journey begins long before they add an item to their cart—often even before landing on a product page.

## DTC Brands and the Power of Unique Gifting Experiences

Unlike B2C e-commerce or marketplaces, DTC brands often offer unique, special products that attract gift-givers seeking a personalized touch. A well-crafted gifting experience not only sets these brands apart from their competitors but also enhances brand sentiment and serves as a powerful customer acquisition tool, similar to referral programs.

By addressing specific aspects such as tailored filters, cart and checkout optimizations, and personalized experiences for email subscribers, businesses can elevate their gifting offerings and engage both gift-givers and recipients more effectively.

Let's explore these key points to uncover valuable insights, tips, and best practices that can enhance the overall gifting experience.

### Streamlining the Gift Discovery Process

Shopping for someone else can be challenging, especially if users aren’t familiar with the recipient's preferences. This is particularly true in categories like toys, fashion, or beauty products, where age and trends heavily influence choices.

To make the gift-giving process smoother and more enjoyable, e-commerce sites should offer "Recipient" filters, such as Age or Gender. Mori, a brand specializing in kids' and babies' apparel and accessories, provides common gifting categories like "Newborn Baby Gift" along with recipient filters, demonstrating how these features can help customers refine their search based on the recipient's demographics and interests.

E-Commerce stores selling products frequently bought as gifts can significantly improve the gift selection process by following these insights:

* **Age and gender filters:** Allow users to narrow their search by offering filters based on the recipient's age, gender, or relationship (e.g., "For Her" or "For Kids").
* **Interest-based filters**: Let customers filter products based on hobbies, interests, or lifestyle categories, such as "For Pet Lovers" or "For Fitness Enthusiasts."
* **Occasion filters:** Offer filters for specific occasions like "Birthday," "Anniversary," or "Holiday Gifts" to help users choose based on the event.
* **Personalized recommendations:** Use customer data or popular trends to highlight products that suit common gifting scenarios, offering a personalized touch.
* **Filter placement:** Ensure filters are prominently placed, ideally in the main navigation menu or homepage, for easy access and a streamlined browsing experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/7a2437b926981d7723352af400450ea947a6a5e1-1600x1052.jpg?fit=clip" alt="Mori Baby Mori recipient filters">
  <figcaption>Mori Baby Mori offers a thoughtful and personalized gifting experience on their site, allowing customers to add gift wrapping, personal messages, and curated bundles that cater to new parents and babies.</figcaption>
</figure>

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/20910d0dd249e64b3fc92d7124dfe61a8065c6ce-1600x1052.jpg?fit=clip" alt="Maisonette recipient filters">
  <figcaption>Maisonette provides a curated gifting experience with options to select beautifully packaged gifts, customizable messages, and handpicked collections for children and parents, making it easy to find thoughtful presents.</figcaption>
</figure>

### Optimizing the Product Page for Gifting
Once users have found a potential gift, providing clear and accessible gifting options on the product page is crucial for a seamless purchasing experience. As the personalized gifts market is projected to grow at a compound annual growth rate [(CAGR) of 12.97%](https://www.marketresearchfuture.com/reports/personalized-gifts-market-10348), the demand for custom options like gift wrapping, messages, and unique packaging is increasing. By clearly displaying these options and offering transparency around costs, DTC brands can capture this growing segment and ensure a positive, memorable gifting experience for their customers.

Many e-commerce sites overlook this step, which can lead to frustration for gifter-givers who need to know early on what gift options are available without digging through the checkout process. Lake, for example, effectively advertises its branded gift box on the product page, offering an easy way to add it to the cart and providing detailed options, streamlining the gifting decision for users.

To optimize the product page for gifting, consider these strategies:

* **Display gifting options clearly**: Show available gifting options—such as gift wrapping, custom messages, or special packaging—on the product page to help users make informed decisions early.
* **Make gifting costs transparent**: Clearly state any additional costs associated with gift services like wrapping fees or packaging upgrades, preventing unpleasant surprises later in the process.
* **Link to more gifting information**: For complex gift services include a link to a dedicated gifting info page where users can explore options in detail, keeping the product page clean and focused.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/b114d6b08da9784a3ad53ef70a4235da221078ec-1600x1052.jpg?fit=clip" alt="Lake Pajamas offers Gift boxes in the buy section">
  <figcaption>Lake Pajamas offers a simple yet elegant gifting experience, allowing customers to add gift boxes, personalized messages, and luxurious packaging to their orders, perfect for presenting their high-quality sleepwear as thoughtful gifts.</figcaption>
</figure>

### Enabling Customers to Enter a Gift Message
A key feature for sites offering gifts is the ability to include a personalized message. While this seems straightforward, here are a few best practices:

* **Display Custom Message Option in the Cart:** Ensure the option to add a custom gift message is available and visible in the cart, so users can easily include it before completing their purchase.
* **Avoid prefilled gift messages:** Using preset messages like “I hope you enjoy this gift!” can confuse users, who might think the field is already filled in. Instead, only show a placeholder after users opt to include a message.
* **Use a "Save" button**: Rather than relying on autosave, provide a "Save" button so users feel confident their personalized message is securely stored.
* **Preview gift message in order summary:** Include a preview of the gift message in the order summary to reassure users that their message has been saved and will be sent with the order.


### Integrating Special Wrapping and Branded Gift Boxes into the Cart

Special wrapping or branded gift boxes can add a final, thoughtful touch to the gifting experience. Gifting features can vary widely across e-commerce sites, making it essential to provide clear information about these options. When incorporating special wrapping and branded gift boxes into the cart, consider the following insights:

* **Brief Descriptions:** Include short descriptions or icons representing gift wrapping and branded box options to help customers quickly understand the choices available.
* **Mark Free Options Clearly:** If gift wrapping or custom packaging is offered at no additional cost, clearly indicate that these options are free to prevent confusion.
* **Opt-Out Option:** Provide an easy way for customers to opt out of special gift wrapping or boxes if they prefer to skip these options.
* **Discounted Bundles:** Offer discounted bundles that include the product and gift wrapping or a branded box to increase the overall value of the purchase.
* **Delivery Times:** Especially during the holiday season, it's important to provide a delivery-date estimate or delivery-date range. Many stores that don't provide this information risk failing to deliver gift orders on time. By offering accurate delivery estimates, customers can plan their gift-giving effectively.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/75d41dc78e3e19448d4c7e313f9a31f966064129-1600x1052.jpg?fit=clip" alt="Lake Pajamas offers Gift boxes in the cart">
  <figcaption>The easy-to-spot "Select Gift Options" button ensures that customers can quickly personalize their gift, making the process of sending thoughtful, beautifully packaged sleepwear even smoother and more user-friendly.</figcaption>
</figure>


### Leveraging Personalization for Existing Customers
Offering personalized experiences for existing customers can elevate the gifting process and create a sense of connection between customers and your brand. Here are a few ways to achieve this:

* **Custom Profiles for Gift Recipients:** Allow customers to create profiles for their loved ones, where they can save important details such as birthdays, genders, sizes, and interests. This information can be used to prefill filters during the search process, making it easier and faster for customers to find the perfect gift.
* **Saved Items and Wishlists:** Enable customers to save their favorite items or create wishlists for each recipient profile. This not only simplifies the gift selection process but also encourages repeat visits and purchases.
* **Personalized Reminders and Recommendations:** Send your customers timely notifications before recipients' birthdays or special occasions, along with personalized gift recommendations based on the recipient's profile. This thoughtful gesture can increase customer satisfaction and foster brand loyalty.

![](https://cdn.sanity.io/images/kqgmf0g2/production/99b9208357c496fca7a3e2675aadfe4720de6174-1600x1052.jpg?fit=clip)

Maisonette offers a great example of effective personalization features. Users with an account can save multiple profiles with details like name, date of birth, and gender. Maisonette then provides selections based on these data, and users receive a notification one month before the recipient's birthday with a special promotional code. Such personalization can lead to higher conversion rates, increased customer retention, and greater overall success in the competitive DTC market.

## Wrapping Up the Perfect Gifting Flow

The gifting experience is a crucial aspect of e-commerce, particularly for DTC brands specializing in unique, high-quality products. As shoppers increasingly seek personalized and memorable gifts, e-commerce sites must meet these expectations by offering thoughtful and transparent gifting options.

Remember that a well-executed gifting experience can be a powerful differentiator in the competitive e-commerce landscape, providing both immediate benefits and long-term gains for your brand. As you refine your gifting strategy, keep in mind the importance of creating a seamless and enjoyable shopping journey that fosters customer engagement and loyalty.

Ready to enhance your gifting experience? Get in touch with the team at Nebulab to create a seamless, personalized, and memorable gifting process that delights your customers and drives results. Whether it's optimizing product pages, integrating custom messages, or adding unique packaging, we can help you turn your DTC e-commerce into a go-to destination for thoughtful gifts. 

Together, we can make your gifting strategy truly stand out! [Reach out today.](https://nebulab.com/contact-us)

How DTC Brands Can Elevate Their Gifting Experience

The Shopify POS suite is a key component of Shopify’s Unified Commerce approach, enabling merchants to create rich omnichannel experiences that bridge their offline and online shopping channels. Initially launched in 2013, Shopify has continued to improve its POS hardware over the years, making it more powerful and expanding availability to [more countries.](https://www.shopify.com/editions/summer2024#pos-in-more-countries)

What sets Shopify’s POS lineup apart from the competition is the flexibility merchants have in designing their POS setup, with various [card readers](https://www.shopify.com/pos/store/collections/card-readers) for different environments and the ability to connect a [cash register](https://www.shopify.com/pos/store/collections/cash-drawers), [barcode scanner](https://www.shopify.com/pos/store/collections/barcode-scanners), and [receipt printer](https://www.shopify.com/pos/store/collections/receipt-printers-and-paper) optionally.

In terms of functionality, while Shopify’s POS system comes with [a rich set of native features](https://www.shopify.com/pos/features), Shopify also offers the ability to customize the POS system using Apps. The Shopify App Store already features [200+ POS apps](https://apps.shopify.com/app-groups/extensions/point-of-sale), offering product bundles, loyalty programs, and retail staff management features.

Still, if these apps don’t cater to your needs, you can develop your own POS UI extension—a trend becoming increasingly popular as Shopify starts serving larger merchants with more sophisticated requirements.

In this article, we will show how to do exactly that: by taking inspiration from a real-world scenario, we will build an end-to-end Shopify extension that allows your customers to show a QR code while completing in-store purchases to connect the purchase to their customer account. This eliminates the need for a store associate to look up the customer by their name or email and creates a nice “wow” moment for the customers.

Let’s get started!

## Creating Our Shopify App

Before we can get started building our extension, we will need the following:

* A working Shopify partner account
* The Shopify CLI running on our machine
* A development store with the [Checkout and Customer Accounts Extensibility developer preview](https://shopify.dev/docs/api/release-notes/developer-previews#checkout-and-customer-accounts-extensibility-developer-preview)

Once we have everything, the first step is to create a new Shopify App that will expose our custom functionality:

```
$ shopify app init
```

The CLI will ask what type of app we want to build. We need a Custom App since we’re building functionality specific to our store and not an app for general distribution.

Once we have our custom app, we must understand what [app surfaces](https://shopify.dev/docs/apps/build/app-surfaces) we want to hook into. In our case, we’ll need:

* A [Customer account UI extension](https://shopify.dev/docs/apps/build/customer-accounts) to show a customer their QR code in our online storefront.
* A [POS UI extension](https://shopify.dev/docs/apps/build/pos) that will allow store associates to scan the QR code to identify the customer.

Let’s start with the first one!

## Displaying the QR Code in the Storefront

Run the following command to create our Customer Account extension:

```
$ shopify app generate extension --name loyalty-card
```

When asked what type of extension to generate, select Customer account UI extension. The CLI will also ask whether we want to use JavaScript or TypeScript--we’re going with plain JavaScript for our example, but feel free to use whatever works best for you!

By default, the generator will create a `FullPageExtension.jsx` and a `MenuActionExtension.jsx` file as examples. We’ll want to remove them, along with their corresponding configuration in `shopify.extension.toml`, and replace them with a new extension:

```
# ...

[[extensions.targeting]]
module = "./src/LoyaltyExtension.jsx"
target = "customer-account.profile.block.render"

# ...
```

In `LoyaltyExtension.jsx`, we’ll write the code to render our QR code on the customer profile page. In this example, we’re generating the QR code with a free API, but we could use our own server (also, Shopify will support a [QRCode component](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/components/other/qrcode) soon):

```
import { Heading, Text, View, BlockStack, Link, Card, Image, reactExtension, useApi } from '@shopify/ui-extensions-react/customer-account'

function LoyaltyExtension() {
  const { authenticatedAccount } = useApi()
  const customerId = `gid://shopify/Customer/${authenticatedAccount.customer.current.id}`

  return (
    <Card padding="small">
      <BlockStack spacing="tight">
        <Heading>
          Your Loyalty Card
        </Heading>
        <Text>
          Scan it in the store to earn points!
        </Text>
        <View maxInlineSize={128}>
          <Image source={`https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${customerId}`} />
        </View>
      </BlockStack>
    </Card>
  )
}

export default reactExtension(
  "customer-account.profile.block.render",
  () => <LoyaltyExtension />
)
```

While this looks like an ordinary React component, we won’t be able to import assets like images or use regular HTML tags. This is because Shopify renders the UI using its native engine. As a result, the styling of our extension is limited to the Components API and the brand styling inherited from the store.

With everything set up, we can test our extension by running:

```
$ shopify app dev
```

As part of this command, we must select a partner account and development store to test the app.

With the command running, we can preview our customer account UI extension by pressing P on our keyboard. The Developer Console will open up in our browser with a link to preview the extension. Clicking the link should show our QR code:

![](https://cdn.sanity.io/images/kqgmf0g2/production/300b8ad677bf19e7245ab3bac52ab4a91ac96284-1214x1390.png?fit=clip)

With the customer account UI extension working, we are halfway there. Customers can view their loyalty cards, but there is no way our staff can scan them just yet. Let’s see how to do that!

## Reading the QR code in the POS

To create an extension capable of scanning QR codes, we need to set up a POS UI extension that interacts with the barcode scanner and sets the customer on the current order when a customer QR code is detected.

Since this extension is part of the same feature we were working on earlier, we will generate the extension under our existing app:

```
$ shopify app generate extension --name loyalty-card-scanner
```

Even though POS extensions are set up similarly to customer account extensions, we need to do a bit more work. In the case of our POS extension, we need two components: 

* A tile that can be added to the home screen of the POS system.
* A modal that is opened when the tile is pressed.

(If you’re curious, you can find all possible targets for POS extensions [here](https://shopify.dev/docs/api/pos-ui-extensions/unstable/targets)).

Let’s start by creating the modal since we’ll need to use it in the tile. Create a file called `Modal.jsx` with the following contents:

```
import { Screen, Navigator, reactExtension, useScannerDataSubscription, CameraScanner, useApi } from '@shopify/ui-extensions-react/point-of-sale'

function Modal() {
  const { cart, toast, navigation } = useApi()
  const { data, source } = useScannerDataSubscription()

  // This runs on every change to `data`.
  if (data?.startsWith('gid://shopify/Customer/')) {
    const id = parseInt(data.split("/").pop())
    cart.setCustomer({ id: id })
    toast.show(`Found Customer: ${id}`)
    navigation.pop()
  }

  return (
    <Navigator>
      <Screen title="Scan Customer Loyalty Card">
        <CameraScanner />
      </Screen>
    </Navigator>
  )
}

export default reactExtension(
  "pos.home.modal.render", 
  () => <Modal />
)
```

Hopefully, the code is pretty self-explanatory:

1. We render a screen with a single `CameraScanner` component.
2. We use `useScannerDataSubscription` to listen for scanner data.
3. When our QR code is detected, we set the customer on the cart, show a toast, and close the modal.

Now that the modal is in place, we must implement a tile component allowing store operators to access it. This is quite straightforward! Just create a `Tile.jsx` file with the following contents:

Now that the modal is in place, we need to set up a grid tile to open it when clicked.   

```
import { Tile, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

const TileComponent = () => {
  const { action } = useApi()
  return (
    <Tile
      title="Add Customer"
      subtitle="Scan customer loyalty card"
      onPress={() => {
        action.presentModal()
      }}
      enabled
    />
  )
}

export default reactExtension(
  "pos.home.tile.render", 
  () => <TileComponent />
)
```

Tiles are interesting and offer much functionality out of the box; for instance, their API allows them to be dynamically enabled and disabled. You can learn more about them in [Shopify’s documentation](https://shopify.dev/docs/api/pos-ui-extensions/unstable/components/tile).

Now that we have our components, we must ensure our app knows where to render them. Add the following to `shopify.extension.toml`:

```
# ...

[[extensions.targeting]]
module = "./src/Tile.jsx"
target = "pos.home.tile.render"

[[extensions.targeting]]
module = "./src/Modal.jsx"
target = "pos.home.modal.render"

# ...
```

Unlike with customer account UI extensions, we cannot test POS UI extensions in the browser. Instead, we’ll need to download the POS app to a supported device, like a smartphone or tablet, that can scan QR codes.

Once we have the Shopify POS app on our device, we can run `shopify app dev`, press P, open the Developer Console, click on the “View Mobile” button, and scan the QR code with our mobile device. This will enable the developer preview for our extension on the device:

![](https://cdn.sanity.io/images/kqgmf0g2/production/2cf428d978c9b39006009b01c7d47aa865c16389-1874x342.png?fit=clip)

That’s it! Now that our custom app is fully working, it’s time to deploy it.

## Deploying the Custom App

Now that both extensions are defined and we are happy with the solution, we can deploy our app. By deploying the app, we make it available to the production stores under the same Partner account.

Since the app with our extensions satisfies [the requirements to be hosted by Shopify](https://shopify.dev/docs/apps/build/app-surfaces#hosting), all we need to do is run the following command:

```
$ shopify app deploy
```

Once the app is deployed, we can install it in our store through the Partner portal.

After installing the app, we need to add our grid tile to the POS home screen to our POS home screen and the Loyalty Card app block to our Account Profile page. Once the changes are published, our customers can find their loyalty card on their account page, and our associates can scan the QR codes via the POS.

## The Sky’s the Limit!

With just a few lines of code, we’ve leveraged Shopify’s customer account UI and POS UI extensions to create a smooth loyalty program experience for our most engaged customers. However, there’s so much more we could have done:

* We could retrieve and display a customer’s loyalty status and other data in the POS UI, helping store associates personalize the shopping experience.
* We could allow customers to add their QR code as an item to their Apple Wallet for an even easier (and cooler!) experience.
* We could apply dynamic discounts to the customer’s cart when they scan their QR code based on their shopping history or other parameters.

The only caveat is that we must stick to Shopify’s [APIs](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis) and [UI components](https://shopify.dev/docs/api/pos-ui-extensions/2024-04/components) to achieve our goals. While this seems a limitation at first, it has some very appealing advantages: our POS UI extension, for instance, will work smoothly on *all* POS setups, from a single iPhone running the Shopify POS app to a fully-fledged setup POS Terminal setup with a tablet and external barcode scanner.

As Shopify adds more and more extension targets and capabilities to their APIs and UI components, brands will be able to achieve even more with even less--a badly needed superpower in today’s competitive consumer landscape. 

If you have a POS UI or other kind of UI customization in mind for your Shopify store and need help launching it, feel free to [reach out!](https://nebulab.com/contact-us) We’d love to help.

How To Build Your First Shopify POS UI Extension

Product configurators are interactive UIs that allow a brand’s customers to personalize certain aspects of a product to fit their tastes and preferences. No matter whether they’re the only path to purchase or one of many possible options, configurators offer several advantages:

* Consumers often perceive customized products as more luxurious than their mass-produced alternatives, which can help reduce price sensitivity.
* Brands can use configurators to upsell customers on premium options they would not otherwise consider, potentially boosting average order value (AOV).
* Configurators are also the perfect place for cross-selling through accessories and other complementary products, increasing average basket size (ABS).

Over the years, product configurators have evolved dramatically, thanks in no small part to technologies such as 3D, AR, and VR. They are particularly popular in the fashion, furniture, electronics, and automotive industries, where total personalization and flexibility are key to an engaging customer experience.

However, total flexibility often leads to complexity, which creates a slew of UX challenges. To avoid alienating their customers, brands must manage this friction and ensure their configurator is intuitive, efficient, and enjoyable.

In this article, we’ll provide recommendations and guidelines for creating a product configurator that balances flexibility and usability, driving the results you’re looking for.

## 1. Create a Sense of Progression

Product configurators come in different shapes and sizes, but creating a sense of progression is vital for enhancing the user experience and ensuring consumers complete their purchase.

This can be accomplished by breaking down the configurator into manageable steps, giving users a sense of achievement as they complete each stage. The incremental progress keeps them motivated to continue through the entire flow and ensures you’re not overwhelming them with too much information.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/50b4ecf3d0b7d97a936816b3917c6bc10775eb89-1999x1130.png?fit=clip">
   <figcaption>To avoid confusion, the Framework Laptop configurator guides the user only shows the currently active step and clearly marks completed steps.</figcaption>
</figure>

## 2. Display an Accurate Product Preview

Each step of a configurator should provide users with instant feedback on their selections, ensuring that changes in options (such as color, material, or features) are immediately reflected in the product preview. This reassures customers about their decisions and creates a more engaging and enjoyable customization process.

Some brands display 3D models that users can rotate, zoom in on, and view from different angles, or they integrate AR to allow customers to visualize a product in a real-world environment.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/1b693df00472a9b77899af8bc7a6e26af036724e-1999x1223.png?fit=clip">
   <figcaption>For maximum engagement, Tylko allows customers to customize their product straight from the 3D rendering of their product.</figcaption>
</figure>

## 3. Calculate Up-to-Date Pricing and Shipping

In a product configurator, the price and shipping time estimate should be updated whenever the user changes their configuration.

This will help users make more informed decisions around which customizations fit their budget and delivery constraints, which in turn results in reduced friction and cart abandonment.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/167eaca2dcfac99b7d89cc97dc845fed77d83790-1999x1488.png?fit=clip">
   <figcaption>Cowboy clearly displays the impact of each addon on cost and shipping time, and shows alternative configurations with faster shipping.</figcaption>
</figure>

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/1c8f23357fbb84311d4d8c93acaf0699ee7696f9-1999x1675.png?fit=clip">
   <figcaption>On mobile, a sticky header/footer can be used to keep pricing and delivery information front and center while the user interacts with the configurator.</figcaption>
</figure>

## 4. Offer Technical Explainers

Customers who are new to a brand may need additional information about specific features or options while customizing, especially in technical product categories where jargon abounds, or the functionality or benefits of particular options are not self-explanatory.

To avoid overwhelming the user with too much information at once, brands can use UI elements like tooltips or modals. These elements provide immediate, context-sensitive assistance right where the customer needs it through text, videos, and tutorials.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/12648a14f561a220330d221a7a71adf171751430-1999x1546.png?fit=clip">
   <figcaption>Herman Miller includes a help icon at almost every step of their configurator. When clicked, it opens a modal containing information about specific options.</figcaption>
</figure>

## 5. Provide Real-Time Validation

While clear instructions can dramatically reduce the likelihood of a user error, it’s still common for users to encounter issues while using a configurator, such as selecting incompatible options or trying to place their order without completing all the necessary steps. If not properly handled, these errors can lead to frustration and result in the user abandoning the configuration experience.

Providing visual, real-time validation as users make selections can help them easily navigate the customization process. Use clear indicators, such as red outlines and error messages, to highlight invalid choices and guide users toward valid options.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/75355ef1bf806c09c9be9c529067f5cdc62612d4-1999x1180.png?fit=clip">
   <figcaption>In Framework’s configurator, we highlight missed steps in red, guiding users to provide the necessary information to complete their configuration.</figcaption>
</figure>

## Product Configurators Are Never Really Done

While these best practices lay the foundation for a successful and engaging configurator, you should still periodically review and improve your configurator's UX by:

* Conducting regular surveys, questionnaires, and interviews to gather  feedback from your users about their experience with the configurator.
* Running usability testing sessions where users interact with the configurator and provide real-time feedback.
* Using analytics tools to monitor user behavior and identify patterns, such as frequently encountered issues or abandoned steps.
* Adopting an iterative design process where the configurator is continuously refined through cycles of feedback, prototyping, testing, and implementation.

At Nebulab, we’ve helped our clients build, launch, and optimize product configurators in industries where the ability to create a bespoke product is a significant competitive advantage. If you’re curious, you can learn more about our work for Framework in [our case study.](https://nebulab.com/case-studies/framework)

If you need help designing and building a new product configurator from scratch or improving your existing setup, [don’t hesitate to reach out!](https://nebulab.com/contact-us)

The Nebulab

Turning Customer Experience Into Your Next E-Commerce Growth Engine

Subscribe to our newsletter