Shopify Online Store 2.0 is finally here, and it brings forth a lot of exciting changes for developers. If you create Shopify themes and apps for a living, then you’ll definitely want to dive into the new update.
Developers will be happy to know there’s a brand-new set of tools to help create unique themes.
The update also comes with the reopening of the Shopify Theme Store to partners. You can now submit new themes for review, which is excellent news for developers.
Speaking of themes, Shopify Online Store 2.0 has some inspiring updates and improvements for store design.
Shopify’s exclusive language, Liquid, has also enjoyed a makeover. There are new input settings that allow you to add custom Liquid code straight from the editor.
So if you’re an avid Shopify developer eager to learn all the features of the new update, you’re in the right place. Join us as we unpack all the latest tools, upgrades, and requirements for Shopify Online Store 2.0.
A Revamped Theme Architecture
Developers will love to hear that the once limiting theme architecture is now gone. In the past, you could only have a set number of blocks inside your store. In addition, you could only add sections to your homepage. That was a frustrating limitation that held developers up for a long time.
Developers needed custom apps and workarounds to achieve sections on other pages.
That’s all changed with Shopify Online Store 2.0. The new theme architecture allows you to build sections on every page. That’s huge for developers. You can now personalize every page of your store with as many sections as you desire. You don’t have to make use of any third-party apps to do so, either.
How Sections Work
The folks at Shopify have taken a new approach to how storefronts render templates. You can now render each page with a JSON template. This template will list the sections of each page and stores settings data. Your store can have several template files, opening up a wide range of new possibilities.
You can map your template files to:
- Products
- Collection pages
- Custom pages
- Blog posts
- Much more
Now one store can contain different products and collections with ease. The JSON files are very flexible to work with as well. They allow you to define which sections you want to appear by default when your theme is installed. You also have control over which order your templates appear in for users.
Once you add a JSON template, it works the same way that adding dynamic sections to your homage does. You can navigate to the theme editor and choose any selection that has presets available.
Integrating Theme App Extensions with App Blocks
If you’ve developed a Shopify theme in the past, then you know that apps have no way to integrate with themes. To get around this, developers had to code an integration logic to make it work.
It was yet another time-consuming step that developers had to deal with when creating apps and themes.
Now that’s a thing of the past. Shopify has now introduced theme app extensions that developers can use. Now you can extend your apps into existing merchant themes. All you need to do so are app blocks, which are straightforward to use. An app block is simply a Liquid file that acts as an entry point for what you want to add to a theme. You can either add inline content or floating elements.
If you develop both apps and themes, you can now integrate them together. As you can imagine, this opens up all sorts of possibilities for cross-developing apps and themes that go hand-in-hand.
Built-in App Modularity
Another prominent feature of Shopify Online Store 2.0 is its built-in app modularity. What’s that? Developers can simply add, remove, and edit UI components through the theme editor.
If you’re developing your user interface with 2.0, you no longer have to access the theme’s code to make changes. Instead, you can tweak your user interface entirely through the theme editor.
That saves time for developers and also makes designing UI elements more user-friendly. You’ll enjoy much cleaner uninstalls as well. Your ghost code will automatically get removed from your system without you having to do a thing.
Hosting and Managing Assets
Adding supporting assets to your app is another process made more accessible than ever with 2.0. You can now add supporting assets to your theme app extensions through Shopify’s CDN. You can easily reference your assets from within your theme extension app blocks. That will drastically speed up your hosting.
Metafields and More Flexible Store Content
Shopify has made a lot of drastic changes to metafields. Now developers don’t have to hardcode their metafields into themes. You also won’t have to rely on APIs to make product page changes. Instead, you can use dynamic sources to insert your metafields as setting defaults.
Adding metafields without using API or code is a huge time saver for developers. You can add new spaces to pages such as size charts, ingredient lists, and more. Anything that doesn’t appear in the core store editor you can add through metafields.
Here are the other changes that Shopify Online Store 2.0 has made to metafields:
- Enhanced flexibility. There’s a far more flexible type system in place than before. It will grow over time and become tailored to your commerce data.
- Introducing standard metafields. The new standardized metafields will make themes a lot more functional upon installation. They will also work across various market verticals.
- Adding presentation hints. You won’t need to use as much custom code to render merchant data now. You can also add presentation hints to your metafields.
Metafield File Picker
Your metafields are now capable of supporting new media types. These include images, PDF files, and many more. You won’t need to hardcode assets and media into themes any longer. Instead, you can use the metafield file picker. It allows you to upload and select media on product pages without having to touch any code.
As you can tell, the team at Shopify is big about making things more user-friendly on the developer side. Lots of the new features are about eliminating the need for hardcoding by adding new tools and features.
If you upload images or other media to your theme, they will autosave in the Settings/Files section. That way, you can immediately use them again in different themes.
Let’s say that you want to include your full product warranty available for download on your store. The new file picker makes it effortless to select that file and insert it into your theme. You can do the same for size charts, product images, and any other media file.
The New Files API
You can now access the contents of your Settings/Files through a brand new files API. It’s a GraphQL API that allows you to upload and select content from Settings/Files. Now you can populate your metafields with content by quickly accessing the Settings/Files folders.
Apps can use this feature to manipulate files and images that aren’t associated with any product. That includes images used in themes.
Major Theme Editor Enhancements
It’s not just the theme architecture that’s seen a significant overhaul. The theme editor has also gone through some considerable upgrades and enhancements. That way, merchants and developers can make use of all the new improvements to the architecture.
One of the most significant new features is the tree view of all the content on a page. It’s in your sidebar, and it’s where you can hide most of your blocks. As a result, you can effortlessly edit the layout and order of the blocks on your page. All you need to do is drag and drop the elements where you want them.
New Liquid Input Settings
There is now a new Liquid input setting that lets you add custom Liquid code straight from the editor. It’s similar to the HTML setting, but it allows access to Liquid variables.
Once again, the idea here is to reduce the amount of coding you have to do. Instead of adding the code of a theme manually, you can do it through the editor. That’s especially true for adding code for apps that use the Liquid language.
Merchants will appreciate not having to deal with confusing lines of code. Developers will love the time-saving process of not having to edit code manually. It’s a win-win situation for both parties.
Brand-New Developer Tools
Okay, now let’s dive into the nitty-gritty of the new developer tools you can play with due to the update. Shopify Online Store 2.0 introduces a myriad of exciting new tools for developers.
The new tools include the Shopify GitHub integration, a new CLI tool, and Theme Check. Each of these tools will grant you many benefits, such as version control and better environments. Let’s take a close look at each tool to find out what they can do for you as a developer.
The Shopify GitHub Integration
Theme development is easier than ever to manage with the new integration with GitHub. If you didn’t know, GitHub is a website where users can easily use Git. What’s that? It’s a way to use version control when designing programs and applications.
Version control means that you don’t directly edit your original code. Instead, you make a copy of the original to edit to your heart’s content. That way, if you make any errors, you can revert to your original code.
That also frees up the ability to experiment without the risk of losing your source code. It’s for this reason that developers love to use Git when writing code.
With the new integration, you can easily add a GitHub account to your Shopify store. As a result, you can use branching and merging techniques for designing your themes.
Your changes will show up in a GitHub repo that stays in sync with all your Shopify themes. You can also collaborate with other developers on the same store by using GitHub. You can designate specific branches for other developers to code. That’s a great way to delegate responsibility while designing Shopify stores. To find out how to connect Shopify to Github visit our article at this link.
Shopify CLI Changes
The Shopify CLI tool has seen some new changes in Shopify Online Store 2.0. In the past, developers used CLI to generate Node.js and Ruby on Rails extensions. The CLI tool now includes themes, which significantly accelerates development for a few reasons. They include:
- Develop, test, and preview changes to your themes inside of a development theme
- Hot-reload Liquid and CSS section changes via the new dev server
- Use the new theme Dawn as a starting point for a new project
- Publish themes from your command line
- Run Theme Check
- Much more
As you can see, there are some exciting changes to the CLI tool for developers. You can also use development themes now. What are those? They’re hidden themes that will connect to your Shopify store while you develop. They don’t count toward your theme limit, as they’re for testing and previewing changes only.
Theme Check
The final new tool is Theme Check, a language server for JSON and Liquid. It scans your themes for any errors while highlighting best practices along the way. It can integrate with editors such as Visual Studio Code.
In a nutshell, it’s Spell Check for your Shopify Themes. It will identify many different types of issues within your code. That is an invaluable tool for developers everywhere, as nobody is immune to making mistakes.
Dawn: Shopify’s New Reference Theme
Finally, we’ll take a look at Dawn. It’s the new default theme that ties together all the brand-new features of 2.0. Dawn is lightning fast, and it’s the first source available theme with OS 2.0. It uses HTML and CSS so that it will work flawlessly across all browsers. Dawn runs a full 35 percent faster than the previous default theme, Debut.
Where to learn Shopify 2.0 theme development
If you are interested in a great course to learn about developing for the new Shopify 2.0 try out Shopify Theme Development by CodingPhase. Codingphase by Joe Santos teaches you all about the new features of Shopify online store 2.0 as you code alongside him to create a theme. I highly recommend this course as it’s easy to follow and has tons of useful information. We recommend subscribing to the diamond plan so you can have access to both the Shopify theme development courses and Shopify app development courses, while also getting access to a huge collection of programming courses you can take. You can also buy courses individually but you will end up spending more money than if you bought the diamond plan and got access to all of the Codingphase courses. If you want to get access to the Shopify theme development course and a huge collection of courses check out Codingphase at this link.
Shopify Online Store 2.0 ( quick video )
Closing Thoughts
There you have all the new features and changes of Shopify Online Store 2.0. These changes are revolutionary for both merchants and developers. If you’re a Shopify developer, then these new features are bound to make your job a lot easier. If you want some tips on how to sell your Shopify themes check our guide at this link.
To get more Shopify developer tips see our developer posts here.
