Back

Shopify Online Store 2.0 and you

It's finally here, an overhauled Online Store experience that addresses almost every complaint we as Shopify developers have raised throughout the years. Drag n drop sections outside the homepage? You got it. Metafields, without an app? Yup. A direct GitHub integration? Say no more.In this blog post, I will dive into these monumental changes and outline how we in Kvalifik will use this to supercharge our Shopify development and offerings.
November 21, 2021
By
Frederic Widding
,
Former Lead E-commerce Developer

Sections everywhere

Probably the most requested feature and the one most store owners will notice. For those not familiar with Shopify as a CMS and e-commerce platform, here's a quick summary:

Shopify handles everything related to selling products online. This includes setting up products, managing inventory, accepting payments, handling customer email notifications, and order fullfillment It also includes an online storefront where customers can discover and purchase products.

As a CMS the storefront originally offered by Shopify was limited compared to traditional systems such as WordPress. The entire front-end for Shopify is determined by a theme and is either bought 'off the rack' or tailored to your store by people like us.

Previously, you had product pages and subpages, but these were static, and changing these required theme development. The homepage was special since it had dynamic, drag n' droppable content sections that let store owners build their own storefronts. You couldn't create a new, unique landing page for your new product drops without hiring a developer to set up a template for you. Want to add new data fields for your products so you can show customers how large it is? That required development and a third-party app.

This has all changed now.

In the new Online Store 2.0, every page has access to the same drag n' drop builder as the frontpage, and store owners can create as many custom templates as they want, directly from the theme editor.

A robust development toolset

This new update to Shopify also improves the toolset available to us as theme developers, allowing us to build even better themes.

At Kvalifik we had already built a framework around theme development, which let us utilize modern development practices, such as Continuous Integration & Delivery (CI/CD), when developing. We did this by integrating GitHub and two store environments, a development and a production store, into our workflow. When working on a store, we would push our code to a development store, QA the changes, and then, through our CI/CD pipeline, move it to a staging theme on the live production store. This gave us a final checkpoint before going live, where we could test any changes with live products etc. Finally, once everything was approved, we just pushed the latest changes to the live store; no theme switching or client involvement; just a continuous stream of features, bug fixes, and codes.

Now Shopify has greatly simplified this process for us. They've built a brand new CLI tool, and let us link a GitHub repository directly to a Shopify store. Now robust CI/CD flows are easier than ever to implement and will cut down on time spent setting up new projects.

Tools that guarantee high quality & performant storefronts

The new CLI also offers a built-in linter, which can be seen as a spell-check for your code; it runs through the entire theme and checks if the code matches the best practices set out by Shopify. This way, we can ensure that all themes shipped by us, live up to the best development practices.

There's also a brand new Lighthouse tool available, which lets us test a store's Lighthouse score as part of our CI/CD. If the score falls below a threshold, we can decide to stop the deployment, go back and see what has changed since last time we passed. This way, we can guarantee that any code we deploy, won't harm store performance. This is both great for customer UX when navigating a webpage, but also crucial for SEO as Google recently started looking at page speed when ranking webpages.

What does this mean for existing Shopify stores?

The new Online Store 2.0 and all its store owner improvements went live during July, so you've already got most of this - no work required. What does require some work, is getting sections everywhere set up in your theme. This is luckily a minor change that can easily be done and is probably already available as an update to your existing theme. If not, then we at Kvalifik offer an upgrade package where we update your existing theme templates so they work with sections anywhere. We also lint your theme and make sure everything is good to go in terms of code standards.

If you're interested in getting a check-up for your store, please contact our E-Commerce Consultant Rebecca, at rebecca@kvalifik.dk.

Keep reading