8 Development Trends You Need to Know to Successfully Build for Shopify in 2022

As the digital transformation of commerce continues at a rapid pace, it’s more important than ever to pay attention to the underlying technology that powers Shopify stores and apps and optimize it wherever possible.

To meet increased customer expectations and get ahead of the competition, facets such as mobile-first design, security, performance, and accessibility are now becoming table stakes for merchants to provide a smooth experience.

“These are expected to be implemented by default,” points outScott Vinkle, accessibility specialist at Shopify. “Shifting accessibility leftin the product workflow is one way to avoid creating access barriers in production and costly sprints to retrofit. But don't expect things to beWCAG-compliant overnight. Accessibility is a marathon, and change takes time. Accessibility is about progress, not perfection. The important thing is to start and keep improving over time.”

App and theme developers have a ton of tools and techniques at their disposal that enable them to build versatile, cutting-edge experiences for their clients. Sometimes, however, it can be difficult to see beyond the hype and the buzzwords. So in this article, we identify eight practical development trends, recommended by Shopify partners and experts, that you should consider and act upon in 2022.

1. Design your app for headless from day one

You’ve undoubtedly heard the word “headless” flying around the ecommerce ecosystem in the last couple of years, and with the recent release ofHydrogen, a React-based framework for building custom storefronts, Shopify has made its own steps towards headless commerce.

While there’s plenty of ongoing discussion about whatheadless commercereally means, and当向下无头路线是有意义的merchants, Gavin Ballard, founder and CEO of Shopify Plus partnersDisco Labs, believes that applications designed with headless in mind from day one will have a significant competitive advantage in 2022 and beyond.

“如果我们认为“无头”只是means giving merchants much more control over customer touchpoints—whether that’s an online store, mobile app, or in-store experience—then I think it’s clear that developers building apps for those merchants need to make it as easy as possible to serve those touchpoints,” he explains.

Why building for headless benefits app developers

Ballard believes designing for headless drives better API design, ensuring developers don’t tie their solution to a single platform or context.

“It forces you to think about all the different contexts in which a merchant might be using your service and present a coherent, API-first solution that’ll work for all of them,” he says.

巴拉德提供的例子Shopify评论美联社p making content available on a product page. While one route would be to provide some Liquid snippets to render those reviews from metafields attached to the product, that confines the solution to merchants using a Liquid-based online store template.

Instead, Ballard suggests, the app developer can consider a general-purpose JSON API that pulls content directly from the app—a solution that will not only work for Liquid-based store templates, but also for headless storefronts, dedicated product mini-sites, mobile apps, or an iPad sitting next to the product in-store.

“Designing your APIs in this way can really reduce your overhead when it comes to maintaining integration points, support, and documentation,” Ballard advises, adding that “there’s also the benefit of being able to stick with the merchant when they change platforms or front end approaches.”

Considerations when designing for headless

Ballard suggests the following best practices to consider when designing for headless:

1. Maintain an independent domain model:Don’t tie your application too closely to data structures or concepts that may only be available on one particular platform or context.

2. Choose an appropriate API stack:Think about how and where your API is most likely to be used and let that drive how you expose your service. Do you have a complex, deeply nested data domain that’s likely to be heavily used by the front end similar to Shopify’s Storefront API? Then perhaps a public-facingGraphQLendpoint makes sense. Simpler domain, with a need to support clients on both the front and backend? Then a series of REST/JSON endpoints might be more appropriate.

3. Understand API usage patterns:无头只读美国api经常看到重多了ge than a “regular” admin-focused API, as they’re often used in ways that result in every customer pageview triggering a call (think of the reviews loading on every product page as an example). Focus heavily on understanding these usage patterns and where you can leverage caching in the browser, via the HTTP protocol, and in-memory on the server side to minimize load on your application.

4. Use headless-friendly authentication methods:Many applications require securely authenticated customer access to be useful—think of subscription management tools as an example. Rather than rely on a storefront-specific mechanism for authentication (say, via Shopify Liquid tags), you can explore more modern and flexible approaches such asCustomer JWTs.

5. Invest in the developer experience:Headless storefront implementations often involve custom development, so it’s even more critical than usual for your application to have excellent documentation around how your APIs work, paired with code snippets and practical examples. You can take this further by developing tooling and client libraries that wrap your headless API in simple, easy-to-use modules.

2. Optimize your front-andbackend performance

Performance has been an ongoing trend in the Shopify ecosystem for a while. Much of the emphasis so far has been on front end performance, calling on apps to have as little impact on a customer’s browsing experience of the storefront as possible.

Kieran Masterton, owner/developer ofSmart Order Notifications, previously part of the API developer experience team at Shopify, thinks that in 2022 this trend will continue to the backend.

“With the enormous growth of Shopify’s platform comes increased pressure on apps to keep up with the deluge of requests from users, as well as from Shopify in the form of webhooks, particularly around Black Friday and Cyber Monday,” Masterton explains. “Like many app developers I watched as the average webhook response time for all Shopify Apps rose hour by hour during the biggest sales weekend of the year.”

Masterton recommends that app developers now focus on the following:

• Return to your app metrics from the busiest periods of 2021
• Review the performance of your applications
• Tune those slow running processes and queries
• Take the time to decouple your incoming webhooks from your core application andmove them to a serverless architecture, if you haven’t done so already

3. Implement sustainable development practices

The global pandemic has significantly increased awareness of digital technologies’ impact on the environment. The conscious consumer pays more attention to sustainability and ethics when making buying decisions and expects merchants (and the developers that support them) to hold planet-saving credentials.

Tom Locke, creative director and founder of Shopify Expert agencyNoughts & Ones, believes developers need to be guided by a number of key principles (which he calls theConscious Developmentframework) to satisfy growing expectations and ensure continued success. Locke recommends you to be…

• Design-conscious: Apply low-impact principles to design and UX, such as muted color palettes to reduce light emitted on-screen
• Code-conscious: Shrink scripts, compress downloads, set appropriate caching times, combine files, promote code reuse, and go headless withHydrogenwhere necessary
• People-conscious: Accessibility needs to play a key role in both design and delivery, and stores and apps need to be accessible for all by achieving a WCAG AA rating as a minimum
• Partner-conscious: Only bring tech partners into a project that meet your standards and scrutinize their conscious credentials such as green hosting beforehand
• Performance-conscious: Apply an overall website 'budget' as a great way to ensure that performance across the whole site is kept in check.

You might also like:Building a Shopify App That Makes a Positive Difference in the World (And Makes a Profit).

4. Use Shopify’s Ajax API to improve customer experience with no extra page-load

Danny Morgan, technical lead at Shopify Plus agencyUnderwaterpistol, thinks the most powerful under-utilized feature available to theme developers worth paying attention to in 2022 is theAjax API.

“Most already know about the cart and to a lesser degree the product endpoints but the product recommendations and predictive search endpointsdon’t yet get the love they deserve,” he points out. “TheSection Rendering APIis similar and massively under-utilized too, although it isn’t technically a part of the Ajax API.”

Morgan explains that these tools come into their own when designing a standard collection page with a grid of products. Using these native endpoints, you can build in:

• Ajax filtering, right down to variants and metafields, without reloading the page
• Ajax pagination, allowing you to get page 2, 3, 4 etc. without reloading the page
• Adynamic quick shop popupwith product info, includingalternate product recommendations
• Asearch bar with predictive as-you-type results

All of that is possible with no third parties and no performance hit on page load. “I think we’re in a period where site speed is everything, and that’s what makes these tools so vital for theme developers,” Morgan believes. “Plus, when you have more code ownership and rely less on third parties, you get much more room to customize, which means better aesthetics, more bespoke functionality, and as much optimization as you can bear. The Ajax API is the simplest thing theme developers can learn about to step up their game in 2022.”

5. Use native metafields to add more custom options for merchants

Anne Thomas, co-founder ofDesign Packs, an app to help merchants extend their Shopify Themes with add-on sections and templates, believes 2022 is the year to take advantage ofnative metafields.

“They give us the ability to add new custom fields right from the Shopify admin,” she explains. “You are no longer limited by the existing data types such as vendor, type, collections, or tags. Metafields are applied to either a product or a variant and can hold a wide variety of data including text inputs, measurement, file uploads, other products, and even a date picker.”

Thomas reveals that a common request from merchants is showing different text content depending on the variant selected, for example a different ingredient list or set of features. While there are several apps that will accomplish this, metafields enable you to create a field that will associate the text with a specific variant. This makes it easier for the merchant to maintain in the long run. To find out how to do this in practice, check outCode Shopify’s tutorial on using metafields for unique variant descriptions.

Metafield values can also be dynamically pulled into theme text content areas for stores updated toOnline Store 2.0. “This means that merchants have more control over where these dynamic values appear on their product page,” Thomas explains. “A small caveat is that native metafields are not available on collections, customers, orders, blogs or articles, but we're hopeful that Shopify rolls out those updates soon. In the meantime, there are plenty of use cases such as custom icons, event dates, washing instructions and more that can be implemented.”

6. Create photorealistic 3D models

Accelerated by the COVID-19 pandemic, which has made it more difficult to run live photoshoots, product photography is increasingly being replaced by 3D renders. Photorealistic representations reduce the cost, are more environmentally friendly, and are a better solution than 2D illustrations when the physical products do not yet exist. Also, 3D product visuals can create a more engaging customer experience.

“3D product renders give a product more life and tactility,” explains David Wagoner, co-founder and CMO of Shopify Plus ExpertsP3 Media. “Customers can preview it in their own home, in their preferred style, as a virtual try-on augmented reality experience, before it ships. For example, you can put on sunglasses and try out different colors without having to go to a physical store.”

3D tools that enable precise realism and meticulous detail are now widely available and getting more affordable and accessible. It’s never been easier to learn 3D design, and in 2022 we’ll see a lot more of it.

7. Prevent race conditions between apps

On average, every Shopify merchant uses six apps to run their business but often those six apps will be operated by six completely different developers. Steve Jones and Alex Dover, both co-founders of Shopify app developersUnion Works, therefore recommend being mindful that other installed apps could be trying to perform actions on a Shopify resource simultaneously, such as applying tags to an order.

“This can often trigger a race condition between apps, whereby the app that processes its changes last will overwrite any values previously applied by other apps, which can be hugely frustrating for merchants and almost impossible to troubleshoot without contacting each app support team in turn for help,” Jones cautions.

To reduce the likelihood of these race conditions occurring, Jones and Dover suggest the following techniques:

Go and get the latest order info

Don't simply base your app's actions on the data contained within a webhook. Go and fetch the latest order, customer, or product data from Shopify before making any changes to it.

Use GraphQL mutations instead of REST

If you need to add or remove tags from an order, draft order, customer, or product, then using GraphQL mutations will not only save you time and resources, it will also prevent you from overwriting any tags applied by other apps.

Let's look at how both methods work. Here is how to apply a tag to an order using the REST API:

1. Fetch the order details via the REST API
2. Extract the tags from the data and place them into an array
3. Add any new tags into the array
4. Convert the array back to a comma-separated string and PUT the updated order tags back onto the order via the REST API

This requires two calls to the API and some manipulation of the data. During this time, the order tags field could have changed. This would result in some of the order tags being removed from the order entirely.

Using the GraphQL mutationtagsAdd, however, avoids this issue altogether.

ThetagsAddmutation is unconcerned with the existing order tags. Instead, the mutation merely asks you to specify the tags that you wish to apply to the order and Shopify takes care of it. No race condition and no overwritten tags. Simple.

Build in a delay feature

Consider introducing the ability for merchants to set a delay in your app. Allowing a period of time to elapse before your app processes a webhook can give other apps the time they need to finish processing their updates, reducing the chance of data being overwritten.

Jones points out that there is a strong community feel amongst Shopify app developers, but this doesn't always prevent problems from arising due to app incompatibility. “Understanding that we have a responsibility to be good ecosystem citizens will not only benefit your merchants,” he says, “it will also reduce the number of support issues you receive related to overwritten data and ultimately, a reduction in churn.”

8. Consider the headspace cost of complexity

Ecommerce growth consultantGalen King, founder and strategic director of Shopify Plus agencyLucid, cautions that a lot of developers get hung up on the technicalities and lose focus on the foundational principles behind developing custom Shopify sites. In 2022, as the pace of work accelerates even more, he says it’s crucial to consider not only the time it might take to design and build a solution but also the headspace cost of the work.

“Part of the joy of being a developer is tackling new challenges,” King points out. “Agooddeveloper is inherently curious by nature and able to visualize potential solutions quickly—even if they haven’t come across a specific problem before.”

King explains that agreatdeveloper, on the other hand, is also pragmatic and somewhat cynical by nature. Their excitement about the challenge is more about exploringwhythe client thinks they need the solution before defining what it is and how to build it. King suggests mentally challenging assumptions from the very outset, firmly but gently pushing back on complexity, and always striving for the simplest approach.

“可能有一个担心,一个简单的解决方案反射ects poorly on your expertise as a developer,” King explains. “But on the contrary, building a complicated solution to a complex problem is rarely the best outcome. Do not underestimate the headspace cost of complexity. It’s likely your client doesn’t really know what they need, and they certainly don’t understand what is needed to get them there. It’s your job as a developer to guide them towards the simplest, most functional outcome that meets their goals, budget, and timeline—based on your expertise and experience.”

Regularly review and streamline your tech stack

Whatever you do in 2022, it’s essential to review your technology stack andtest your themes, sites, and apps before releasing them into the wild. Performance remains a key concern for merchants. According to Derric Haynie, founder ofEcommercetech.io, it’s in the top three along with return on ad spend and retention. Make sure your app doesn’t affect page load time, and use JavaScript responsibly. Frameworks like React will remain important this year, but they can have a significant impact on performance. Vanilla JavaScript is usually good enough for most simple projects.

Also ensure that your app isn’t injecting code into a theme and not removing it upon uninstall, which is bad for the overall merchant experience. “One day soon there may be apps that check for this and ‘flag’ you as a bad actor,” Haynie cautions. “Just like when you’re camping in the great outdoors, make sure you don’t leave any trash behind!”

In the end, don’t use new tech for the sake of it. If you implement a new tool or emerging technology, it has to make sense for the brand, the product, and the specific project you’re working on. Keep the tips outlined in this article in mind when you build for Shopify in 2022, and you’ll set your clients and customers (and yourself!) up for success.

Future of Commerce report:The ecommerce trends, insights, and advice you need to succeed in 2022.