If you’re a business owner or marketer considering using Shopify to create your eCommerce store, you’ll want to pay close attention to this article.
We’re about to tell you about Shopify 2.0 — including what’s new, why it’s good and what you need to do to take advantage of the update.
So whether you’re just starting out and doing your research or already a Shopify user considering an upgrade, read on for everything you need to know.
What’s covered in this post:
- A brief overview of the Shopify Store
- What is Shopify 2.0, and what are the new features?
- What is the new theme architecture?
- What do developers need to know?
- How to set up your shop on Shopify 2.0
- What should you do if your shop was created on Shopify 1.0?
- Do you have to upgrade your Shopify Store to 2.0?
1. A Brief Overview of the Shopify Store
If you’re here, you’ve either already got a Shopify store or are thinking about getting one. And if it’s the latter, you might be wondering whether a Shopify online store is the right platform for you.
If this is the case, you might be interested to read our article, “Shopify vs WooCommerce — Which is the Best One for You”.
There were 457 million buyers on Shopify in 2020 — up from 218 million in 2018 (Source: Shopify).
Here at Exposure Ninja, we love working with Shopify. It’s the right fit for you if you’re an eCommerce business looking for an online store that is easy to use with plenty of support.
Its great features allow you to track sales, create revenue reports and generate purchase orders.
The original Shopify store came loaded with 70 plug-and-play custom themes, making it easy for anyone to set up their online store in as little as 15 minutes.
Editing themes and creating custom pages was not always straightforward, but the Shopify online store 2.0 hopes to change that. Shopify merchants can now look forward to a much more flexible online store with a theme editor and theme app extensions included.
2. What Is Shopify 2.0, and What Are the New Features?
Shopify online store 2.0 is a major update to Shopify’s online store platform.
Released in June 2021, the updated online store 2.0 has seen a significant shift for Shopify into a more customisable space and one that many developers may welcome.
With one eye on user experience, Shopify has not forgotten about its many users who use the platform, thanks to its ease of use. The changes, they assure us, are “easier and more flexible”.
So what are the key new features?
- “Sections” are now available across all pages, not just confined to the homepage
- They have introduced theme app extensions
- App blocks are now available through the theme editor interface
- Add assets to your theme app extensions
- Improvements to metafields
- File picker supports image files
- A new files API
- Theme editor enhancements
- Liquid input setting.
The update includes a new reference theme called “Dawn” that is 35% faster than the previous default theme, Debut. The Shopify online store 2.0 is also open to theme submissions from developers and has improved customization options and support.
If you’re looking through the list of new features and wondering what on earth it all means, stick with us. We’ll be guiding you through everything you need to know about the online store 2.0.
3. What Is the New Theme Architecture?
Theme architecture might sound like jargon, but in simple terms, it refers to how the editor is structured.
Shopify online store 2.0 has an updated theme editor, which is good news for two reasons:
- It’s easier for non-developers to customise all pages
- It’s easier for developers to build custom themes and build integrations.
Seven new features have been added to the online store 2.0. Here we’ll look into each one in a little more detail.
Page templates now have sections
Sections are the visual components of a page on your website, for example, a banner, an image block with text or a button.
In the previous version of Shopify, only the homepage allowed you to add new sections and drag and drop to where you wanted them on your page.
It was possible to customise your sections on other pages, but not without the help of a developer.
Now merchants can customise any page on their site, including product pages, so that their online store feels fully personalised to their business.
How do they work?
- Each page can now be rendered using JSON template files
- You can set up multiple template files that map to different products
- Merchants can have different product pages, collection pages and other pages in the same store
- Merchants can define the sections and the order in which the sections should appear by default when the theme is installed
- Dynamic sections can now be added to the homepage.
Theme app extensions with app blocks
In the previous Shopify online store, there was no way for apps to integrate with the theme editor. A merchant would have needed to employ a developer to code integration with existing themes. This could cause breakages within the theme code, making it difficult to carry integrations across themes.
With the online store 2.0, a theme app extension enables developers to add features and extensions. Thanks to this, you can now add additional functionality to your Shopify stores.
Built-in App modularity
App blocks allow developers to build components to add to a theme editor without coding the integration.
What does this mean for you as a merchant? Simply put, if you want to change your theme but take an integral app with you, this is much easier and means a developer won’t need to rebuild the entire integration. It also makes it much easier to remove an app, with all ghost code removed on an uninstall.
Changes to metafields
A metafield is the space for you to add informational data about a particular asset within your website. This might be an image, list, chart or downloadable.
This new theme editor allows you to add metafields and properties without using APIs or code. This is not possible with previous functionality in Shopify’s native editing tools.
Metafields have been reworked from the ground up to be more flexible and intuitive. Now, you can create custom fields to fit your needs in minutes with the online store 2.0 advanced type system. Standard metafields have been introduced so that every theme will work out of the box in stores across different market verticals — no need for extra coding or plugin installation.
The metafield file picker makes uploading and selecting media on product pages easy. All your images saved in the Settings/Files section are immediately available for use with this new feature.
Metafields work with many media sources, such as images or PDF files.
For example, rather than coding for particular file types to each theme’s page builder content area, metafields let you upload the selected item from your phone and have it immediately appear on product pages — no need to go back into settings.
The online store 2.0 update to the File API provides merchants with new functionality and a streamlined interface for uploading files.
With this release, developers can create, choose and upload media in their Shopify stores through an easy-to-use GraphQL console inside Shopify’s Admin panel.
In addition, the API now allows access from multiple apps to use the space for files not directly related to a particular product.
Liquid Input Settings
Liquid input settings allow merchants to add custom Liquid code to pages directly from the editor with a new setting similar to the HTML one. This means you’ll have access to global variables and template-specific objects, reducing the need to change the theme code manually.
This custom Liquid code makes it easier for Shopify merchants to work with the new online store 2.0 without interfering with your theme’s code or getting app developers involved too heavily.
Get to the top of Google for free
4. What Do Developers Need to Know?
If you’re a merchant and only looking to know the basic reasons why you should switch to Shopify 2.0, then the updated theme editor should be reason enough.
But Shopify has included some new developer tools as part of the revamped online store. We’ll go over these briefly here.
The Shopify GitHub integration allows developers to easily connect to their GitHub user account with just a few clicks.
The integration between themes and GitHub will allow developers to work more efficiently when making changes. Developers can now implement workflow where they need approval before populating live sites with their updates. This now works on one platform, saving time when populating to a live theme.
Shopify CLI tool
Previously, developers may have used CLI to generate Node.js, Ruby on Rails apps and app extensions. Shopify online store 2.0 allows them to use the CLI to update development themes.
Development themes are hidden from the Shopify Admin part of the store, allowing developers to work on them. These development themes don’t count toward your theme limit, but Shopify deletes these automatically if they see inactivity on the development themes after seven days.
The new CLI tool will give you or your developer control over the theme development, editing themes and your new theme’s look. Within your new theme project, you’ll be able to view any changes happening live, interact with and customise them using the editor.
Among the new developer tools is the Theme Check — a language server that integrates with a text editor to identify issues within the code for efficient new theme development.
It’s bundled with the Shopify CLI tool, so a developer should install these together. It’s been designed thoughtfully, with error messages including a link to the failed check’s documentation.
Dawn is the new reference theme that comes as standard with the new Shopify online store 2.0. The previous default theme was Debut, and Dawn is notably faster, more flexible and more streamlined than its predecessor, making the development process much smoother.
Dawn already has JSON templates for all its pages, so it can be used as a model when unlocking sections within a new theme.
5. How to Set Up Your Shop on Shopify 2.0
Setting up a store on Shopify 2.0 is the same as the previous version of Shopify. It’s quick and easy to do, but before you get started, you should have thought about the following:
- What is the name of your business? You will be asked the name of your store right away, and it’s impossible to change this, so ensure you choose carefully. You will, however, be able to change this to a chosen domain later.
- Brand colours, fonts and a logo. You will select a theme from the Shopify theme store, but you’ll likely want to replace certain theme components with your branding.
- Images and descriptions of the products you want to sell, including UPCs, variants, shipping details and, of course, the pricing.
- How you’d like users to make payments.
- Shopify allows most options, including Paypal, Visa, Mastercard, AMEX, Apple Pay, Amazon Pay and Google Pay.
- The site structure; what pages you’d like to include and the copy you’d like to have on them. You will need to know this when you come to set up your navigation and your new pages.
- Additional elements like the metadata and SEO elements you’d like to include within your pages.
For a complete guide on setting up your Shopify store in a way that has SEO in mind, listen to our podcast, Shopify SEO for Beginners or watch the video below.
What Should You Do If Your Shop Was Created on Shopify 1.0?
If you’ve already got a Shopify online store and want to upgrade to Shopify 2.0, there are three ways available:
Visit the Shopify theme store and download one of the new Shopify themes.
Check whether your existing theme offers an updated version using online store 2.0.
Migrate your current theme templates to the new architecture.
1. Download a new theme
- Visit the Shopify theme store.
- Filter by “Theme Architecture”.
- Select “Online Store 2.0”.
- Pick your preferred theme and hit “Try Theme”.
- You only need to pay if you publish the theme to your Shopify site.
2. Update your current theme
- Visit the Shopify theme store and filter by “Online Store 2.0” as above. If your theme is available for an upgrade, you should see it there.
- Alternatively, you should have a notification in your Shopify Admin (below where it states your theme).
- Click the notification and “Add to Theme Library”.
- Any customisations made to your theme using the Theme Editor are copied over and applied to the updated theme. These include:
- Modified theme settings
- Modified page layouts, such as adding, reordering, removing, or hiding sections or blocks
- New templates
- Added, removed, or modified settings of app embeds or app extensions.
3. Migrate your theme template
This is a lengthy process and one we wouldn’t recommend unless you’re a developer.
- Use Shopify CLI tool or the code editor. You may need to install CLI.
- Ensure you’re logged in as a collaborator or as “staff” for the account you want to work on.
- Make a copy of your theme.
- Convert your current theme code from a Liquid input setting into a JSON template.
- Move any Liquid code or HTML into sections to be used in your new JSON template.
- You can read the full process here on Shopify.dev.
Do You Have to Upgrade Your Shopify Store to 2.0?
The short answer to this is no.
Shopify still provides plenty of themes compatible with the original version.
However, if you’re a store owner looking for added customisation, new page templates and custom pages, then switching to 2.0 could be a good option for you.
The latest advice by Shopify is that if you plan on using apps, you should try using app extensions to integrate with your online store. This is true if you’re submitting a new app because they must use theme extensions to integrate. Shopify plans on making this a requirement for all apps in the future.
Shopify business owner? You might enjoy reading our blog on How to Create a Winning Shopify Marketing Strategy.