Everything You Need To Know About Shopify 2.0

Everything You Need To Know About Shopify 2.0

Everything You Need To Know About Shopify 2.0

Last year more than 450 million people bought something from a Shopify website. The company reportedly processed over $120 billion in Gross Merchandise Volume. The platform is only growing year on year and the new updates will only speed that up.

In June, Shopify announced its newest features, which are mostly aimed at making the platform faster and more easily editable for any business owners running a store through Shopify.

Shopify 2.0 now offers a massive list of new features and themes for Shopify merchants to use to grow their website and company.

One of the key points is that the revamped online store will make it easier for developers to add customised features to their storefronts. One of the companies that received early access to this platform was Netflix who used it to create Netflix shop which is the first ecommerce store for Netflix.

So what does Online Store 2.0 mean for you?

Overview

Shopify Overview

The new features start with a fresh & fast editing experience. The new Shopify editor makes it really easy for companies to build storefronts, add theme extensions and manage apps within themes.

The idea of the new editor is to centralise all of the available features and functionalities.

The new Shopify reference theme ‘Dawn’, is going to be around 35% faster than the old default theme (Debut).

Shopify has also said that the company is going to significantly improve its infrastructure and developer tooling. Because of this you as a seller don’t need to go through the pains of re-platforming to build headless commerce storefronts.

With the new look online store, Shopify is trying to make the platform more visible to developers and tech giants. With the new store, everyone has the option to create, customise, scale, and monetise through Shopify.

Regardless of whether you are a developer, marketer, or store owner the update is likely to make life easier for you!

Theme App Extensions & App Blocks

New theme app extensions (for developers) will help to add a number of fresh features and extensions. From this, you (or your developer) have the ability to extend the merchant’s site functionality.

In past versions, there has not been away for apps to integrate directly with themes. As a result, it meant that developers had to code integration for existing themes.

This meant that it added both time and risk of complications or errors when trying to get the app to work consistently across multiple themes.

Thankfully that will no longer be the case.

New Style Theme Architecture

New Style Theme Architecture

In previous versions of the online store, sellers were limited on the number of blocks that were available inside the store.

This meant that earlier stores used to have different templates which mapped to different products.

However, with the 2.0 version, as a seller, you can now easily add sections to any of your new pages not just to the homepage.

It is now possible for you to activate the templates individually for each page with a template file that specifies the settings for that page. From this, you can list all sections of a page whether that be collection pages, custom pages, blog posts, etc.

Inside of the JSON template files, you are able to define the sections which are going to appear for you.

From the template files, you will be able to set which sections appear by default and the order in which they will appear on a theme you install.

Once your template has been added you can also add extra dynamic sections by going to the theme editor.

App Modularity

Another exciting feature is app modularity. This basically means that as a Shopify developer we can now add and remove UI components through the theme editor directly so there is no longer the need to access the theme’s code.

This means a simpler way to manage an app’s supporting assets.

Changes to Metafields

In the updated theme editor we are now able to add meta fields and properties directly.

This news means that you don’t need APIs or any form of coding to make that possible.

As a seller, you are free to add the content you want on your product page and then also add space for additional information that may help potential buyers to make a purchase, such as a size guide.

Anything that would not usually appear in your store editor can now be updated through the meta fields.

Here are three different ways in which Shopify has modified meta fields.

  • Flexibility: They are now more flexible, which helps you to safely import commerce data.
  • Standard meta fields: These make it more simple for custom themes when working outside of the box on stores.
  • Presentation hints: You are now able to add presentation hints to each meta field to render store data.

 

File Picker

Shopify’s meta fields now support multiple media types such as images & PDF files.

Rather than having to hard-code a particular file type into your theme, the meta field file picker allows you to upload your selected media to the product pages directly.

The images can be accessed through your website’s files section and then can be used straight away.

This can be used if you are wanting to add a particular item to each product such as a sizing chart on a clothing brand website, it will make it much easier for you to place and display that file.

As of now, the meta-field would be placed inside the theme itself.

Files API

With the updated Shopify you can now use the File API to create, update and delete generic files.

This means that you can reuse different files across multiple different apps as they are added to the files page inside of the Shopify admin.

Developers are also now able to access the files through the new Files API. This will again make it easier to upload or choose existing media files.

External Apps can also benefit from access to this particular area in your admin while populating meta fields through the content.

This, therefore opening up more opportunities for apps (and app developers) to use this space for files & images which are not directly associated with a certain product, including images used across the theme.

Liquid Input Setting

sLiquid Input Setting

In the theme editor, there is another new update.

Now in the Liquid input settings, you are able to add custom code to pages from the editor itself rather than having to do this across different areas.

The Liquid setting is similar to the HTML setting. The only real difference is that you now also have access to the Liquid variables.

Sellers are able to access both the global and template-specific Liquid objects.

This new setting reduces the need for business owners or developers to need to manually edit the coding of any theme when adding code for apps using Liquid.

Thanks to this it’s now easier for you to make quick and reliable decisions about the store as a developer, this will free up your time to focus on important matters such as creative integrations and solutions to improve user experience and user interface.

Shopify’s New Developer Tools

Shopify’s Online store 2.0 has opened up a whole array of new opportunities for developers to build new apps and themes for Shopify users.

Their new developer tools integrate and assist with the development, testing, and deploying of new themes.

From the Shopify GitHub integration, it is easy for you to use the Shopify CLI tool along with the theme check.

Both of these tools will enable you to test your themes in the sandbox (testing mode) and that will streamline development better as a result of the addition.

The Github Integration

Shopify’s new integration of GitHub will make new theme development and/ or maintenance much quicker and simpler for you to manage and track.

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:

This GitHub integration allows developers to collaborate safely when editing themes with the introduction of native support for version control.

Now when working on a merchant store, developers are able to implement workflows where changes to themes are reviewed and merged on GitHub before populating to a live theme.

Therefore as a store owner, you can worry slightly less about any development bugs affecting your live store.

Shopify CLI

There are also new changes to the Shopify CLI tool, app developers were previously using the CLI tool to create Node.js and Ruby on Rails apps. However, with the newest Shopify changes, developers can now build custom themes with CLI too.

Here’s a full range of functions you will now get:

  • You can create, preview, and test changes to your website theme inside of the development themes.
  • You can ‘hot-reload your CSS and Liquid section changes you develop thanks to the new and improved dev server.
  • You can start a new theme project using Shopify’s new theme Dawn.
  • Developers are now able to publish themes from the command line
  • Merchants and developers can populate test data for their theme for products, customers, draft orders, and more.

Moving forward development themes are just temporarily hidden themes that are connected to the Shopify store for development.

The development themes will not be visible in the admin area, so sellers will not need to worry that any of their visitors will be able to see your site on it.

Also moving forward your development themes won’t add up towards your theme limit as they did before.

However, do keep an eye on that these can be deleted on their own after seven days of inactivity. They are also being deleted when you run the Shopify logout.

If you need a preview link that doesn’t get removed when you do log out, then you can still push the theme to the store (without it being live).

Development themes will be used to view the changes to a theme that is being developed locally in real-time, whilst interacting with your chosen theme.

It also allows you to customise your theme with the theme editor. This means that the new CLI tool can give you more control over how your final theme is displayed.

This tool can make the development process more simple and get you started with your Shopify Online store 2.0 quickly.

Theme Check

Another integral component for Liquid and JSON is the Theme Check function that will scan your themes for errors.

Once the scan has run the tool will display the best practices for both the Shopify platform and also the Liquid language.

This theme check will integrate with other editors such as Visual Studio and will identify issues with your coding.

Also, the Theme Check will be integrated together with the Shopify CLI tool mentioned earlier so you don’t need to install them both separately.

Some Other Features Worth Mentioning

Bulk Mutation API

There is now a faster solution to export data in bulk to your store through the Bulk Operation RunMutation endpoint on Shopify.

So instead of the previous GraphML simulation, you are able to run a bulk mutation operation.

This simple way will save time for you or your Shopify developer to import all of your relevant data, without facing issues due to a large number of files.

Here are the options available to you:

  • productUpdate
  • productUpdateMedia
  • priceListFixedPricesAdd
  • priceListFixedPricesDelete
  • productPageUpdate
  • productCreate
  • collectionCreate
  • productVariantUpdate
  • metafieldUpsert

 

The Checkout Resource API for Discounts

This field will display how the discount was applied to the checkout, Valid values include automatic, discount code, manual, and scripts.

Liquid Input Settings

The new and improved Liquid input settings are for sellers to add custom Liquid code directly on the editor itself.

It’s pretty similar to the HTML settings we have mentioned earlier.

Merchants are able to access the global and template-specific Liquid objects without having to edit the theme code.

In Conclusion:

Shopify has three main parts to the store:

  • The themes and online editor
  • Content Saving
  • Developer Tools

If you’re not a developer but instead are a business owner, the new online editor and content management system is the change most likely to have the biggest impact on you as a store owner.

The new updated template language has an in-house editor tool that is similar to WordPress’s Gutenberg which was released back in 2018. That means that the Shopify page editor has been brought closer to the page editors on platforms such Squarespace and Wix, but still has all the other benefits that they had over those platforms.

Shopify’s new editor will also be able to easily replace a number of the current Shopify apps including the very popular Shogun page builder. The reduction of additional apps should also help to increase your page load speed.

The new editor helps small and medium-sized businesses create new page templates and then populate their data inside of them without having to write any or as much code thanks to the inbuilt Shopify page sections and blocks.

Lastly, the content management system (CMS) is a really important area that’s had a new facelift and additional features.

Following the new update, you can get the all-new custom content typing, which means, you can create content once and publish it across all your channels, including the online store.

What do you think of the new Shopify Online Store 2.0?

Why Choose Breeze Development?

Breeze Development is a digital marketing company based in the northwest. If you would like a no-obligation chat about an existing or new website, please arrange a free digital marketing consultation.



Get A FREE Quote