Exploring the different ways of building Shopify stores

Shopify is a global e-commerce platform which allows users to build an online store swiftly and sell merchandise online through their easy-to-use dashboard.

There are different ways of creating Shopify stores. These are:

• Creating a store using one of Shopify's built-in themes
• Customizing a theme or developing your own theme
• Using Shopify Hydrogen with a headless CMS

In this article we are going to explore these options and outline their pros, cons, limitations according to different criteria, in order to give you insight into which path might be right for you.

The editing experience is a major part of creating rich content that reaches a wide audience. Shopify offers a great editing experience with their ready-made themes. You can edit content, fine-tune various theme settings and styles to your liking.

For starters, Shopify offers an amazing blog functionality on their store, where you can easily write blogs for your store, with various fields and options.

Another handy function of Shopify is out-of-the-box localization support, you can offer your store in multiple languages and have different localized versions of your store generated for you automatically by simply adding an easy-to-use app to your Shopify store.

However, as you would expect, this comes with the limitation of only being able to use content and features that are already part of the original theme. If you would like to customize more than that, then your next bet is to create your own Shopify theme or customize an existing one.

Customizing or developing a theme allows the creation of page templates, sections and blocks and the ability to use them on pages as you like in any order.

It's true that this options gives you more freedom in the sense that you can organize the content as you please but the problem is that it's still reliant on Shopify's objects, fields and their design decisions for each of the blocks in the template.

The last option is to sync your Shopify store data with a Headless CMS, like Sanity for example and build your website with Hydrogen or any other frontend framework of your choice. The main advantage of this method is that you still have the features of Shopify but additionally, the power of a dedicated robust CMS to empower it. The front-end is entirely decoupled from the back-end logic, which allows for absolute design freedom when creating the user interface.

On top of that, you have full control over the data structure and how the website is structured, built, designed and its tech stack.

One of the most vital factors for a successful ecommerce store is speed of the website, which directly impacts user experience. When it comes to performance, it's safe to assume that a custom built store using a headless CMS and Hydrogen will be vastly more performant than a store built with Shopify themes. Let us explore some reasons why.

Firstly, several Shopify themes are built using jQuery, which is outdated and not as performant as new optimised technologies. Additionally, the way Shopify renders web pages can result in slower performance. There are many complex apps and plugins that you may need for your store, which need to be bundled in the store, causing performance to suffer a huge hit. This might result in a slow Shopify store that customers wouldn't want to spend their time on.

Naturally, we have conducted various tests on several Shopify example shops that are listed on their website, and they yielded an average performance score of 40 out of 100 for mobile on PageSpeed. For comparison, we ran our demo Shopify store built with Sanity and Remix through the same performance test and it scores an excellent 98 out of 100 for performance on mobile.

In terms of developer experience, using the built-in themes of Shopify is the clear winner since it requires no coding experience or domain knowledge whatsoever as Shopify handles everything technical for you and saves you the hassle of writing code.

Therefore, a developer is not needed at all to create a Shopify store when using a built-in theme, which is amazing since you can do everything by yourself. The only issue is if you hit a limitation. For example, if you needed a specific function on your store that no Shopify apps or plugins provide, then unfortunately, you’re at the mercy of Shopify.

This might urge you to move towards customizing or developing a theme. One disadvantage of customizing Shopify themes is that it requires knowledge of Shopify's template language called Liquid, which is only specific to Shopify so some time has to be invested in learning it. Other than that, Shopify provides a wide variety of developer tools, apps and plugins to help aid your development.

Using a separate headless CMS with Hydrogen provides an amazing developer experience as well. On top of having the nifty features of a headless CMS, you have full control over the data and website so there's nothing stopping you from customizing the store as you wish, but of course, you need to have technical knowledge about creating websites.

When it comes to maintainablity, using a headless CMS and Hydrogen is the best solution. This is because for stores created using Shopify themes, you have no choice but to choose between the offered apps and plugins. If some features are lacking or something doesn't work as expected, then you have no choice but to wait for it to be fixed. On the other hand, using a headless CMS with Hydrogen gives you full control over what technologies you utilize and which packages are included, which can be swapped at your convenience.

Additionally, you have access to handy maintainability features of headless CMS. For example, Sanity allows you to go back to a previous version of a page with a single click, which can be useful in case you publish unwanted content accidentally, or wanted to rollback to a previous version of content.

By building a store through Shopify's dashboard, you are entirely dependent on Shopify for pretty much any extra functionality by using their apps or plugins. Even though Shopify offers a wide variety of plugins, you might easily hit a wall if you don’t find an app that fits your use case.

On the other hand, with a headless CMS you are able to integrate with any 3rd party package or application, and even build custom features when necessary.

Shopify offers all the basic necessities when it comes to SEO such as title, description, keywords, sharing image and canonical URL. However, if you would like extra customization and more fields then using a build-in theme is not the right option for you.

For instance, if you wanted to deindex some pages from Google, add structured data to pages or edit robots.txt file then it's not possible unless you edit the theme yourself or add it on your custom store built with a front-end framework.

At the time of writing this article (Feb 2023), in order to get access to Shopify's store building tools, you will need to have a Basic subscription plan ($29 per month).

This cost does not include any themes or plugins you might want to purchase. Paid themes on Shopify can cost up to $350 to purchase and paid plugins usually have a subscription plan more expensive than Shopify's subscription itself, so the cost can ramp up quickly.

The cheapest option is definitely using a headless CMS, since you can get by with the Lite subscription plan ($9 per month) if you do not have any use for the store building tools, and there are amazing free headless CMSes like Sanity, which charge you according to bandwidth. Depending on your use case, there might be some extra costs if you exceed the bandwidth allocated but it's still considerably cheaper than the other options.

Based on the outlined differences of the approaches, our conclusion is that if you have a limited budget or experimenting with a store and not sure it will generate revenue, it's advised to start building your store with an existing free theme since it's quick, simple and requires the least amount of work.

Otherwise, we recommend using Hydrogen with Sanity as it takes the same effort as creating or customizing a theme. Additionally, it offers better maintainability, better content management experience, and is the cheaper alternative in most cases.