Hi - welcome to another video from BOA Ideas on Shopify. Today we’re going to talk about the innovation that was announced a month ago and launched two weeks ago: online store 2.0. Shopify’s new architecture for themes, which controls how your website looks. And the innovation that Shopify created is very very significant and dramatic. Of course, we won’t be able to cover everything, but I’ll tell you about the most important elements, and I’ll also show them to you, so let’s begin.
Overview of Online Store 2.0 Changes
The highlight of the innovations for the themes is “Sections Everywhere” - that’s what it was called in the past. They changed the name a little but that’s the meaning. For those who are familiar with the homepage and the tools for store owners to control the homepage, it’s much wider and more flexible than for other pages. So Shopify added these abilities for all of the pages.
Like on the homepage, now for every other page, I can add sections, remove sections, and change the order. It’s a significant and dramatic change that we’ve been waiting for but it’s not the only change.
Additionally, Shopify enables you, in the role of store owners, to define more than one type of template for specific pages. For example, a product page, a collection page, a blog page, an article page, a content page, etc. All on your own.
You’re no longer dependent on versions that the theme gives you as a present, or a developer who will create other types of pages that you can edit after. You can do it on your own. And after you create new templates for these types of pages, you can go to every product, or every collection, or every blog and define which template you want to use.
Bottom line, it opens up the possibility for you to create different pages. That means, the same type of page, but it will look different to fit the product or collection. Because until today, when we would change something on the product page, it would affect all of the product pages. And when we would change something on the collection page, it would affect all collection pages. So essentially, now I can define different templates and choose which template each product will use.
Custom Metafields in Online Store 2.0
But, this is also not the full picture. Because there’s another level that maybe you won’t even need to create different templates.
Until today, when we needed a different design for a different page, it was because, for example, of a section on the page. If I had a fashion store and I wanted to say something about the material of the shirts and the material of the pants, I had a problem. There were many tricks but now you can to yourself, “Maybe I’ll define one template for shirts and one template for pants.” And that’s how the problem can be solved.
But there’s something extra that you can use, which can sometimes spare the need of creating different templates - and they're metafields.
Metafields are something that always existed but it wasn’t very accessible for you, store owners, to go and change the content of the metafields. So first I’ll explain what they are and then I’ll explain the new element.
Metafields give you the ability to define additional fields for elements in Shopify. On product pages, everyone is familiar with the title and the content. These are two fields I can fill out, and after it will appear on the product page itself. Additionally, there are many other fields like price and images and tags, etc. Some appear on the product page and some don’t.
But sometimes people have a need, for example, the clothing material we were speaking about. Of course, there are many other examples to fill in fields with additional content that will differ from product to product and from collection to collection, and more. Even from variant to variant of the same product.
They launched metafields for this a few years ago, but they didn’t provide a way to fill them out. If I wanted a new metafield, I would have to do it using development. And to add a value to the product and to its field, it would have to be done using development or a third-party app, and they don’t always work smoothly.
So now, innovation number one in this area is that Shopify opened this up to easy and flexible control for store owners. You have a new area in settings called “metafields,” where you can add new fields that you choose on to each product and variant. You can also note which type of field it is - if it’s a text field or number or file or picture, etc. And then, miraculously, on the management page of the product or variant, these fields will appear and you can add the additional information that you want to define.
So that’s change number one. They currently released it for products and variants but in the future, it will be for elements like collections, clients, and orders.
After we defined the new unique fields that we invented for every product and every variant, the innovation is that the theme and the template, as we spoke about before, can have a section that uses text from a metafield, or an image from the metafield, or anything like that. And then, it will display separate content that I wrote in the metafield, in the template for every product. And for things that are more simple and small, I don’t need to create new templates. I just add a metafield to the product, define the data, and that is what will appear uniquely on the product page on my website.
After all of this, I want to show you a short demo to connect the spoken explanation with how it looks in use. We’ll do it in short and I hope that it answers your questions. Of course, we’re here for any questions - ask in the comments, send us an e-mail, and we’ll be happy to answer. So let’s go to the demo.
Introduction to Online Store 2.0 Demo
So we’re moving into the demo - I want to show it to you. And during the demo, I’ll share more on Shopify’s innovations. The first thing I want to say is that in the framework of all of the changes within their architecture, they published a completely new theme that is called Dawn. And that is the theme that this store that you’re looking at is based on. Here, I’ll show you: Dawn.
And this is a new and really nice theme that swaps out the default theme Debut. Beyond the fact that it is very nice, it operates with the new architecture so that I can show you the new elements and recommend you to use them and enjoy them, and it’s very very fast. They put a big emphasis on loading time for this theme and you really feel it.
This is another innovation - that they took all of the changes in architecture and put it into a new theme. But it’s important to note that the themes in the Shopify theme store also received an advanced update in their architecture so they could support all of the new elements. In general, it happened and you’ll see a small text, “OS2.0”, which is online store 2.0. That way you’ll know if the theme supports the new elements.
If you’re using a theme that got the update and now supports online store 2.0, you can upgrade. Pay attention that the upgrade process, on the one hand, is simple and on the other hand has a lot of elements. We can do a separate video on it - all of the elements you need to pay attention to.
And of course, if you want to take advantage of the opportunity and move to a new theme, make sure that it supports the online store 2.0.
Online Store 2.0 Demo: Sections Everywhere
So now let’s look at the innovations. So I enter into “customize” of Dawn. And first of all, this is something you have for every theme, the interface is a little updated. Now there is a page selection dropdown that first shows the types of pages and then the pages themselves and templates.
Additionally, on small screens, on the left is the structure of the page. Then, if I click on one of them, on a large screen on the right and on a small screen on the left, options open up for the section. Now, what’s new? Like we had until today on the homepage, and this is what you see now, different sections and play with their order and add a section and remove a section. If I go in and click remove, I have the same thing for internal pages.
If I go to a product page, soon we’ll talk about how to define templates, but you’ll see the default. Let’s say for now that this is the only option. Here, on this product page, I have the ability like before to change the order and add sections.
Okay so that’s the first innovation. It’s very nice looking. This is my opportunity to say that the same sections that I can add like we’ve had until now on the homepage, we get as a gift from the theme that we will install, for the homepage and for other pages.
But another innovation is that now different applications, when you download them, can be added to this area. Right now “Apps. No installed apps can be used on this template” is written here. Because we haven’t downloaded the relevant applications yet. But when you install the right application, you can immediately see elements that the application offers you that you can combine with the page. It gives you a lot more control and flexibility on what you add to your pages via an application, in contrast to how it exists today.
Online Store 2.0 Demo: Custom Templates
So that was the first innovation - the “sections everywhere.” Now I want to show the topic of adding templates. So this, for example, is the template of a product page. And right now it shows a shirt in the example. And I can decide that in addition, I also sell hats. And the hats need a product page that looks completely different. Totally different. So I can go to “product” and click “create template”. It’s a button, that until today was only available for developers. And now, you can do it on your own.
So I’ll create a new template with the name “hats”. And I can also determine which base of an existing template I can base it on. To begin from a starting point. I’ll start with “default product” which is what we’ve seen until now.
Now I’m in the template called “hats” and now I can make any changes I want to this template. For example, in this template, I’ll add a collage of images at the top of the page. This is just for hats - it’s what I feel like having. And now, only products that are defined to use the template “hats” will look this way. This is the second change I spoke about.
I can also see, by the way… I’ll press save and soon I’ll show you a product that uses this template. I can also see that “hats is assigned to zero products”. Meaning, it’s not connected to any products. Let’s change that.
Let’s go to a product page. Let’s duplicate this shirt and I’ll call it “hat”. Let’s set that it’s live. And now, below, here in “online store”, “theme template”, I’ll choose “hats” instead of “default product”. And save.
And now if I go to “online store”, “customize”, and I choose product pages, then I’ll see that hats is assigned to one product. When I click it, I see that since we called the product “hat”, now I see the preview of this template using the product “hat”. And it uses this template. But it’s possible to have 30 products that use this template. And when you look if you want to see how it would look with this product or that product, I can of course change and see a different product. I can even see a product that isn’t using the template. Maybe for example if I’m preparing a template for a specific product and I didn’t finish and I don’t want to publish. So I can see how it will look with the shirt. Even though the shirt isn’t using the template.
Of course, if I click the name then it brings me to the page of the product on Shopify to make sure all of the details are correct. And then you can go back and use it.
Online Store 2.0 Demo: Custom Metafields
The other thing I want to show you are the metafields. Because now we’re familiar with different templates for each product - for hats, for shirts, you saw before I had templates for other products. And suppose, that within the shirt, now I’ll choose the product type “default” that the shirts use. And now within shirts, I want to display information for the material of the shirt. So let’s see how we do it.
First I need to define the metafield. I’ll go to “settings” as we said. And now there’s a new field here, “metafields”. Here, I have the possibility to add metafields to products and variants. And pay attention that coming soon, for collections, customers, and orders.
I’ll enter “products” and I’ll add a new metafield called “material”. It gives me options here, and if I use one, it recommends me to choose one, it can be a subtitle, care guide, etc. “Material” is something that isn’t listed there so I’ll choose the custom option. Note that it’s preferred to write the name of the field in English. Let’s call it “material” because the internal name can’t be in Hebrew - only English, so it’s very important. If it’s important to you that it be in Hebrew, then manually enter a name in English.
The description is so that when we define it, someone else - the store owner, or someone else might use it and not understand what it means. So it’s an opportunity for me to write here “material”. And then I select which type of content I expect people to enter here. Like you see, you can choose “color”, “date and time”, “file”, `”JSON”, etc. We’ll choose simply a text field. But as we said, there are many options.
The text field also allows me to enter either a single line of text or multi-line, which provides space for a story or novel. Let’s define it for now as a single-line. And I can even define lots of validation criteria that it will check for me. For example, if I want to force the store owner to enter minimum of 5 characters and maximum of 20 characters, etc. I can do it. Right now, I won’t use it. I’ll save.
Now I have this field and where you can see it is on the product page itself. If I go to the shirt and scroll down, you’ll see the new field here: metafields. And the field, right now there’s only one, is the field that I created. If I click on it, I can elaborate. It gives me the description that we set. And you have the possibility to view all, and when you have many, you can see a more organized and nice list of the metafields.
So let’s define the material for this specific shirt that we’re looking at: 100% cotton. I’ll save. And like you understand now, for every item, I can input a different material or the same one. But the best part is that I can do a different one for each.
Now, I want to display for each time, in the same template - I don’t want to go and create 100 different templates - the individual material for it, on the product page. So I’ll go to “customize” for the theme. And I’ll go to the product page. And I’ll choose the default, which is what I want to work with right now. But I can do this for all templates. Either in “product information” or as a new section, I can add the line. It’s related to product information so let’s add it to the product information.
I’ll add a block of text - here’s the text block. And now I’ll define the data that should appear. If I write “material” here, or even “100% cotton”, it will appear for all of the products, which isn’t what we want. We want this text to come from the metafield that we defined. For this, there’s this little button. When you click on it, it shows me all of the options that I can show for the product that are dynamic and unique for each product in and of itself. And the whole magic of it is that it also has the metafields. And here is the material that we created. From here, there’s even a shortcut to create a new metafield.
If I select “material”, then I don’t write myself, but it brings the data from the product itself, which is displayed here. And here I can even write more text on the left and right into the dynamic field.
And this is what’s special here. I don’t need to create a new template for every type of material. I can use metafields to define the material for each product and it will simply display. And everything I did, I did it without development and without a developer, and without an application.
Upgrading your Current Theme Vs. Switching to the New Theme
I hope you enjoyed the explanation and demonstration and that it opened your mind to the possibilities that this new architecture enables. What’s important is to make sure that you’re using a theme that supports this. But it’s important to me to say a few words about this.
First of all, I assume you’re currently using a theme that doesn’t support these new features. So you either need to upgrade your theme or take the opportunity to move to a new theme. The process of upgrading a theme, if you had code changes to your theme, or want code changes to a new theme, it doesn’t really matter if you’re upgrading to the new version of the same theme or moving to a new theme. The one difference is that upgrading your theme means you don’t have to buy a new theme since you’re using the same theme. And this can save you $100 or $200 or $300.
But from the perspective of the process, it’s basically the same process.
On the other hand, it’s important to know and remember that part of the innovation of the new architecture is that you can do the upgrade with existing themes. You don’t need to upgrade the entire theme but using development, you can go in and add the new capabilities. Of course, for someone who needs it for the whole theme, it’s less worthwhile to go and upgrade an existing theme. And beyond that, when you move themes, you get all of the other new features for the themes. But someone who wants immediate use for one of the new features for one of the pages or types of pages, and doesn’t want to go through the whole process of changing the entire theme, you can still, and Shopify supports this, have developers go in and add in the features exactly where you want in the existing theme without needing to upgrade. This is important to say and know.
To conclude, thanks again. If you have questions, we’re here and can help you with anything. And of course, happy new year. Thanks!
Powered by Froala Editor