If you keep up with any marketing news, or you currently host on Shopify, you may have heard about Shopify’s latest announcement — Online Store 2.0.
Online Store 2.0 opens up massive opportunities for developers building themes and apps for Shopify merchants. Shopify has rebuilt the online store experience from the ground up, and are introducing a new set of developer tools to help create amazing experiences for merchants and shoppers.
In this blog, we’ll take a look at these new tools and features to understand how they work, and how they may affect you.
The New Theme Architecture
With the earlier version of the online store, merchants were limited in the number of blocks available inside the store. Earlier, stores used to have different templates that mapped to different products. With the 2.0 version, as a merchant, you now have the option of adding sections to each new page. Earlier, you could only add sections to the homepage.
It’s possible for you to activate the templates to each page with a JSON template file that specifies the settings for the page. With this, you can list all the sections of a page, collection pages, custom pages, blog posts, and more such things.
Within the JSON template files, you can define the sections that are going to appear.
The template files dictate which sections appear by default and the order they appear in on a theme you install. Once the template is added you can add dynamic sections as theme presets by going to the theme editor.
Theme App Extensions with App Blocks
The theme app extensions for developers can help you add a number of features as well as extensions. You can extend the merchant’s site functionality with the help of this
Before, there was no way for apps to integrate with themes. As a result, developers had to code an integration logic for existing themes. This made it really difficult to make features that worked consistently across multiple themes. That’s no longer the case.
App Modularity
Another highlight is app modularity. This simply means that as a developer it’s now possible for you to add and remove UI components through the theme editor. There’s no need for you to access the theme’s code.
This gives a simple way for you to manage an app’s supporting assets. With Shopify 2.0 you can manage your app’s supporting assets and host them on the platform quite easily.
Changes to Metafields
The updated theme editor lets merchants add meta fields and properties. The good news is you don’t need either APIs or any form of coding to make that possible.
As a merchant, you’re free to add the content you like to the product page, introducing space for adding additional information that can help potential buyers, say a size chart or ingredient list. Anything that’s not likely to appear in the store editor can be updated through the meta fields.
Here are the different ways in which they modified meta fields.
Flexibility: Metafields are more flexible. This helps you safely import commerce data.
Standard meta fields: Standard meta fields make it simpler for custom themes to start working out of the box on stores across market verticals.
Presentation hints: You can add presentation hints to meta fields for rendering store data.
File Picker
Metafields now supports a lot of media like images or PDF files. Rather than hard-coding a particular file type to a theme, what a meta field file picker does is let you upload the selected media to the product pages.
The images can be accessed via the settings/files section and are for immediate use.
If you like a product warranty or sizing chart the file picker makes it easy for you to choose that particular file with simple UX. With this, the meta field is placed inside the theme itself.
Files API
With the API version 2021-07 you can use File API to create, update and delete generic files. This lets merchants reuse different files for different apps. These are added to the files page inside Shopify admin.
Developers will be able to access the settings/files through the new Files API. The GraphQL API introduced with this version makes it easy for you to upload or choose existing media files through settings/files. Apps can benefit from access to this particular area in the admin while populating meta fields through content.
This opens up opportunities for apps to use this space for files and images that aren't directly associated with a product, including images used in themes.
Liquid Input Setting
Another update to the theme editor is the Liquid input setting from which you can add custom Liquid code to pages from the editor itself.
The Liquid setting is similar to the HTML setting. The only difference is that you get access to Liquid variables. Merchants can access both the global and template-specific Liquid objects.
The setting reduces the need for merchants to manually change the code of any theme when adding code for apps using Liquid.
Use the developer documentation, or view the new theme from Dawn’s custom-liquid section.
With this it’s easy for you to make independent decisions about the store as a developer freeing up your time to focus on creative integrations and solutions.
New Developer Tools
Online store 2.0 opens a whole array of opportunities for developers to build new apps and themes for you. The new developer tools integrate and assist with testing, developing, and deploying new themes.
The Shopify GitHub integration makes it easy for you to use the Shopify CLI tool along with theme check. Both these tools enable you to test themes in sandbox and streamlines development as a result of that.
Shopify Github Integration
The new integration with GitHub makes new theme development and maintenance much easier for you to both track and manage. Connect the GitHub user account to the online store. The changes are pushed to GitHub and pulled to a repo that’s in sync with the current state of selected themes.
The Shopify GitHub integration ensures you get to connect your user account with the Shopify admin and connect Git branches to themes in the store. Native support for version control lets you make, track and manage changes to the theme code too:
The GitHub integration with themes lets developers collaborate safely by editing themes with the introduction of native support for version control. The integration lets developers collaborate safely when editing themes with support for version control. When working on a merchant store, developers can implement workflows where changes to themes are reviewed and merged on GitHub before populating to a live theme.
Shopify CLI
There are new changes to the Shopify CLI tool as well. App developers were until now using the CLI tool to generate Node.js and Ruby on Rails apps but with the current changes, developers can build custom themes with CLI.
Here’s the full range of functions you get:
- You can develop, preview, and test changes to themes inside development themes.
- You can hot-reload CSS and Liquid section changes you develop thanks to the dev server.
- Initialize a new theme project using the new theme Dawn.
- Push and publish themes from the command line
- Run theme check on the theme.
- Populate test data for the theme for products customers and draft orders.
Development themes are temporarily hidden themes connected to the Shopify store for development. The development themes are not visible in the admin area, so you need not worry that any visitors to the store are going to see your site on it.
Development themes don’t add up towards the theme limit. Owing to that reason these are deleted on their own after seven days of inactivity. They are also deleted when you run the Shopify-logout sequence. If you need a preview link that doesn’t get destroyed when you log out, what you can do is push the theme to the store.
Development themes can be used to view the changes to a theme being developed locally in real-time, interact with the theme, and customize the theme with the theme editor. Thus the new CLI tool gives you plenty of control over how the final theme appears.
The tools can make the development process easy and get you started with the Online store 2.0 quickly
Theme Check
Theme Check is another integral component for Liquid and JSON that scans the themes for errors. Once the scan is complete the tool highlights the best practices for both the Shopify platform and the Liquid language.
This integrates with editors like Visual Studio and identifies issues with the code.
In order for you to understand the issues that persist error messages with a link to the failed check appear. Theme Check is bundled together with the Shopify CLI tool so you don’t need to install the same separately.
In Summary
Shopify has three parts to the store:
- The themes and the online editor
- Saving Content
- Developer Tools
If you’re not a developer and simply a store owner, the new online editor and content management system is likely to have the most impact on you as a store owner.
The editor can easily replace a number of Shopify apps including the popular Shogun page builder.
The new editor will let small and medium-sized businesses create new page templates and populate the data inside them without writing a single line of code using the inbuilt Shopify page sections as well as blocks.
Finally, the content management system is another super important area that’s got a facelift and additional features. With the new update, you’re going to get the all-new custom content typing. Create content once and publish it inside all your channels, including the online store.
Have any questions? Be sure to contact us for all your Shopify needs!