Exploring Shopify’s new Online Store 2.0 experience

With Shopify Unite 2021 over and a slew of new announcements it is hard to ignore the excitement that is spreading throughout the community currently. Shopify’s biggest announcement of the event was the unveiling of the new online store experience, referred to by the idiom of “Online Store 2.0”, which brought with it many amazing new features.

By far the most anticipated and well received feature is the inclusion of Theme Templates, which can allow merchants to customise the design and sections of pages on their website beyond the homepage. This feature has been in development by the Shopify team since it was first announced all the way back in Unite of 2019.

Because of this new feature there are some slight differences in the usage of the online store theme editor that you are familiar with. Let’s showcase the new features and how to use them now.

To begin you can start by looking at the predeveloped Shopify theme, Dawn. Dawn is a publicly available theme that is free to download and experiment with on your existing online store.

At the time of writing it has not been released to the Shopify Theme Store, and it won’t display within Shopify’s “Free Themes” selection from the Online Store page, so you will need to begin by visiting the theme’s GitHub page, here; https://github.com/Shopify/dawn/releases

Select the latest version (1.0.0 at the time of writing), and select “Source Code (Zip)” to download the theme. When the download is complete you can upload the theme into Shopify from the online Store Section of the Admin Panel.

To begin we are going to create a template for products that are going to be delayed, this could be useful for product pre-orders or if your products are to be made to order and have a short delay.

Let’s begin by navigating to the theme customiser of our Dawn theme, and then finding a product that we want to use the new template for. From the top of the customiser select the dropdown that is labelled “Default”, select “Products”, as we are creating new Product template, and select “Create Template”. You will need to write a name for the template, and if you have multiple templates you can select which template you want to base the new template on. Finally, select “Create Template”.

After the template is loaded you can modify the template to suit your preorder products. To begin we are going to create a field to display information that a product is preorder and will not be shipping for a few weeks. Like you would have done previously on the older theme customiser, you can go ahead and add new sections to this theme from the left menu.

For this example let’s add a new “Text” section to the theme. Under “Product Information”, select “Add block”, and choose “Text”. After the section has been added you can write text information on the right hand side of the page to give your customers notice that they will have to wait some time until the shipment occurs. Here I’ve written “Preorder product, item will be shipped when available”, which is a good starting point.

Afterwards, select save in the top right corner and you can view the changes on the theme preview immediately.

Now that you have created a preorder template you can apply the template to your products. When changing the template you will be able to assign as many products as you like to the new template, great for creating a bespoke design for a range of products.

To change a product to use the new template, find the product within the products section of your Shopify Admin Panel. When you’ve found the right product, click to edit the product, and find the “Theme Template” dropdown menu on the right side of the page.

Change the template from “Default Template”, to your new “preorder” template, and select save. If the template is not appearing in the dropdown you may need to first publish your theme.

So far this has been a great improvement to the flexibility of the content management systems of the Shopify theme, however you may have noticed that the content changes made to sections on these templates will affect every product that uses that template.

For example, if I update the preorder text to read “Ships on July 20th”, this will affect every single preorder product to have the same text, which is not ideal if we have different shipments arriving at different times.

To correct this, Shopify has introduced a feature called “Metafields” for merchants to use. Metafields have been around for a while but they were previously restricted to developers use only, and were of no use to merchants without some form of coding. Now, merchant’s themselves can make use of metafields directly in their sections.

In this example we are going to create a metafield that will let us decide on a preorder date for each of our products individually. To begin we will navigate to the “Metafield Settings” under the “Settings” panel within Shopify’s Admin Panel. Then select “Products”, as we are making a metafield for our Products.

Next we will click “Add definition”, and give our metafield a name of “Preorder Date” and a type of “Date and Time”, you can optionally enter a description. After you select “Date and Time”, choose “Date” rather than “Date and Time”. You can restrict this to certain dates if necessary, so for now you can enter a minimum date of Today. When finished click Save.

After the metafield has been created you can edit the content of the new metafield by navigating to a product, and scrolling to the bottom of the Product Editor. Under “Metafields” you will see your new metafield and can select a date that you expect the product to come into stock, for example I have put my Dress Product to come into stock on July 20th, and my Shoes Product to come into stock on August the 3rd.

Now we have a metafield and have entered our content we can use the metafield we created on our preorder template. Navigate back to the preorder template within the theme customiser. You can either view a product that already has the template, or navigate by selecting the template from the dropdown at the top of the customiser.

View the content section we had created previously from the list of blocks on the left and click the small button above the text input. I personally believe that looks like 3 pancakes with a plus, which would be a great way to request more pancakes, but it’s actually the “Variable inserter”.

The variable inserter will insert dynamic content from the specific product being viewed into that text content (as the name suggests, it’s a variable). Our metafield we have created is just one variable we can select, as well as other common variables such as the products’ name and vendor. For now we will select our Preorder Date metafield.

The variable we have inserted will take the value from the current product and insert it into our text at the point we specify. We can arrange the exact position of the variable to suit our needs, and write text before and/or after the variable. You can move the variable by clicking and dragging it within the text field. When you are happy with the placement and display click save.

This is a huge improvement for merchants and content managers, the ability to create custom designs, layouts and content without the use of a developer can give flexibility and design controls that haven’t been possible on Shopify before.

This allows developers to be freed up to create more engaging designs and flexible layouts for you, rather than spending unnecessary time creating content management systems for merchants. It is a very exciting time to be on the Shopify platform.

If you have an existing Shopify theme or store it will likely need some upgrading to be made compatible with the new online store experience. For this it’s really important to have a talented developer or agency, with the know-how on what’s involved to perform the upgrade and prepare your store for all of the new changes Shopify is releasing.

Here at Process we overcome these challenges every day and have gone through the technical details so that our partners and merchants can be onboarded as soon as possible. We are excited to see what else Shopify has to offer with the Unite 2021 updates, stay tuned for more.