In the last article, we discussed the pros and cons of a headless E-Commerce site. Now it’s time to compare the two leading headless platforms, Shopify and Swell, head to head. Each of these platforms has strengths and weaknesses, but only you can decide what’s the best option for your E-Commerce site.

The Shopify E-Commerce platform is the clear market leader, compared to Swell. Shopify is synonymous with E-Commerce and is often the first platform most people will mention when talking about E-Commerce. Over 1 million E-Commerce businesses use Shopify in over 175 countries. 

Shopify storefronts are highly popular, chosen by top brands like Pepsi and Staples. A quarter of Shopify’s revenue comes from major enterprises like Nestle and Unilever. Clearly, Shopify offers a great E-Commerce platform to attract large corporations. 

2. Storefront API offers great headless integration

Shopify makes it easy to integrate it into a headless site, using their GraphQL Storefront API. Developers can easily build fast and unique customer experiences, using Shopify’s API libraries. Choose from a long list of popular frameworks like:

Shopify has thousands of integrations and third-party apps that can be used to enhance your E-Commerce site. Most established Shopify owners incorporated a handful of integrations, while as many as 35% use up to 10 integrations.  

Leverage integrations to bring new customers to the storefront and increase your sales. Connect your business systems and build out the customer experience from end to end. With integrations and third-party apps, you can expand to new digital changes, personalize outreach to your established customers, and offer targeted promotions depending on what a visitor is doing.  

Shopify has its own app store, where you can search through thousands of useful integrations. You can find an integration or third-party app for pretty much anything. Shopify offers all of the favorites like MailChimp, Printify, Google, and Instafeed, plus smaller niche integrations.

With a million storefronts using Shopify, there’s a massive community surrounding the platform. 

Shopify’s vibrant community makes your job as a storefront owner, much easier. Find and connect with developers, brands, and storefront owners from around the world. Enjoy the constant supply of Shopify talent and stay up-to-date on the latest E-Commerce trends. 

Shopify wasn’t built with the headless approach in mind. Shopify has been altered to meet the growing demand for headless options. This means Shopify is not as customizable or flexible as an E-Commerce platform specifically built to support headless architecture. 

2. Extremely Limited in Options and Variants 

Shopify is not designed to accommodate options and variants for your products. You are limited to 3 options and 100 variants per product. That sounds like enough right? Well… it’s not. If you sell customizable products on your storefront, you will quickly experience this limitation. Let’s break it down so you can better understand how limiting this is:

Imagine you sell a shirt with three options:

If you want to add in another option, like length, width, custom text, or whatever else you can image, you are stuck. You have to remove an option first. 

Now imagine the variations for these three options:

Color: Red, Blue, Yellow, Green, Orange, Black, Gray

Size has four possible values, color has seven, and style has three. Multiply these together (3 x 7 x 4), and you are already at 84 variants. You can’t add one more value to any of your options, without exceeding the 100 variants rules. 

In an E-Commerce landscape where options and size inclusivity is king, this presents a major problem. Your customers will complain that you don’t carry your size or have the product in enough colors or variations.  

If you want to grow into an international brand, with customers around the world, you need proper localization features. Shopify makes you jump through hurdles to have all your product names, option names, and variant names translated to the correct language to suit international visitors. You’ll need to use a separate app from the Shopify app store because translation features aren’t natively supported for your entire site.

The goal of a headless platform is to customize to suit your customer’s expectations. Whatever you can dream up you should be able to implement. Shopify falls short, especially for checkout customizations.  

You’re limited to a select number of styling options for your checkout pages. If you want to make changes outside of these options, you’re forced to upgrade to Shopify Plus. Shopify Plus will run you an additional $2000 (or more) per month, just so you can add custom checkout scripts. 

Once you upgrade to Shopify Plus, you can edit the checkout.scss.liquid assets. But shouldn’t this customization just be included with standard Shopify?

Customers like to see what they’re buying before they commit to a purchase. They want to look at products from different angles or, in the case of clothing, on different models. Shopify limits your ability to meet this customer expectation, by only supporting one image per variant. 

Selling a shirt with designs on the front and back? Well, you have to choose which side of the shirt to show. Selling a watch with numerous interesting design features? Well, you can’t showcase each feature, you’ve got to select a single photo to represent that variant. 

One image per variation is a major limitation as an E-Commerce site, especially if you’re competing with storefronts that showcase multiple product images per variation.

5. Custom Attributes Not Natively Supported

If you want to enhance your product descriptions with custom attributes, you can’t do that out-of-the-box with Shopify. You have one description field for each product, and that’s it. If you want to expand the description into several key places on the product page and pair these with images, you have to use a workaround. 

You’ll need to use a separate headless CMS if you want to add additional text, images, or other data for a product. Of course, you can use Shopify meta fields, but these are a poor choice limited only to text.  

Swell was designed specifically for a headless and API-first approach. This means the Swell platform was built around the concepts of customization and flexibility. With Swell, you create whatever kind of storefront you can imagine. 

Swell takes a native approach to localization features, allowing you to extend your business into near areas of the world, without any hassle. All aspects of translation are natively built in, so that currencies, pricing adjustments, and individual fields are automatically translated. You’ll enjoy the ability to set pricing adjustments for products and variants and individual currencies. Adjust prices up or down for specific locales depending on current market trends.

Don’t worry that your products have too many variations or options to be displayed on your website. With Swell, you aren’t limited to a discrete number of variations or options. You can offer products to your customers with 10, 15, or even 20 options and thousands of variants without an issue.

Your customers will love the improved range of product offerings. They can select the exact color or size of the product they’re looking for and don’t have to settle. Customers often shop for a very specific product in mind, and if they can’t find that color, pattern, material, or size within your store, they’ll go elsewhere. The competitive advantage of unlimited product variations and options cannot be understated. 

4. Basic Checkout Customizations + Scripts

Swell offers all the most popular basic checkout customizations that customers love. Tailor the checkout page to match your site’s branding. Add express checkout features and gift options. You can insert scripts, something you can’t do without purchasing Shopify Plus.  

You can even create a custom checkout experience, although this is a huge undertaking and is not recommended in most cases. 

Feel free to take as many product photos as you want for your product variants. Using the Swell platform means you’re not limited to just one image per variant. If you want to showcase different aspects of a variant, you are free to do so. Your customers will appreciate the improved product photography.

Make your E-Commerce site stand out with custom attributes. Enhances your typical product descriptions by adding custom product attributes in the form of text, images, and other mediums. If your products have key selling points that you want to stand out, you can make that happen with Swell’s unlimited custom attributes option.

Storefront owners, like you, are more likely to be comfortable with an established brand within the E-Commerce space. Swell is a new E-Commerce platform, and although it offers compelling features and exceptional customizability, it’s still finding its way into the market. 

If you choose Swell, you may be one of the earliest storefronts on their platform. There’s lots of exciting value there, but it can be scary from a business perspective. 

2. Limited Integrations and Third-Party Apps

Swell is still new to the market and integrations take time to develop. Swell lacks some important integrations that are popular with Shopify storefront owners, like PIM systems and delivery providers. If you rely on these integrations and can’t imagine your E-Commerce site without them, this can make it hard to switch. 

Swell currently has 40 integrations available on the platform and is adding more all the time. Swell plans to add an app store, but in the meantime, they are focusing on bringing on popular integration partners. They’ve got most of the big names already, such as PayPal, Apple Pay, Klarna, MailChimp, Stripe, and Slack. 

Because Swell is new to the E-Commerce market, its community is very small compared to Shopify’s. It’s definitely more challenging to find collaborators, developers, and entrepreneurs that are familiar with Swell at this time. But as the platform grows, so too will its community. Who knows, you may be a part of that growth if you decide to switch to the platform!

Swell or Shopify: Selecting a Headless E-Commerce Platform

So what’s the verdict? How do you pick one headless E-Commerce platform, when both Shopify and Swell are excellent options? Well, it comes down to looking at your current store's limitations and needs. There’s really not a one-size-fits-all when it comes to headless E-Commerce platforms. Only you know what kind of consumers you’re targeting and what kind of products you want to sell. 

If you want to curate an E-Commerce site that offers a lot of product variants and showcases products with excellent product photography, targeted product descriptions, and innovative product pages, Swell is your best choice. Swell is also a great choice for storefronts selling technical products with lots of specifications and other information that customers find valuable when shopping. Shopify can’t compete with the level of customization that Swell offers for product pages. 

But if your E-Commerce site is heavily reliant on third-party apps and integrations, and less focused on detailed product marketing, Shopify is the best recommendation. Shopify’s thousands and thousands of integrations, provide unique ways to connect your storefront to different services, social media, and platforms. Some product lines just don’t need all the fluff and design choices Swell provides. 

Swell vs Shopify - The best headlesss E-Commerce platform

Headless is a decoupled e-commerce architecture structure emerging as an alternative to traditional monolithic architecture. Monolithic software architecture keeps all frontend and backend assets on the same platform. It’s stable and easy to set up, but good luck customizing, scaling, or maintaining it to meet modern e-commerce expectations. 

Headless e-commerce decouples the frontend from the backend so that these systems don’t influence each other:

Backend – Server side of your e-commerce website, backend systems manage inventory, orders, and customer information

Frontend – Client side of your e-commerce website, displays the UI, images, and other elements that your customers interact with

Frontend developers and designers have significantly more freedom to dream and design using headless architecture. The frontend application is entirely separate from the backend code, only interacting with the backend using APIs. Headless architecture removes the most frustrating part of a frontend developer's job, the backend considerations. Developers enjoy the flexibility headless offers to the development process.  

Your business can develop the user experiences you want across all digital channels using headless technology. You aren’t tied to a single website layout, structure, branding, or experience. Productivity is accelerated, and new frontend functionality and experiences are deployed on faster timelines (following initial setup). 

Headless architecture is gaining traction in the e-commerce world because the business benefits are hard to ignore:

1. Unlimited Customization for Logic & Design

With a headless architecture, developers don’t have to consider the backend logic and how changes will affect the entire codebase. Frontend developers can use any popular frontend framework, like React, Vue.js, Angular, and others.

Your e-commerce business can easily build a custom user experience that suits your brand. Collect customer data and leverage it to create unique experiences for consumers that they can’t find elsewhere. 

How many of your visitors are converting into customers? Improving your shopper's experience with a personalized e-commerce site can make a big difference in conversion rate.

Unfortunately, the conversion rate is notoriously hard to pin down. Most e-commerce sites have a conversion rate of 1.8 to 6.25%. If you want to make more sales, then you need to build an e-commerce website that draws visitors in, showcases your products, and convinces shoppers that they need your products. 

By going headless, you can implement quality of life improvements that shoppers really enjoy, such as:

Recommended products based on visitor’s previous search history or clicks

These features are hard to roll out using a monolithic architecture but are a relative breeze with headless technology. E-commerce sites that have already gone headless report a 20 to 30% improvement in conversion rates. That’s a major win for any business.

It’s 2022, your e-commerce website needs to be fast. Customers won’t wait around for your website to load. 40% of consumers say they will abandon a site if it takes more than 3 seconds to load. There’s no point in adding new functionality and layouts if the user never gets to see it because they click off the page before it loads.

Users start to feel the lag in their experience when a UI response takes more than 0.1 seconds. Research suggests that reducing website load time by 0.1s can increase conversion rates by as much as 8%. So why is headless a better option for a faster website?

Well, it goes back to the monolithic architecture of current e-commerce platforms. Third-party integrations and plugins are the only way to get the customization and functionality when working with traditional architecture. E-commerce sites start adding integrations left and right, and before you know it, the system is bogged down. Every time a page loads with all of your plugins, the requests must pass through a series of steps and checks, making for a sluggish shopping experience. 

With headless, these functions and services can be built directly into the platform API. Ditch monolithic architecture and try headless if you want an efficient website that delivers a snappy user experience.

It would be irresponsible not to mention some of the challenges that a headless approach presents for e-commerce sites wanting to transition:

Getting started with headless e-commerce presents more of an uphill climb than traditional monolithic e-commerce setups. Realistically the process needs to walk through key design and development steps, to result in a high-quality e-commerce website:

UX – Plan out the page structure and content of your site in a few workshops with a branding agency to give customers a comprehensive buyer journey

UI – Expect to spend a few weeks working with a designer to realize your page designs

Development – Web developers will build your customized website from the ground up. Expect this step to take the longest, potentially a few months depending on the size of your site. 

Put it all together, and it may take 3 to 6 months to implement a headless e-commerce site from start to finish. Traditional e-commerce sites take a fraction of the time but have a fraction of the customizability and flexibility.  

Headless implementation can be more costly upfront, than traditional e-commerce architecture. You’ll need to hire developers (if you don’t already have them on the books) to build the functionality your customers want and expect. You might need to consult with UI designers and other e-commerce professionals to create an intuitive site with a seamless shopping experience. 

But you shouldn’t stay on an outdated platform because of the initial investment. The cost burden is significantly reduced after launch, and the return on investment gained by new shoppers and a higher conversion rate can more than cover the move. 

3. Multiple Technologies Working Together = More Complicated

If you’re a tech-savvy e-commerce owner, you might have developed or implemented some features with a monolithic architecture. This may not be possible when you switch to a headless platform.  

The customizability of headless means more technologies working together. If you’re not well-versed in APIs and other development tools, you’ll need to leave the complicated stuff to a developer. 

In our next article, we compare the two leading headless platforms, Shopify and Swell, head to head. Learn what’s the best option for your e-commerce business.

Headless E-Commerce

Largest greek products e-commerce site selling more than 1000 greek products in 5 different languages worldwide.

This project is actively maintained in collaboration with With Love Internet.

Advice on technical issues regarding integrated e-commerce services

Greek Flavours

We developed a new intranet site for Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY. It serves as the internal communication of services and gives the editors of the website the possibility to change contents and structures independently and individually.

The old Siemens AI@CT site is based on an outdated web architecture, which causes several problems:

No responsive behavior at different screen sizes

Design restrictions due to technology limitations

In order to present and sell training, knowledge and processes of Siemens AI@CT internally, the current site needs to be redeveloped. A new high-speed web framework is intended to perfect the loading time of pages and also give editors of the site the ability to easily and quickly add and customize content. For this purpose, an individually adapted CMS shall be integrated into the site.

We built the new website using the Gatsby component-based JavaScript framework. This allowed us to create pages with the fastest possible loading time. Long cluttered pages could thus be split into several shorter subpages.

video-siemens-trimmed.mp4

To maintain the corporate identity of Siemens, we integrated the Siemens-internal design theme into the new website. Design elements and functions, which were not feasible with the old technology, were rethought based on CI guidelines, designed and animated.

The new status bar now guides visitors clearly through the processes displayed on the page. It shows the user's current scroll position and, unlike before, now offers a seamless experience on mobile devices as well.

Markdown files make up an individualized and function-specific content management system. Texts, images, icons, pages and links can be easily edited and added with it. This does not require a technical background and the function of the page can not be affected unintentionally.

Content such as these texts about a training offered (highlighted in red) can be changed very intuitively via Markdown files. Text formatting, metadata and insertion of components can be done via simple codings.

Using the "Use Case Explorer", projects can be intelligently filtered and displayed according to several criteria. Clicking on the respective project displays further detailed information. The page makes use of an existing internal API in which the projects are stored.

Siemens AI@CT

We designed and developed a new e-commerce shop for Biersafe, a beer accessory manufacturer from Germany.

An e-commerce shop for Biersafe, a beer accessory manufacturer from Germany.

BIERSAFE

Our mission was to redesign and redevelop the existing Wordpress online shop with state-of-the-art technology. The new site should improve the shopping experience and ultimately increase conversion.
Together with Biersafe we agreed on a end-to-end product development process. It encompassed several steps listed below

In a discovery session and a following branding workshop we challenged the Biersafe team against their brand. We defined the customer, revised the value proposition of Biersafe and created a compelling visual language.
We identified that Biersafe customers are largely middle aged house owners with a backyard and a big circle of friends who like to have get togethers outside.
The outcome was a branding guideline and a site structure in the form of wireframes tailored to those customers.

While the branding guidelines and wireframes layed down the foundation for the customer journey our designers translated this into a high-fidelity user interface. We put a particular focus on a design that is strongly connected to the language of the earlier created brand. We refreshed the visual language of Biersafe with a new sunny yellow color, representing beer and sunshine and a laid-back 70s typeface.
The final design included an emotional user journey throughout the landing page, a functional shop page and informational team and info pages.

In order to craft a perfectly customized and high-performant online shop we used the frontend framework GatsbyJS and integrated the e-commerce platform Shopify. Not yet adapted in the e-commerce space, the static site generation through Gatsby allows for almost unnoticeable loading times. The enhanced user experience results in lower bounce rates and higher completed purchase rates.
We added Contentful as a content mangagement system so that Biersafe can easily edit informational content and trigger new versions of the site.

Subsequently we took care of the deployment of the new site and transitioned seamlessly from the old to the new one without any downtime.
Finally we arranged a handover workshop together with Biersafe where we explained how to manage the product catalog in shopify and change content on the site.
Post delivery we continuously host, maintain and ensure the security of the site.
Prost!

We build
your app

Excyting Solutions

Excyting Solutions

E-Commerce Store

Native App

Web App

Custom Website

Latest Projects

Greek Flavours

Siemens AI@CT

BIERSAFE

We build
your
products

Latest Blog Posts

Swell vs Shopify - The best headlesss E-Commerce platform

Headless E-Commerce

Contact

We build your app

Excyting Solutions

Excyting Solutions

E-Commerce Store

Native App

Web App

Custom Website

Latest Projects

Greek Flavours

Siemens AI@CT

BIERSAFE

We build your products

Latest Blog Posts

Swell vs Shopify - The best headlesss E-Commerce platform

Headless E-Commerce

Contact

We build
your app

We build
your
products