Shopify Store Setup - Understanding the Shopify eCommerce Platform | Christopher Dodd | Skillshare
Search

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Shopify Store Setup - Understanding the Shopify eCommerce Platform

teacher avatar Christopher Dodd, Web Developer / Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Introduction

      1:50

    • 2.

      Class Project

      1:22

    • 3.

      Creating a Free Development Store

      3:53

    • 4.

      Shopify Store Architecture

      5:20

    • 5.

      Products and Variants

      6:23

    • 6.

      Product Organisation

      6:18

    • 7.

      Pages, Blog Posts and Navigation

      3:42

    • 8.

      Themes and Templates

      8:37

    • 9.

      Custom Data - Metafields & Metaobjects

      12:17

    • 10.

      Discounts

      6:01

    • 11.

      Apps

      3:36

    • 12.

      Conclusion

      0:54

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

2,061

Students

11

Projects

About This Class

Inside this class, we’ll go through the core essentials you need to understand the Shopify platform. We’ll start with an overview of the Shopify eCommerce structure and then take a closer look at the various pieces that make up a Shopify store like products and variants, custom pages and navigation, themes and apps, as well as creating your own data so that you can easily extend the platform to suit your needs.

While Shopify makes eCommerce as simple as possible, there are few things you need to know about the platform if you’re interested in selling products via Shopify or like me, helping businesses that use Shopify with their website requirements.

So if you're interested in learning how the Shopify platform works, keep watching and I’ll see you on the inside.

Meet Your Teacher

Teacher Profile Image

Christopher Dodd

Web Developer / Educator

Top Teacher

Christopher Dodd is a self-taught web developer, YouTuber and blogger with a mission to help individuals learn the skills to freelance and make a living independently.

Chris learned web development in 2015 in order to work remotely and travel the world and has done so for the past 8 years.

Through his YouTube channel, blog and Instagram, Chris inspires and educates newbie 'digital nomads' to chase their passions and pursue a location independent career.

See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello and welcome to the classroom. I'm Christopher Dodd. I'm a top teacher here on Skillshare.com and Shopify Expert, working with the platform since 2019. What you're about to watch is a crash course on Shopify. We're together, we'll go through the various parts of a Shopify store and learn how each part works together to deliver a beautiful and robust e commerce website. While the Shopify platform has undergone a lot of improvements since 2019 and continues to do so, the core structure of the Shopify platform is still a robust system that elegantly balances flexibility and ease of use. A platform that allows merchants to get started selling instantly with a simple but powerful checkout for accepting payments for any product that you can think of. With Shoaf, you can create a product page and start selling in less than an hour. In the class, we'll go through the core essentials you need to understand about the Sho Fi platform. We'll start with an overview of the shove commerce structure and then take a look at the various pieces that make up a shove store like products and variants, custom pages and navigation themes and apps. As well as creating your own data so that you can easily extend the platform to suit your needs. A developer working on the platform, since 2019, I've seen tens of stores using Shopify to power a simple online store. All the way up to multi million dollar e commerce businesses using various customization options. While Shopify makes E commerce as simple as possible. There are a few things you need to know about the platform. If you're interested in selling products, a chobe fi or like me, helping businesses that use Shopify with their website requirements. So if you're interested in learning how the Shopify platform works, keep watching and I'll see you on the inside. 2. Class Project: For your class project, I want you to come up with a plan for a Shopify store. I recommend opening up a document now. And while you go through each lesson, come up with your own example of how you would fit an aspect of your store into each category. If you're in the process of creating a real store, then even better, you can apply what you've learned in the following lessons to your actual store needs. But if not, you could look at other stores on the web, whether they are on shopper file or not. And figure out, for example, what products you will add to your store, what combination of those products will be part of a collection, and what additional fields you might need to showcase. Images, for instance, below the fold. Or to showcase something like specifications or ingredients list that we can use custom data, IE. Metafieldsp. If you prefer to do this at the end of the class, it's up to you. But maybe you'll need to go back and review some of the lessons to confirm your understanding. Once you're done with your plan, be sure to share it with the rest of the class by posting it in the class projects section of this skillshare class. You can do this in any format you like and even anonymously if need be. It's just a good idea to have some homework in order to solidify the knowledge that you will gain throughout this class. Of course, if you have any questions, feel free to comment on any of the lessons or within your class project. Otherwise, let's get started. 3. Creating a Free Development Store: All right, so to follow along in this class, you're going to need a Shopify store. And as I talk about in my other videos, the easiest way to get started with Shopify if you don't already have a Shopify store, is to create a free development store through your Shop Fi Partners account. And if you don't have a Shop Fi Partners account, you can easily join for free. There's no application process. You don't have to have any credentials in order to have a Shop Fi partners account. It's all free for people like us trying to learn the platform, right? So I've talked about this in numerous videos before and I've created development stores in the past, but I'm going to create a new one in this video. If you have already got a development store or have got any kind of shop store to follow along with, then you can feel free to skip this video. But if you need to create a shop a fi store, you don't have one already, definitely follow along this video. Now the first thing you're going to need to do is sign up for a partner's account. If you don't already, I'm not going to go through that process. It should be pretty simple. Pretty straightforward. I did it years ago and I don't remember it being an issue. I already have an account. So what I'm going to do is just hit log in and it's going to take me to my partner's account. Then I'm going to go over to stores. Just keep in mind, guys, that the UI could change at any point. So just look for the menu item called stores. It might not be in this exact position by the time you're watching this though. All right, so all we have to do is go over to this button right here to add store. And you can request access to a client's store if you're working on somebody else's store. But for our purposes, we're just going to click here to create a development store. And it's going to ask whether this is something that we're going to transfer ownership over to a client later. Or we're creating a store to test and build, or in this case, learn. So we're going to click the second option, and I'm going to call this Shopify Store class. No, that's not available. I'll give it something a bit more unique. Chris Development store set up. All right, cool. That's a bit of a ***** name, but it got through in the end because it has to obviously be a unique name. To get through here, we can use the latest build or a developer preview. This right here allows us to preview features that are coming out. So we can click here and look at the features that are coming out soon on Subi, so we can test those out. I'm going to go with latest build for now. And then this one, which wasn't around when I first started creating development stores, which is super handy to start with test data. If we start with an empty store, we're going to have to create all these different resources, which is kind of annoying. We still will have to probably create some dummy data in our development store throughout this class. But let's definitely start with some test data. I'll click here to create the development store. Unexpected era creating shop. Okay, let me try this again. The store name can't contain Schober Fire. Maybe that's what the problem is. I'll just call it Chris Development Store, for course. All right. So yeah, I will keep those other options the same and hopefully it works now. All right, so there we go. We've got our development store, and now we can continue with the rest of the class. 4. Shopify Store Architecture: Before we dive into each important piece of the Shop Fi platform, we need to take a high level look at where each part fits into the overall architecture of the platform. Shop Fi is a fully featured e commerce platform. You might think of it as just a place to build an online store, but in reality, Shop Fi allows you to sell in many different sales channels. Whether it be through point of sale, through existing online platforms, or through your own storefront. Using the storefront ABI, of course, most users will operate primarily through the online store sales channel. If you log into your Shopify account and look at the navigation on the left, you'll likely find a link to Online Store underneath the heading Sales Channels. Click on that link and the menu will expand to show you the various parts of your store that Shoppe Fi provides. Notice the first link reads Themes. A Theme allows you to control the look and to some extent, the functionality of your online store front. The best way to demonstrate what a theme does and doesn't do is to switch between the different themes on the same store. Here you can see that the menus and the products largely stay the same, but the layout and look of your online store front changes. See how when I click between these different themes, the content and menus are largely the same, but the presentation is quite different. This is what your theme does, its stoppies way of allowing you to customize your store front. When I say content and menus are largely the same, that is because a lot of this is stored either inside the online store sales channel or outside the online store sales channel in the case of products, for instance, let's take a step back. Cross out your sales channels here for a moment. Which for most people is just the one sales channel, the online store sales channel. And let's look at what content is central to your store, regardless of what the sales channels are that you're running on it. These include orders, products, customers, and discounts. Think about it. Regardless of whether you were to sell in person through an online store or through an app or social media, you would need to take orders of certain products from certain customers at certain prices. This is Core Commerce functionality. This is why these sections are independent of the sales channels you have installed on your Shopper I store. Now let's dig back into the sales channel section and look at what pieces exist within the online store sales channel. These are themes, blog posts, pages, and navigation. Remember a moment ago when we took a look at our store through a few different themes. The content that stayed the same, regardless of what theme we were looking at, included these resources within our online store sales channel. For example, if we head to the blog post section and create a new blog post, this will apply to the whole sales channel, not to any particular theme. We can also create a page to add to our online store sales channel, as well as set up menu that we can include in our themes at various points. We'll dive deeper into all of this throughout the class, but for now I'm just demonstrating where these options sit in your store. Before we summarize what we've learned so far, let's quickly talk about the theme editor. Within each theme, you can access what's called the theme editor. Here you can customize certain aspects of your theme. And when you hit save, that data gets instantly saved to the specific theme you're editing. It's important to note here that the data for this editor gets stored on the specific theme and each theme has its own set of data. For these options, this is different to what we just discussed with blog posts, pages, and navigation. An example to illustrate where theme data and store data diverge might be a menu field in your theme settings. The menu itself is set up in your navigation section and is available for use by all of your themes. But the selection of the specific menu is specific to the theme and therefore stored within it. Again, we're going to go a lot deeper into all of this in this class. For now, I'm just making you aware, you might want to refer back to this video once you've completed the class. But for now, let's summarize what we learned in this lesson. So as you can see here, I've broken up the three different places where data gets stored and how they are independent from each other on Shopify stores. So you've got your Core Commerce functionality here. Products variance, orders, customers and discounts. These represent core e commerce data. Independent of what sales channels you might be selling in. Of course, for the majority of users, you're going to just be using the online store sales channel, which comes default with Shop Offi. It's what most people think of when they think of a shop offi store. And so things like themes, blog posts, pages, navigations are going to be specific to that online store sales channel. And then inside your online store sales channel, you can customize the look and feel of your website through various themes and any of the settings that you set up in the theme editor are going to be specific to that theme. So it's not going to apply to other themes in your online store sales channel. But again, we're going to cover this in greater depth throughout the class. This is just the high level overview. Once again, you might want to refer back to this once you've gone throughout the class, but for now, that is the high level overview. And in the next video, we will dive into some of this core functionality including products, variants, orders, and customers. 5. Products and Variants: In this video, we're going to talk mainly about products and variance, but we're also going to talk about orders and customers briefly. At the end, obviously running an e commerce store, products sit at the center of the platform. Products should be pretty simple to understand, but where it can start to get a little complicated is when we break down each product into variance. Variants are super important because they represent the actual product that gets ordered and delivered to the customer. Let me explain. Let's look at the snowboard examples that come with our development store. The hydrogen snowboard here is a single product, but it comes in a range of options. If we scroll down to the variant section, we can see the list of options and possible values for each which in turn produce this table of variants. Each combination of options produces a single variant. If we have just one option parameter with, let's say size here, with three different sizes, then we'll have just three different variants, one variant for each size. But if we have more than one option parameter here, the list compounds with three option parameters, each with three possible values for the first, two for the second, and eight for the last. As in this example right here, we get a total of 48 different variants, or 48 different combinations of all the options above The formula for this simple, it's just the number of possible values for each multiplied together. So three times two times eight, producing 48 different combinations or 48 different variants. So when I say the variant is the actual product that gets ordered and delivered to the customer, that's because if a customer orders a carbon fiber snowboard with a classic bolt pattern in size 160, and they were to receive a fiberglass snowboard with an R SC binding mount in size 154. Then that's not the product that they ordered. This is an important concept to understand as while products have their own pages, it's the variant or the variance under the product that is actually what gets selected and ordered by the customer. For this reason, a product always contains at least one variant, even if there are no options available for the product. Let's zoom out for a second and take a look at the process of ordering something on a Shopify store. First, the customer navigates to a product page and whether this product is available in different options or not. When the customer clicks the Add to Cart button, a variant will get added to the card. If the customer navigates to the checkout page, the variants in that cart get carried across. And when the customer pays, two things happen. A customer is created in the back end and the card gets converted into an order that is then attached to that customer. Now for a regular admin user, the distinction between products and variant isn't super important to understand. All you really need to be concerned about is that the customer's selection was captured successfully and that they received the product with the combination of options that they selected. However, for more technical users who plan on coding Shopify Themes, functions or apps, it's important that you are aware of this. We can view the data that gets stored within a variant by clicking the edit button on any one of these rows. As each variant is technically a separate product, it should have its own SKU, quantity and price. The price could be the same between variant or different if a certain combination is in higher demand or more expensive to produce. As the customer buys a variant and not a product, the stock level of each combination is stored at the variant level here. If the variant represents the actual product that the customer is ordering, what can be said about the product that we see in the admin? You can think of this product as the page on which we display the product details and images. A single page that groups all the variants together. Variants don't have their own pages and can only be grouped together by the product that they belong to. Products on the other hand, can exist in multiple collections and each have their own page. We can view the product page for any particular product by clicking the view button up here. Here we can see the details that we set in the Ammon applying to our front end. Most of these are quite simple to understand such as the title description and images. But I want to draw your attention to one little drop down, right here under theme template. We'll talk more in depth about templates once we get into themes. But for now, understand that each product page will look similar if they are using the same template, which in Shopify is usually the case. We can see at present that all the products in our store are using the one default template, the code of which is stored within the theme. When we click View here on the product, we are viewing the default template on the currently live theme. Again, this is jumping ahead a little, but we'll get to templates in a later video. To finish off this video, however, let's briefly talk about orders and customers which, as previously mentioned, are generated whenever a customer checks out on our website. In our customer's section, here we can view the details of users who have previously submitted orders with our store. But not every user here is necessarily a paying customer. A customer can also be a user who voluntarily submits their information to us without having to buy anything. The most common example of this is a newsletter sign up where we might offer something to the prospective customer in exchange for their contact information. Our orders section here, pretty self explanatory. When a user checks out on the store, it creates an order for us to view within the admin Here, orders, of course, contain the products slash variance that the customer has ordered, as well as the customer's information so that the order can be fulfilled. Pretty simple. So a bit of meat in this lesson, but basically this covers the main core of the Shopify E Commerce system. To recap, you can set up pages to display various products in your store, each with their own list of possible combinations known as variants. When a user visits your store, they evaluate the product and select what variant they would like via the product page, Add that product to the cut, and then check out creating a new customer order in the system for the merchant to fulfill. In the next video, we'll cover a section here on the product page that we breezed over in this video. But is very important product organization, so important that it deserves its own video. 6. Product Organisation: In this video, we'll cover how to organize your products in Shopifi. This is an area where Shopifi might differ considerably to other platforms. One thing that might confuse users is that there is no such concept as a category in Chopifi. Instead, the main ways to organize products in shopifi are collections and tags. Let's head into the collection section of our admin and click to create a new collection. You can set a title, description, and image for your collection here, but the real magic happens here in this section. Here, under the collection type, you can specify manual or automated. Manual is pretty simple. If you create the collection with a type of manual, then you can manually specify which products you would like in that collection. If we add a few products here and click to view the collection on the front end, you'll see our collection delivered through the collection template of the theme, which given the nature of collections, should feature a product list of products in the collection with some sort of options for filtering and sorting the list. Just like a product, a collection is an object in Shopify that each has its own page. And we can customize the presentation of the collection by switching themes or by selecting the collection to display via an alternative template. If we have that set up in our theme, again, we'll discuss alternative templates once we get into themes. But for now, all you need to know is that all collections have a page, a page in which users can view the list of products within that collection. So getting back to the concept of product organization in Chopifi collections are very flexible in the sense that a product can exist in many collections. The downside of this is that we can't trace a product back to a single collection and therefore there can be a lot of overlap. A further limitation is collections can't link to other collections. In other words, there is no such thing as a collection being a subset of another collection. In Chopifi, I've found that merchants who have a large range of products are often frustrated by this, as they like too often arrange their products in a tree like structure, which doesn't really fit this flexible products collections model in Chopifi. Before we talk about automated collections, let me explain a little bit more about tags and Chopifi heading to the product that we were looking at before. We can see the section for tags at the bottom of the product organization section. Tags are simply single lines of text that we can add to the product to categorize it. We can then create rules around products with certain tags, either in the code of our themes or in automated chop fi collections. Which brings me back to the collection admin page here. If we create a new collection and this time we select automated collection, we can set the list of products in the collection to automatically populate based on certain conditions, the most common of which is to use tags. So for example, if we created a collection page to list all of our sale products, we could create the collection as a manual collection and update the products manually over time by coming back to the collection each time we want to make a change. Or as an alternative, we could set a rule here that the sale collection will include all products with the tag of sale. And then at the product level, we can simply add and remove the sale tag whenever we want that product to be included in the sale collection or not. The benefit of this second way is that given we know at the product level that the product is a sale product, we can use that information in a number of other ways as well. For example, in this sale tag example, maybe we code it up in the theme to show a label on the product grid reading sale if the sale tag is present. One more thing about tags is that Shopify provides a native way to filter deeper into collections based on tags. So let's say for instance, you have a shoes collection with some of the products inside tagged as men's. You can simply append a slash and then add the tag to the end of the URL in order to filter out any products that don't have that tag within that collection. Heading back to the conditions within automated collections, tags are one of the options, but you can also create automated collections based on a range of other attributes like product type, price, or stock level. You'll notice here that there is an option for product category, which you might think contradicts my earlier statement on categories not being a concept in Schabifi. While something called a product category does exist in Schabifi. Now it's provided there's a way to categorize products for tax reasons when selling in the United States. Unfortunately, it's not a method of product organization in Schubifi, at least at the time of recording, unless, of course, you were to categorize a product and then use it as a condition on a collection. But in that case, you're still relying on a collection to display this category. Previous to 2021, we could also filter collections based on product type and vendor. But since 2021, Hope Pi now uses something called storefront filtering. Which includes not only the vendor and product type as filtering options, but a range of other attributes like price availability and even custom fields that you set yourself, known as metaphields. To go deeper into what attributes are available for filtering, check out the page on Chobe Pi's documentation for storefront filtering. Okay, So we've covered quite a bit in this video, but here's a high level summary number. One, collections are Shabifi's native way of organizing lists of products. Two, we can create a collection with a product list that we manually specify or via a set of rules that enable dynamic population of the product list via different attributes like tags, product type, or vendor. Three, each collection gets its own page, which can be customized via the collection template within the theme. And finally, we can filter further down on collection pages, fire tags and other product attributes. But we cannot natively link one collection to another. Essentially, collections sit at the heart of product organization in Shabifi. If you want to display a list of products that fit together in some sort of category, creating a collection is how you do it. So that covers the main core of the Shop Fied platform. In this next video, we'll move into the online store sales channel and look at creating pages, navigation, and blog posts. 7. Pages, Blog Posts and Navigation: In this video, we're going to talk about the parts that make up the online store sales channel, which is the sales channel that comes defold and Shopify. And the one that probably comes to mind when you think of a Shopify store. At the top of the list is themes, which we'll visit a little later on because themes are a giant topic and something I talk about in depth in my other classes. For now, let's simply look at pages, navigation and blogs. First up, pages are the easiest to understand while products and collections have their own pages. In shopifi, creating a page here in the online store sales channel is for any other pages you might need that don't fall into the previous categories. For instance, a contact page about page or a terms and conditions. Page pages are quite basic by default in Schubifi. The only default fields here are title and content, allowing you to create a simple text based content page. But again, we have this theme template dropped down here that allows us to run the page through a custom template here. The possibilities are near infinite. But the big difference between pages created here and other pages in subi Fi that are based on collections or products, for instance, is that there is no data besides this title and content field that is associated with it. Technically, you could create a page for a specific collection or product using one of these pages, but you would miss out on the native filtering options. In the case of collections and for products, sure, you could showcase a product on one of these pages. It would just show up with a different URL structure and you'd have to somehow specify what product you wish to show. Simply put, while pages here are flexible, it's best to run collections and products through their own templates and only use pages for any pages that don't fall into other categories. Similar to a page is a blog post. In order to create a blog post though, we need to create a blog first. In Chabavai, you can have multiple different blogs. Therefore, you can think of blogs here as collections. But for blog posts, the blog post page and the Ammon looks a lot like the one for page. The two big differences here though is that a blog post is always associated with a specific blog. And that the published date is recorded so that it can be displayed on the front end. And so that blog post can be arranged by published date as you would normally expect from a blog note here that blogs can also run through alternative templates, which we'll get to in the video on themes. Finally, we have navigation here. This is where we set up the link lists for our store within the admin. However, Shubafi call them menus as a more user friendly name. Most of the time you will use these link lists as menus, which makes sense. But it's a flexible enough system that you can use these to set up any other list of links you might require. Heading into one of these link lists or menu, we can create a list of links that are at maximum three levels deep. Each link is simply two fields, one, the text of the link and to the address that the link should link to. Then we can create a tree like structure by dragging a link under another link. We can have a link within a link, within a link creating up to three layers. But unfortunately, any menu structure that is more than three layers deep cannot be created here. In Shopifi, like products, collections, pages, and blog posts, linklets are just another object in Shopifi that we can reference in our code or link to certain sections within our theme through the theme editor, without further ado. Now let's look at themes and templates in more depth. 8. Themes and Templates: So I've mentioned a few things about themes throughout this class so far, but now we're going to go over what you need to understand about themes in this video. Themes are super important in Shop Fi because they represent the template code that all of your store data runs through within your online store sales channel. When we populate things in Shop Fi like products and collections, we're essentially creating data on our Shop Fi store. Then if we're using the online store sales channel, which is the case the majority of the time, we display that data in a certain way to the end user. If we look at the theme section of our online store sales channel, we can see a list of themes here. The one at the top is the currently live theme, and the others are all themes that we can work on and publish at a later date or simply used for testing without making any changes live to the end user. Each theme is essentially a folder with a bunch of code files in them which we can view and edit right here within the admin by clicking on the dots and then clicking Edit Code. Now, this might look a bit intimidating, but let's attempt to simplify this a little bit. In my other courses on theme development, I go more in depth into theme code. But at a higher level, there are just three folders I want to talk about in this video. And they are configure templates and sections. All three of these folders typically contain files that will be affected by changes that we make in what's called the theme editor. If I click on the three dots here and click to customize, it will bring up the theme editor. Formerly known as the theme customizer. Here is essentially a user interface to customize our front end and at a high level add and customize list of sections within certain templates. If we click the dropdown at the top of the editor, we can select which template we'd like to edit. You can see here that links to collections, products pages, blogs and blog posts, each carry through to another menu. Because each of these templates can have just one default template or multiple alternative templates. This relates to what we saw earlier in the theme template dropdown of all these pages in the admin. So for instance, if we wanted to run a particular product through an alternative template, in other words, a template different to the default product template, we could do so by creating an alternate template here. And then navigating to that product within our admin and updating the drop down to link to that new template. When it comes to Jason templates, which is the new standard in Shopify, all templates are simply lists of what's called sections. Each section can contain settings for customization as well as blocks which are like subsections that each have their own settings as well. A few things to note here. Number one, both blocks and sections can be re, arranged in the theme editor two, the sections listed under the heading template relate to the specific template you're currently editing. Three, the sections listed above and below it are stored on the overall layout, which is typically going to be the same for every template. The sections here are typically the header and the footer, as well as any other section that needs to be included on every page, no matter what the template is. Finally, through the drop down, you can see what number of objects, in other words, products, collections, et cetera, are assigned to the template. And here you can click to view a different object through the template. You also have a few other options here on the far left to update your overall theme settings as well as turn on and off certain app functionality on the theme. Overall, the theme editor is simply a user friendly interface for updating theme code. All of these settings are programmed into the theme code itself and utilized using Shopify, Liquid, the coding language of Hopi Fi themes. If we go back into the theme files, the available options in the theme editor as well as the values stored for each option, are all located inside the theme code. The four different files I'll draw your attention to here are, one, the section files where the code for each section is stored. Two, the template files where the list of sections and their settings are stored. And finally, the two files in the config folder for the overall theme. Settings, Settings underscore schema, Jason is the file that stores the list of fields, whilst settings underscore data Jason is the file that stores the values set for each of those fields. This data syncs directly with the theme editor. So if we change a value in our code here, it will be reflected in the code editor, just like if we change a value in the theme editor, it will also be reflected in the code. When it comes to sections and templates though, the schema, in other words the list of available customization options, are stored at the bottom of the section file under the liquid code that uses it as sections can be included multiple times across multiple templates. The values for these fields are set separately in the template file, along with the setting values of all the other sections in that template, as well as the order in which the sections appear. For default templates, the file name is just the name of the object followed by the file extension. Usually do Jason. For alternative templates, the file name starts with the name of the object, but then is followed by a dot and then the name of the alternative template ending. Once again, here with the extension of either do Jason or dot liquid. For the sections that are included outside of templates, we can find hard coded references to them here in the layout files. The recorded values for these sections sit alongside the values for the theme settings. Inside the settings underscored Dasein file. There is one exception to this called section groups which are a less common feature in Happi that you can think of as a mini template that sits on the layout file and lets you re order sections outside of the template. If you'd like to learn more about section groups, I have a dedicated video on my Youtube channel. Just search for Happi section groups and it should show up towards the top of the list, if not, the first result. All right, so just to recap here, as I've thrown a lot of information at you. Number one, everything you see in the theme editor is determined by code in the theme folder. Number two, each section is stored in its own section file. If you know how to code sections, you can create a new section file here and use it as a building block within your theme Editor number three, each template is stored in its own template file. Products, collections, pages, blogs and blog posts all have a default template. But you can create alternative templates for each of these if you want certain objects to have a different look and layout Number four sections that are included on your overall theme layout file are static and any changes to their settings will be applied across templates. The value of these settings are stored in the settings underscore data, Json file, and finally the schema. In other words, the list of options for your overall theme. Settings are defined in the settings underscore schema Jason file, and the stored values of each are also stored in the settings underscore data Jason file. If you're simply using this course to understand the shove fire admin and you're not looking to program themes, then you don't need to worry about where exactly the code is stored in the theme code. The most important thing to note here is that any values you said in the theme editor will be stored in that specific theme that you're working on. So for instance, if I was to duplicate one of my themes and then head into the theme editor of the duplicate, change a value and then hit Save. The data between these two themes will now be out of date. The change I just made only applies to the theme on which I made it. This is different to say if I change something outside the theme editor, like if I change the title of a product or the content of a blog post. Like I said, there is a lot to cover with themes. But specifically for the topic of this class, I just want to bring your attention back to the architecture we discussed in the earlier video. A reminder here that you only have one core Hove fi store and you can only have one online store sales channel, but you can have multiple themes. So just understand that whatever you set in the theme editor is exclusive to one of your themes. Whereas all of this other data that doesn't change based on the theme that you're looking at. If you want to dive deeper into themes and how they are coded, I have a few other classes here on skill share that discuss theme development specifically. So if you'd like to learn more about themes, check out those classes. 9. Custom Data - Metafields & Metaobjects: In this video, we'll cover how to add new objects, as well as how to add new fields to existing objects in your Shuba Fi store. If we take a product as an example here we can see some of the default fields on the product object, like the title, the description, the tags, and the vendor. But if we want to create some custom fields for the product object, then we can do that by creating something in Shubifi called a metaphield. Metapields used to be hard to work with in Shuba Fi, so there's actually a bunch of apps still on the app store for managing metafields. But nowadays you don't need an app at all to create and update metafields in Shubifi. To create a new metafield definition, you simply head two settings and then click on Custom Data. Here you can see the list of objects that you can create metaphields for. This list includes products, collections, pages, and blog posts. At the top of the list is products. So if we click here, we can actually add extra definitions here. You can see here that there are already two that came standard with our store. So let's just have a look at those. Now, if we go back to our snowboard product here, you can see the metafields are at the bottom. So the definitions are the list of available metafields. And then what we have down here is a place to set the value of these metapields on a particular product. So let's go back to Settings Custom Data and create our own metaphield. If we go into products here we've got snowboard length snowboard binding mount. Maybe we want to add in a another field. Here we have the list of options. There's quite a few different options. We can create a single line text field, a multi line text field, put in numbers in the form of integers or decimals, link to a certain product, link to a certain file, which gives us the option of linking to any file, or specifically to images, or to videos or both, which is really cool and flexible. We can add in a date and time dimensions, volume weights. There's a lot of options here. We can make reference to other objects in Shopify like collections, product variance, and even meta objects, which we'll get to a little later. We can make it a true or false value. Color rating, all sorts of stuff. So let's do rating, and I'll call this product rating. And I will say, I don't know. It's pretty self explanatory, so I probably won't put a description there. Minimum rating one. Maximum rating five. Okay. I'll hit save on that. And now that that's created any product page we go into. Now if I scroll down, you'll see there is an extra field here and I can set a product rating somewhere 1-5 So let's say 2.5 out of five. I'll hit Save, and that value is now stored then on our product page itself. So let me grab the URL for this page. Open it up. In a new tab, we could program somewhere into the theme where that data shows up. We could program it to show a certain number of stars based on the star rating right here. So maybe I'll run through that example right now. If I head into the online store. We actually can do this without having to code up anything. We can use what's called dynamic linking. So I'll go into the theme editor for the product template that's running that product. It's actually using the alternative template. So I will go into products alternative. Now instead of snowboard vendor I can change this, get rid of that, and insert a different dynamic source. Well, let's put in the product rating. And then we can say out of five. And then we just need to put a space in there and let's just say rating right now, for something more sophisticated, we might actually put in star icons and calculate how many of the icons show up based on this rating right here. But for this basic example, you can see that the value is coming across. And if I was to run another product through this template, it would show up with a different rating if the rating is set. The risk here that we have. So if I go into, let's just say this one and I change this two alternative as well. If I don't have a value for product rating, then we'll start to see a bit of a different result. So we'll go down here, see if I can grab the URL. I can't. That's annoying. I'll just hit Preview on that. And here you can see, because there is no value for product rating, I still get the surrounding text, but I don't get the value inside here. So how we usually fix for that is either we need to make sure there's a rating on every single product. Or program it into the theme so that it only shows if there is a set value. But I'll get into a better example of this at the end of this lesson. For now, I want to show you how we can create completely new objects in choi. So what we saw just then were Metafields, Metafields allow us to add new fields to existing objects like products, collections, customers. But what if we wanted to create a completely new object? Well, we can go into content here and create a meta object definition for this. So this is basically creating our own object. So if I go into here, let's just say it's a designer. This is a typical example, because in Shopper Fire, there's no such thing as a designer. Or if you had a bookstore, an author. And then you can go down here and say, you know full name, make this required. And then we can do a little bit of a bio, all right, maybe put in, so we go file for image and then we only accept images in the accepted file types this image, we can either do one value or a list of values. So we can do images and switch this to list of files. I'll just do one. Now that we've created our design, I'll hit Save and we can now start adding entries. So let's just say for our snowboard example, let's say it's the founder of Shopifi, Tobias Lutke. I'm pretty sure this is how you spell his name. Founder of Shopifi and creator of snowboards. All right. As the bio, I'll just upload an image of Tobias that I have already procured. All right. And then I'll hit save on that. And now we've got a designer in our list of designers, which is a definition that we set up. So now we've got this designer object in addition to the existing objects within Shopify like products, customers, collections, et cetera. And the cool thing about meta objects is we can link them to other objects in our store using meta fields. So let's do that right now. Let's say, for instance, that we want to assign this designer, or any other designer to specific products that they designed. So let's create a field for that. We'll go into custom data, go into products here, add a definition. And I will call this designer. All right, then I'll go here and what I can do is select meta object as the type. And then it'll allow me to choose what type of meta object, like what custom object that we created we want to use which is designer. If it's designed by multiple people, you can change this to a list entry, but I'm just going to do one entry. All right, and now let's head back to one of our snowboards, let's say the ultimate snowboard. And if we scroll down, we can select one of the designers. And we only have one which is to bias. So I'll hit Save on that. And then we can use that data within our theme. So now that we've created a meta object and some meta fields, you might be wondering how we might use this in our Shopify theme. Well, there's two ways we can use it in themes. The first one, which we won't cover in this video, is using it in Shopify Liquid. That is more of a Shopify theme programming topic. But the other one which I showed you just before is dynamic linking. Rather than spending a whole bunch of time setting up meta fields and meta objects and programming our theme, I'll show you an example from a current client store. So this right here is a draft product template that will eventually be run on a few different templates on this store. And there's a lot of dynamic data here, so for instance, these dots right here are dynamic. For each product, we're going to need a different blurb here. We're going to need a different call out here, some more blurbs here. Coming down to here. This information needs to be dynamic. This information needs to be dynamic. These values need to be dynamic here, meaning that it needs to be specific to the product, so it can't just be stored on the template. So what I did for that was I created meta objects and metafields. If we go into that product page, obviously you've got all the normal fields up here. But if we scroll down, we've got a ton of other metafields. For instance, accent color and background color. So this background color is set in a metafield. This accent color is set in a metafield so that it can change based on the product that the customer is looking at. I've got these above the fold USP's, so the natural energy, weight loss, and keto support. Because each of these has both an icon and text component. I've stored that in a meta object and then this field is a meta object list. All right, so if I go down to content here, let's open that up in a new tab. And if I go to icon text combinations and go to Natural Energy, you can see the icon and the text here. This is also recycled for these blurbs right here where there is an icon, a main text, and then a body text. So if we go looking for that in here, fuel for the body, you'll see that that information is right here. And then we link these different icon text combinations right here in the metafields. This is a bit more of an advanced example, but essentially you can see here that the values we set in our metafields are coming through on the front end, so these macronutrient amounts. If we go down to here, this template has been programmed to show these values. So this right here is an example of how we can use custom data to create dynamic data that we can insert into our template dependent on what product the customer is looking at. If you'd like to learn more about Shopify Metafields and metal objects, I have a range of videos for free on my Youtube channel, so you can search for Shopify Metafields on my channel. It looks like this is also bringing up meta objects as well. So you can learn about meta objects in more length metafields. And I cover the different ways you can use metafields, including the old way, which used to be the case before the recent updates a few years ago. Metafields are a way for us to extend our Shopify store front and apply to both objects in the core and the online store sales channel. So that's it for this lesson. In the next video, we're going to cover discounts. 10. Discounts: In this video we're going to cover how to do discounts in hopi fi. Discounts can be provided in a few different ways in schubifi and can get pretty complicated depending on the discount conditions for common discounts like buy one, get one free. We can easily set these up in the discount section of our admin here. There are two types of discounts that we can set up in this section. We can either set the discount to trigger if the customer applies a certain discount code checkout. Or automatically, meaning that the customer doesn't need to do anything other than meet the conditions for the discount to apply. This is quite simple if you'd like your discount to follow the below rules. But if you'd like a discount to apply outside of these rules, that's where things can get a little complicated. If you're watching this video before August 13, 2024, and your store is on the highest tier of chopifi known as chopifil. Then you can use an app called the Script Editor, which allows developers to write Ruby code to enable discounts based on more complicated conditions. For years, this has been the only way to program more complex discounts in Shopifi. But after August 13, 2024, all stores that are using Shopify scripts will have needed to cross over to something called Hub Fi functions. Similar to scripts, Shopify functions allow developers to create more complex discount formulas. But unlike scripts, these discounts can be added alongside regular automatic discounts and discount codes. Obviously, programming Hopi fi functions is outside the scope of this class. Like scripts, you need to be on the highest tier of shopify to use them. But the good news is that you don't need to be on Shuba Fi to leverage the most complex discount rules available within Shobifi functions. All stores are able to install discount apps that leverage Sofi functions. These apps provide their own user interface for merchants to create discounts that aren't usually possible using the regular settings. So to demonstrate how one of these apps that leverages shop Fi functions plugs into our regular discount section. Here, let's go in install one of them to see an example. All right, so if I click here, it'll open up my search box here at the top, M filter to apps, it'll show me my installed apps. But if I search for the app I'm looking for is called Discount Hub. You can see here we don't have any app in our store by that name. But we can click here to search for Discount Hub in the Shop Fi app store. So I'll click on that and that'll open it up in a new tab. And you can see here, Discount Hub Unique Discounts is the one I'm looking for. So I'll click on that and then I'll click on In. That'll take us to this page, which is the standard app installation page on Schubifi. It's just telling us that we are agreeing to let this app access some of our information, which is totally cool. I'll click install app to finalize this process. Now you can see we are within this discounts hub app. Now there's two ways we can set up discounts. We can do it from within the app. But what I want to show you is now if we click our discount section here and I click Create Discount, you've got our regular options up here. But now since we installed an app that utilizes Hub Fi functions, you can see that we can also add a whole other list of different chobe fi discounts below that are pre programmed by this app. Okay, so one of them which I thought was interesting, is we can offer a discount to only certain customers that have a certain E mail. I believe this is called the employee e mail discount. So we'll click on here and one thing you'll notice is this takes us to the app to create our discount. We don't get the same user interface as if we're creating a normal discount in Shubifi. So it depends on what app you're using, but it'll be a different user interface to the normal one. But it should be pretty simple because we still have access to choose whether we want it to be discount code or automatic. And for this one I'm going to call it half off for Chris the freelancer, and you'll see why in just a second. I'll go down here and I'll limit this to only my e mail address, and I will give a 50% discount. All of these other things can stay the same. I'll hit Save on that. Now you can see that that discount gets added to our list of discounts in our discount section. And if I scroll over here, you can see under type, it'll list the app that I used to create it. And you can see here we are using this app to power this discount, which differs to the other ones. There's no drop down for these other ones because they're just in native Shopify. Let's now test whether this works. I'll click this button to view my online store. And let's navigate to a product, any product. Add it to cart. Check out when I put in my e mail and click Continue to shipping. You'll see that I get the discount as soon as shop Fi recognizes that I'm using this contact e mail. So I get the 50% discount that I set in the admin for this product. So this is the latest system in Shubifi. It's a way that we can use apps to plug in to the existing discounts section here in Chobafi, like I mentioned at the start of the video. Previous to this, we used a separate app and wrote Ruby code in order to program discounts. And that was only available to stores on schobfil, which is the highest tier of schubifi. So now if we are on shop, we can write our own functions and deliver our own custom apps. But for the rest of us we can simply leverage apps that leverage the shop Fi functions API. And we can use the user interface of these apps to create functions that we can't otherwise create in this discounts section. 11. Apps: In the last video, we installed our first Shopify app in order to extend the discount functionality of our Shopify store. In this video, we'll talk about how apps plug into your store and in general, how to use them. So as we saw before, the apps section of our Shopify store currently sits right here under the sales channels. Clicking the menu item for apps. The list of installed apps will appear in the drop down at the top of the window. Clicking on any one of these installed apps here takes us to the page for that app. And also temporarily adds the app menu under Apps on the left here. If we'd like the app menu to sit in this section permanently, we can simply click this button to pin it, and it will stay there if we navigate off this page. Given we've only just started this store, we only have a couple of apps installed. So to install more, we can click on apps again and in the drop down, use the search bar to search the Shop Pi app store. This button will direct us off of our Shop Fi store and onto the official shop App store. From here, we can browse, search, and choose from over 8,000 different apps, all of which have passed through Shopify's app store requirements. As we saw in the previous example, we can click to install one of these apps, approve the required permissions, and start using the app straight away. But what do these apps do and how do they work? Well, technically, a Shopify app is any software that plugs into your hopi fi store via the admin API. These apps are all third party pieces of software that live externally to your Shopify store itself. Literally, the only thing that defines a Shopify app is that it leverages the API that Shop Fi provides. In less technical terms, all I'm really saying is, is that while apps can fit nicely here in your menu structure, these apps are not part of the shopified platform. Instead, they simply plug into the hopi fied platform. The reason why I say this is to make the point that each app works entirely by their own set of rules. If I were to head into any section of my Shopify store, you'll notice that the user interface stays consistent. Because this is all part of the one shop fi admin and follows a single design system. Apps, on the other hand, can mimic the look and feel of the shop fi admin, but it's not required. Therefore, what you see in each app differs considerably. There is no one way to use an app for this reason. There's no way to explain apps in a way that applies to all 8,000 of them. Again, the only similarity between apps is the admin API. The API that allows it to plug into the Shobifi store. If you are more of a technical user, you can head to the official documentation to read more about the admin API and what possibilities are available. But for most of you, how you will interact with apps is by searching for solutions to problems in Shopifi that are not able to be easily solved by the platform itself. For instance, implementing a product review system, a customer loyalty program, or a system for signing up customers for subscription payments. These are all examples of functionality that shopper find might not be able to provide the database or use the interface for anything that is purely front end though, definitely check your theme first and see if it can be achieved by simply editing your theme code. There are a bunch of apps that simply modify your front end using external software, where you could have just updated some theme code and gotten the same result. Given that each app plays by their own rules, I'll end the lesson here. If there's a particular app you want to learn though, let me know in the comments, and I can possibly create a separate learning resource specifically on that app. 12. Conclusion: Congratulations, You've now reached the end of this class on Shopify store set up. Remember, if you haven't already posted your Shopify store plan in the class project section of this Skillshare class, please do so now. And if you want any feedback on it, just leave some questions with it and I'll check them out. If you'd like to dive deeper into Shopify, you can check out my full range of courses at Chris the Freelancer.com slash courses. I also have a few theme customization classes right here on Skillshare for you to check out if you want to learn how to gain a greater level of control over your Shopify store front. So check out those two if you're interested. As always, if you have any questions or concerns on what we covered in today's class, leave a comment in the discussion box below. And I'll do my best to point you in the right direction. Thanks as always for watching, and I hope to see you again on some of my other classes.