Michela Frecchiami

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

Nick Belzer

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

Davide Di Stefano

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)

How To Design the Perfect E-Commerce Product Configurator

Alessandro Desantis

With the Ecodesign for Sustainable Products Regulation (ESPR) becoming effective on July 18, 2024, Digital Product Passports (DPPs) are now set to become a reality in the European Union within the next 2-3 years.

While it is still unclear which brands the regulation will affect exactly and what requirements it will entail, if you’re a merchant that manufactures or imports their products in the EU, you should keep up to speed with the state of the legislation so that you’re not unprepared by the time DPPs become mandatory (which is expected in 2026-2027).

[Luke Hodgson at Commerce Thinking](https://www.commercethinking.com/) has published a couple of deeply researched and incredibly thoughtful articles on the subject. You can find them here:

* [How New Luxury Brands Prepare for DPP](https://www.commercethinking.com/p/how-new-luxury-brands-prepare-for)
* [Should I care about Digital Product Passports?](https://www.commercethinking.com/p/should-i-care-about-digital-product)

Because Luke has already done an outstanding job of talking about DPPs from a regulatory standpoint, we think it’s worth approaching the topic from a slightly different angle. 

More specifically, we’ll outline three ways in which brands can ride the regulatory wave the EU put in motion with the ESPR, augmenting the customer experience around their Digital Product Passports to drive growth and engagement among their audience.


## 1. Promoting Product Transparency and Circularity

We’d be remiss if we did not mention the very goal the ESPR set out to achieve, which is to promote transparency and circularity in the manufacturing and retail industry. Far from simply being a bureaucratic concern, we think the regulation both reflects and accelerates a broader shift in consumer sentiment.

The signs are strong that [consumers are getting tired](https://www.voguebusiness.com/story/consumers/why-consumers-are-questioning-luxurys-markups) of the luxury industry’s empty promises and insane markups. As a result, the consumer landscape is getting polarized: on one end, consumers look for value; on the other, they look for artisanality and sustainability. For the latter segment, DPPs are invaluable: pre-purchase, consumers can use them to evaluate a brand’s supply chain and ESG posture; post-purchase, they can learn more on the product and access end-of-life options.

Brands can lead the way here by going above and beyond what the ESPR mandates by investing in a delightful, on-brand consumption experience; by enriching the mandatory data with editorial elements that more deeply connect the consumer to the brand; and by offering easy access to resell, repair, and recycle options.

**Example:** Many Scandinavian brands [do this incredibly well.](https://www.commercethinking.com/p/scandinavia-is-years-ahead-on-sustainability) Among them, [Nudie Jeans](https://www.nudiejeans.com/) stands out for the excruciating level of detail available about the supply chain behind each one of their products and their commitment to offering clear, easily accessible end-of-life options to customers.


## 2. Collecting (and Activating) Zero-Party and First-Party Data

For all the woes suffered by the direct-to-consumer (DTC) channel in recent years, it’s still undeniable that DTC offers brands an unparalleled amount of qualitative and quantitative data. In fact, as brands move to an omnichannel-by-default strategy, they are getting more comfortable with seeing DTC as a channel dedicated almost exclusively to data acquisition , while wholesale and marketplaces are being used to pursue sustainable growth.

In the long term, we believe there’s an opportunity for DPPs to close this gap. By effectively bypassing the sales channel and giving brands a standardized way to re-connect with their end customer, no matter how the product has been purchased, brands will be able to acquire invaluable zero-party and first-party data.

As always, how brands activate this data will ultimately make or break the experience. The most obvious use cases are customer profiling and marketing (e.g., by acquiring their email address and demographics, the brand can create a direct relationship with a previously anonymous customer).

Further down the road, there’s a tangible opportunity to graduate beyond one-way data acquisition, allowing customers to also leverage their DPPs as “proof of ownership” in a centralized or decentralized digital identity system (NFTs are the usual suspect here, but by no means the only possible technology). This would enable even richer marketing activations, more accurate insights into secondary market transactions for a brand’s products, and even peer-to-peer between the brand’s customers.

**Example:** Armani partners with [Certilogo](https://certilogo.com/) to power their DPPs. When scanning a Certilogo QR code, the consumer is prompted for their email, which is shared with the brand for marketing purposes.

## 3. Creating Phygital Brand Activations

Finally, DPPs are the perfect conduit for brands looking to create phygital experiences, blending the best of the physical and digital world and allowing customers to experience the brand’s products in novel and engaging ways.

These experiences can show up in a myriad of different shapes and forms: brands can link a customer’s information to the DPP and use it for expedited in-store access; they can grant owners of certain products exclusive perks at select venues and events; or they can allow customers to redeem digital product twins and transfer them to compatible gaming or metaverse platforms.

Phygital activations makes the most sense when the brand’s products can be seamlessly integrated into the customer’s existing day-to-day, which means that collabs are key. The ESPR and broader adoption of DPPs are likely to play an important role here, normalizing the concept of phygital experiences and pushing more brands into the space.

**Example:** During the latest Hahnenkamm Races in Austria, Hugo Boss partnered with MasterCard [to bring their BOSS x Perfect Moment ski jackets to life.](https://group.hugoboss.com/en/newsroom/news/news-detail/boss-returns-to-hahnenkamm-races-as-official-presenting-partner-and-unveils-magic-moment-wearable-technology-experience) An NFC tag embedded in the jacket’s sleeve allowed the wearer to access the races, ski lifts, and an exclusive pop-up store, as well as to execute contactless credit card payments.


## Approach Digital Product Passport Investments as R&D Projects

In this article, we have only scratched the surface of the kind of activations that DPPs might enable for consumer brands. The sky’s the limit, and the nature of DPPs means that brands will be able to evolve their implementations long after a product has been sold, continuing to release new interactions that keep the customer engaged with the brand and its products.

With that said, it’s also important to be realistic about the time horizon of the ESPR’s implementation.

DPPs will not become mandatory in the EU until 2026 or 2027–even then, it’s likely that they will only be required for publicly traded organizations initially. Rolling out DPPs in compliance with the EU’s specifications will require significant investments in supply chain transparency and digital capabilities, which are not feasible to expect of smaller operators.

As such, most brands should approach DPP investments as R&D projects at this stage. Now is the time to map out your roadmap to compliance, evaluate vendors, and think about activations that go beyond the regulatory requirements and enrich your brand’s customer experience.

Above all, we urge brands to find the right balance between being ahead of their game and containing their investment. The good news about DPPs is that they are, well, digital–there will always be time to experiment and add more functionality later on. Tests can be run in small, incremental batches on select SKUs before a broader rollout is needed.

As the ESPR is rolled out and consumers start waking up to the new opportunities afforded by DPPs, we expect their usage to become more widespread among the general population. At that point, brands that had already been experimenting will have the data, capabilities, and confidence they need to finalize their implementations and translate their experiments into a tangible competitive advantage.

Digital Product Passports and Retail’s New Growth Opportunity

Alberto Vena

A couple of weeks ago, Shopify released the [Summer ’24 Edition](https://www.shopify.com/editions/summer2024). Since its humble beginnings in the [summer of ’22](https://www.shopify.com/editions/summer2022#audiences), Editions has evolved into a major biyearly marketing initiative the Shopify team uses to update their customers and the larger commerce industry about the latest product announcements, upcoming functionality, and the general direction the platform is taking.

The splashy landing pages are then coronated by several official events, earned media (including, yes, the very article you’re reading), and fringe industry gatherings aimed at creating more hype around the platform and, by extension, the hundreds of industry players that live in its shadow and participate in its ecosystem.

And since everyone and their dog has an opinion on Editions, we thought we’d be remiss not to share our take on the most exciting announcements.

In the following paragraphs, you’ll find a recap of our favorite announcements from the Shopify Summer ’24 Edition, along with our opinions on what they mean for the future of the ecosystem.

Let’s get into it!

## You Get a Market, You Get a Market, Everybody Gets a Market

Historically, internationalization on Shopify has been challenging. For a long time, brands that wanted to start selling in other countries were forced to set up expansion stores that were, effectively, completely independent of the main store. This forced brands to sync their product catalog, settings, inventory, apps, etc., across all their stores–a Sisyphean task that often required installing clunky apps.

Then, in late 2021, [Shopify released Shopify Markets](https://www.shopify.com/news/global-by-default-shopify-markets-becomes-new-global-commerce-hub-for-merchants), a game-changing feature for brands looking to sell internationally. Markets allowed brands to sell to multiple countries from a single Shopify store while still controlling product catalogs, pricing, shipping, and other configurations on a per-country basis. Markets simplified international selling on Shopify dramatically and was acclaimed positively by both agencies and brands.

One year later, [Shopify released B2B](https://www.shopify.com/enterprise/blog/b2b-on-shopify), making it easier for brands to sell wholesale. Shopify B2B allowed merchants to manage company profiles, configure B2B-specific payment methods and terms, and set up dedicated price lists. It came at a time when more brands were looking at B2B to drive profitable growth and allowed brands to manage their wholesale operations from the same platform they knew and loved for DTC.

Until now, Markets and B2B have been entirely independent, each functioning according to different rules and concepts and configured in their respective UIs. Add to this Shopify POS, [which was launched in 2013](https://www.shopify.com/news/shopify-launches-revolutionary-point-of-sale-system) and also operated as a completely separate sales channel. Understandably, this created friction for merchants, who needed to navigate a complex maze of settings and rules to determine how their brand shows up in different channels.

![](https://cdn.sanity.io/images/kqgmf0g2/production/d624cc7cae90e895dd78cf1ee360266218b672ea-1280x720.jpg?fit=clip)

In the Summer ’24 Edition, Shopify announced that [Markets will become a unified home](https://www.shopify.com/editions/summer2024#markets) to manage all of your brand’s expansion efforts, whether you’re talking about new countries, B2B, or POS. For each channel, you can now configure the product catalog, availability, pricing, and much more from a single UI, and you can even combine different types of markets (e.g., all retail stores in the UK).

This not only gives brands an unprecedented amount of flexibility, but it also dramatically reduces the operational effort of maintaining multiple sales channels.

Finally, Shopify also announced that [each market will be able to use a separate business entity](https://www.shopify.com/editions/summer2024#multiple-business-entities) for payments. This long overdue change often prevented international brands from adopting Markets, forcing them to use expansion stores with all their quirks and limitations.

Our team was pretty excited about this change: It brings much-needed consistency to several areas of the platform and unlocks a range of use cases that were not possible before, such as having completely different themes for different markets or having complete control over the product catalog available to retail stores. It all _feels_ right, as evidenced by the ecosystem’s overwhelmingly positive response.

The new Markets experience is not available to the public yet, but you can [sign up](https://www.shopify.com/editions/summer2024#markets-top-10) to get notified when it will be released.


## New Shopify POS Functionality Gives Your Retail Stores Superpowers

Besides Markets, Shopify has put a lot of effort into making sure that all the different sales channels they offer to merchants are fully integrated. In the process, they’ve resolved some annoying gotchas and inconsistencies that had bothered merchants for years and unlocked new, exciting use cases.

POS got a lot of love in this regard. First of all, the POS hardware is now available in nine new countries–Belgium, Denmark, Germany, Ireland, Italy (yay!), the Netherlands, New Zealand, Spain, and the UK. In the last few years, we’ve seen pretty strong demand for Shopify’s POS devices in Europe, so it’s great to finally be able to offer them to merchants–Shopify’s hardware is excellent, and we can’t wait to experiment with it a bit more.

Secondly, Shopify is also enabling truly unified shopping experiences with two new features that bridge the gap between online and offline:

* [Ship to store](https://www.shopify.com/editions/summer2024#ship-to-store), which boosts Shopify’s existing BOPIS (Buy Online, Pickup In Store) functionality by allowing customers to choose their favorite pickup location regardless of inventory availability. When the product is unavailable, Shopify will seamlessly orchestrate delivery to the customer’s chosen pickup point.
* [Ship from store](https://www.shopify.com/editions/summer2024#ship-from-store), which allows merchants to use their stores as last-mile fulfillment networks. Online orders will appear on the retail store’s POS interface, from which store operators can fulfill the orders or, if unable, delegate fulfillment to another location or back to a standard fulfillment center.

![](https://cdn.sanity.io/images/kqgmf0g2/production/4b3bebec01781cec89054946a6bb6a758e528894-1280x720.jpg?fit=clip)

Finally, POS became more intelligent and more integrated with the rest of the Shopify ecosystem. This includes functionality such as:

* [One-tap digital receipts](https://www.shopify.com/editions/summer2024#digital-receipts-with-opt-ins), which can be delivered by email, text, or, if the customer has a Shop Pay account, to the Shop app.
* The ability to [collect personal information](https://www.shopify.com/editions/summer2024#require-info-at-checkout) such as name and email, marketing opt-ins, and sales staff attribution at checkout.
* Automatic integration with your store’s [return rules](https://www.shopify.com/editions/summer2024#return-rules), which reduces the likelihood of out-of-policy returns.

Combined, these features allow brands to make the most of their physical stores, reducing fulfillment costs, improving the customer experience, and helping brands collect more zero-party data. In an era when all merchants are trying to do more with less, this is the sort of innovation that we like to see from Shopify.

## Checkout Is Getting a Flexibility Boost 

Shopify’s checkout has long been a significant component of the platform’s value proposition and, at the same time, one of its biggest weaknesses. While it’s great for merchants to be able to delegate compliance concerns or checkout CRO to Shopify, the lack of customizability in the checkout flow has prevented specific categories of brands from implementing their ideal customer experience or, in some instances, from adopting Shopify altogether.

Some of this rigidity is by design: Shopify doesn’t want brands to shoot themselves in their metaphorical foot by making changes that could negatively impact their conversion rates. Finding the right balance between flexibility and compliance with industry regulations is also challenging, especially with the new limitations imposed by [PCI DSS v4](https://www.shopify.com/partners/blog/checkout-compliance).

That said, Shopify has been doing some great work on this front over the last few years by adopting a two-pronged approach: They’ve been opening up the checkout to more types of customizations and more elaborate use cases, but they’ve also been forcing merchants to use a set of standardized APIs (dubbed [Checkout Extensibility](https://www.shopify.com/enterprise/blog/checkout-extensibility-winter-editions)) to alter their checkout flow.

![](https://cdn.sanity.io/images/kqgmf0g2/production/bf8f13000bd1a4fc566adcfea2f55adb32bde12a-1280x720.jpg?fit=clip)

In the latest Edition, Shopify has continued on this path by releasing a slew of new features and customization APIs for their checkout:

* [Checkout Blocks](https://www.checkoutblocks.com/), a third-party app that allowed merchants to apply complex customizations to their checkout in a no-code UI, has been acquired by Shopify and is now free for all Shopify Plus merchants. It’s a fantastic product, and we couldn’t be happier for [Gil](https://www.linkedin.com/in/gilgreenberg/) and his team!
* Checkout will soon support [split shipping](https://www.shopify.com/editions/summer2024#split-shipping), allowing customers to see when an order will be split into multiple shipments and pick a different shipping method for each shipment. On a similar note, it’s now possible to [capture partial payments](https://www.shopify.com/editions/summer2024#payment-per-fulfillment) when part of an order is fulfilled.
* In a move that will undoubtedly be appreciated by brands outside the US, Shopify is now offering the ability to implement third-party integrations for [pickup points](https://www.shopify.com/editions/summer2024#3p-pickup-points-api) (not available yet) and [address autocompletion](https://shopify.dev/docs/api/checkout-ui-extensions/unstable/targets/utility/purchase-address-autocomplete-suggest), as well as to collect region-specific [address fields](https://www.shopify.com/editions/summer2024#region-specific-addresses) and different forms of [tax ID](https://www.shopify.com/editions/summer2024#tax-id-fields) for individual and business customers.
* Developers can now use the [Checkout Branding API](https://shopify.dev/docs/apps/build/checkout/styling) (available to Shopify Plus merchants only) to configure the checkout flow’s overall styling and UI elements. Additionally, they can [pre-fill the address at checkout](https://www.shopify.com/editions/summer2024#prefilled-addresses), which is handy for gift and wedding registries and other non-traditional shopping experiences.

These changes, most of which are targeted at international brands or brands with complex use cases such as marketplaces, give merchants some much-needed flexibility while still allowing Shopify to guarantee compliance and retain control over the end-user experience. 

In fact, we were working with a couple of brands waiting for some of this functionality to switch to Shopify, and we can’t wait to try it in the wild.

## Analytics, Controls, and Automation for Operators That Mean Business

Last but not least, Shopify announced a range of new features aimed at larger, more sophisticated brands that need greater visibility into and control over their businesses.

The spotlight goes to the [new Shopify Analytics](https://www.shopify.com/editions/summer2024#rebuilt-analytics), which allows merchants to build advanced custom reports and dashboards and, soon, query their data directly using ShopifyQL. Combined, these two features unlock much greater flexibility when it comes to business analytics, reducing the need for merchants to roll out and maintain dedicated business intelligence infrastructure.

![](https://cdn.sanity.io/images/kqgmf0g2/production/b489a739028c98fd8168cafd505dd0874b2b0c52-1280x720.jpg?fit=clip)

Organization settings and staff access also received some love. While the details are not completely fleshed out yet, it looks like companies will soon be able to [manage multiple stores from a unified interface and](https://www.shopify.com/editions/summer2024#organization-settings) assign staff access through a [Role-Based Access Control (RBAC) system.](https://www.shopify.com/editions/summer2024#role-based-access-control)

Finally, Shopify is releasing several improvements for Shopify Flow, their built-in task automation platform. Flow is becoming more powerful (thanks to features such as the ability to [send direct requests to the Admin API](https://www.shopify.com/editions/summer2024#send-admin-api-in-flow)), easier to use (see the [improved UX for working with metafields](https://www.shopify.com/editions/summer2024#custom-data-for-flow)), and more convenient to debug when something goes wrong (with a [better search experience](https://www.shopify.com/editions/summer2024#search-runs-for-flow) and [manual reruns](https://www.shopify.com/editions/summer2024#manual-reruns-in-flow)).

While Flow still leaves a lot to be desired (how much longer until we can use the result of an API call inside Flow?!), it’s a robust product for automatic basic tasks in a low-code environment. In fact, we’ve been able to use it in several instances where we would have previously reached for a custom app or an external automation platform, such as Zapier.

## Hydrogen Gets The First-Class Treatment: Visual Editor and B2B Storefronts

On the headless front, much work went into creating consistency between Hydrogen’s off-the-shelf capabilities and what brands can do with Online Store.

The most prominent announcement here was the new [Hydrogen Visual Editor](https://www.shopify.com/editions/summer2024#hydrogen-visual-editor), based on an open-source solution called Utopia. The editor, which is yet to be released, will allow marketers to manage the content of their storefronts through a visual page builder.

Furthermore, the new visual editor _actually updates the underlying code_ of your storefront rather than loading content through a client-side network call. This comes with several benefits, including much faster page load times and all the goodies of Git-based version control.

In the past, we’ve had to roll out similar features manually through solutions such as Sanity and Builder.io, so it’s great to have this out of the box and officially supported by Shopify. That said, we were surprised that Shopify didn’t just acquire an established player in the space, such as [Pack](https://packdigital.com/) or [Instant](https://instant.so/), and integrated their solution natively.

We’re also still waiting for the day when Shopify will decide to unify its content management solutions, using the same technology across Online Store and Hydrogen. Perhaps this is a small step in that direction.

![](https://cdn.sanity.io/images/kqgmf0g2/production/257a779594efae973c9a1d3fe3c5d84b98eb04e0-1280x720.jpg?fit=clip)

In addition to the Visual Editor, it is now possible to launch [headless B2B storefronts](https://shopify.dev/docs/storefronts/headless/bring-your-own-stack/b2b)–a feature that was previously only available for Online Store. There’s even a [Hydrogen B2B template](https://github.com/Shopify/hydrogen/tree/main/examples/b2b) that you can leverage to speed up time-to-market if you wish.

These are the major announcements, but Shopify also announced [many additional improvements to Hydrogen](https://hydrogen.shopify.dev/update/summer-editions-24-announcing-the-hydrogen-visual-editor-and-a-ton-of-dx-improvements), such as an optimistic cart API for instantaneous cart updates, official support for Vite, native integration with Shopify Analytics and the Customer Privacy API, better environment variable management, and improved SEO tooling.

One of the main problems with headless Shopify architectures has been the feature and capability gap between Hydrogen and Online Store. There are still inconsistencies to figure out, especially when it comes to the app ecosystem. Still, with some of these announcements, it feels like we’re getting closer, which is excellent news for all merchants that need a more sophisticated storefront than what Liquid themes allow.

## There’s Much More…

In this article, we have deliberately omitted a lot of stuff, cherry-picking the announcements and capabilities that were most relevant to the work we typically do with our clients. We didn’t talk about the [improvements to Shopify Magic](https://www.shopify.com/editions/summer2024#ai-for-commerce) or all the work Shopify is doing around [third-party sales channels and Shop](https://www.shopify.com/editions/summer2024#connect-with-customers), their own marketplace. If you run a Shopify brand, we encourage you to check out [the official Editions site](https://www.shopify.com/editions/summer2024#connect-with-customers) to ensure you’re not missing anything!

That said, it’s clear that Shopify plans to continue pushing in all directions. For smaller brands, they are rolling out features that allow them to do more with less, leveraging the strength of Shopify’s ecosystem and economies of scale.

For larger brands, they’re making the platform more flexible to support more complex use cases. At the same time, though, they’re also creating consistency and feature parity across different flavors and sales channels to minimize the amount of gotchas and “insider knowledge” required to navigate the Shopify universe.

Given the size of that ecosystem, it’s an uphill battle, but if anyone has the market traction and R&D budget to pull this off, it’s Shopify–and we’re excited to be part of the ride.

Shopify Summer ’24 Edition: Are Things Getting Serious?

Daniel Bergholz

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

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

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

Let’s dive in!

## Creating Our Content Schema

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

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

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

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

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

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

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

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

This should be the end result:

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

All the files generated for Sanity Studio

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

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

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

export const schemaTypes = [banner]
```

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

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

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

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

## Connecting Hydrogen to Sanity

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

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

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

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

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

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

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

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

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

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

## Retrieving Content from Sanity

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

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

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

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

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

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

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

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

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

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

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

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

## Keep Up with The Ecosystem

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

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

How To Integrate Your Shopify Hydrogen Store with Sanity CMS

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

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

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

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

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

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

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

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

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

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

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

## #2: Put Your Pricing Front and Center

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Bonus: Optimize Your Quiz Experience

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

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

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

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

## Ready To Master Your Subscription UX?

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

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

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

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

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

Nicolò Rebughini

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

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

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

Let's dive in!

## Reactive vs. Scheduled Middleware

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

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

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

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

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

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

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

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

## Monoliths vs. Service-Oriented Architectures

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

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

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

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

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

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


## Keep Your Options Open

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

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

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

Designing and Scaling High-Throughput Shopify Middleware

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

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

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

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

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

## How Design Systems Accelerate Time to Market

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

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

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

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

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

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

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


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


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

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

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

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

## Overcoming Obstacles to Adoption

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

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

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

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

## Tips on Scaling Design Systems

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

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

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

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

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

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

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

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

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

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

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

Why E-Commerce Brands Should Have a Design System

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

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

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

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


## App Pixels

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

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

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


## Custom Pixels

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

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

With that said, Custom Pixels also have their limitations.

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

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

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


## Server-Side Tracking

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

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

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


## Checkout Extensions

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

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

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


## Session Storage

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

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

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


## Balancing Data Enrichment with Maintenance Effort

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

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

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

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

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

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

The Nebulab