No-Code Shopify: How to Create Custom Templates with Page Building Apps + The Theme Editor | Christopher Dodd | Skillshare
Search

Playback Speed


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

No-Code Shopify: How to Create Custom Templates with Page Building Apps + The Theme Editor

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:26

    • 2.

      Preface

      5:34

    • 3.

      The Native Shopify Theme Editor

      14:15

    • 4.

      Announced updates to the Native Theme Editor

      11:25

    • 5.

      Introduction to Page Building Apps

      3:24

    • 6.

      Gempages

      14:54

    • 7.

      Replo

      10:18

    • 8.

      Instant

      18:33

    • 9.

      Summary

      1:51

    • 10.

      Conclusion

      1:06

  • --
  • 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.

283

Students

1

Projects

About This Class

In this No-Code Shopify Class, we'll cover 4 ways to create custom designs on Shopify without having having to write a single line of code.

We'll start with Shopify's native solution, the Shopify Theme Editor and then look at 3 alternative page building apps that we can install and work with to create our own templates.

The main goal of this class is not just to run through a bunch of page builder features but to help you develop an understanding of where these no-code options fit into your store, understanding the limits of these apps and what’s really happening behind the scenes.

Basically, there are two options with infinite sub-options for one of them. These are:

  1. The Native Shopify Theme Editor, and
  2. Page Building apps

Page building apps are a lot more unlimited but come with some drawbacks (which I'll discuss in the class).

By the end of the class, you should have a solid understanding of the No-Code options and whether you'd like to learn some code instead.

Prerequisite Class Recommendation

While not technically a prerequisite, I do recommend you take my Shopify Store Setup class before this one if you're kind of new to Shopify. You can find a link to that class here: https://skl.sh/3PDCx7u

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: So you want to create custom designs on your Shopify site. But you don't want to have to dive into the theme code as maybe you're not a developer or maybe you just haven't built that skill set yet. So what are your options? Well, in this skillshare class, we'll be covering exactly that. If you haven't seen my face before, I'm Christopher Dodd. I'm a top teacher here on Skillshare.com And most importantly, a Shopify expert with some of the most watched Skillshare classes on Shopify Development. In those classes, as well as my own Youtube channel. I go deep into the development side of things when it comes to Shape Fi, but in this class we're going to take our heads out of the code editor and see what can be achieved in Shape Fi without any coding. I know a lot of you are store owners or creatives that don't necessarily want to be a developer like me. So I've created this class just for you. Of course, we're going to start with the purely native approach using Hope Fi's own theme editor. But then we'll take a look at some of the page building apps out there which are more unlimited in terms of customization options. The main goal of this class is not just to run through a bunch of Page Builder features, but to help you develop an understanding of where these no code options fit into your store. Understanding the limits of these apps and what is really happening behind the scenes. So if al Fv do, if you're ready to learn how to customize your Shopify store without coding, click on the next video and I'll see you on the inside. 2. Preface: Right here, you can see one of my Shopify stores. It's what's called a development store, meaning that it has almost all the features of a normal Shopify store. But I can't actually sell anything on it, it's just for testing and development purposes. Ideally, you have your own hope fi store to work with. But if not, you can always create a free development store like me. I won't go through the whole process in this class as I've covered this multiple other times in other courses and classes. But if you do want to see a tutorial on how to do it, you can find one in less than three here in my previous class called Shopify Store set up. In fact, if you're new to Shopify and need a primer on how it all works, I would recommend watching the entirety of that class before this one, especially the fourth lesson of that class, the one on Shopify store architecture. I'll pause here for a second to give you a brief moment to consider whether you want to do that. If so, pause this video and return back to this class after you finish watching the other class. Okay, ready to keep moving? Let's start by focusing our attention on the online store sales channel. Within the online store sales channel, we have our themes, our blog posts, our custom pages, our link lists, also known as menus that sit here in the navigation section. And then some settings in here related specifically to this sales channel. If we head to the themes, I hope you're familiar with the concept themes. Basically, take the content that you put into your store and display it to the front end. For example, if we were to look at a product page, the title and the price here come from whatever you set the price and title to be in the admin for that particular product. That being said, the structure that surrounds this information is determined by the theme you're currently looking at. If there is no preview bar at the bottom of the screen telling you what theme you are currently on, then you are most likely on the currently live theme of your store, which you can see here at the top of the page for themes. Now if you know how to write front end web development code, themes are super flexible because they are all built on code. In that previous example, if we took a look at the product title and product price within the theme, you can see the surrounding code. This part here is called Chop Fi Liquid code and tells shop Fi to insert the title here and the price here. It's important to note that regardless of whether you want to touch the code or not, the end result is always code. What I mean by this is that any of the options we use to avoid code will simply create code for us. We might not have to learn how to code, but simply understand that code is always created. You can see proof of this by looking at any page on the web, shopify website or otherwise. All you need to do is to click View Page Source. And as you can see, the result is always code. You may not understand this yet, but the theme is the optimal way to customize your store's front end. The only problem is the theme editor, which we'll discuss shortly, is still very limited for a lot of users. The theme editor, just to give you an overview, is the user interface that shows up when you click here to customize your theme. If we look inside the theme code, the available options in your theme editor have actually been coded into the theme itself. And the value of what the user sets in one of these fields is simply inserted into the code. In a similar way to how we saw before with the product title and price. Given that the only options in your theme editor are the ones that the theme developer has specifically supplied for you. You might often find that the option to customize a certain part of your theme is not available. And that's what I mean by this solution being kind of limited. That's why app developers have created applications called page builders. These apps have been developed by third parties and provide their own user interface for creating page designs and layouts in Schobifi. When you build a design and click Publish on one of these apps, code is then created for you and injected somewhere into your habi fi store end or theme. I know this might sound a little too theoretical or complicated for a first lesson in the class on no code shopify. But I bring these concepts to you to help you understand what is actually going on. Before you spend hours investing into learning and building on apps without understanding how they actually affect your store, let me attempt to simplify this for you with a simple table showing you your options. Option one is to deal with the theme code. This is the only option in which you'll have complete control over your store's front end. While I do recommend it, it does have the steepest learning curve. And as this is a class on no code shopifi, I'll completely cross this option out for this class. Option two is to use the options available within your theme editor. This is the ideal scenario, but it totally depends on what options your theme has. A theme could have hundreds upon hundreds of options or zero. It's all up to the theme developer. And at the time of recording this class, the theme editors, drag and drop capabilities are very limited. You can rearrange sections and you can rearrange blocks nested on a section. And that's about it. We'll get into more detail on this in the next video. Finally, option three is to install a Page Builder app. This is the least robust and native way to customize your Storefront. But these apps are very popular as no code solutions, as they are built specifically for no code users. Initially, these apps might sound amazing, but as you get deeper into them, you might find that straying from the native Shopify way of doing things can actually cause some of its own problems. Now in the next video, we'll talk about the second option, the shop fi theme editor. 3. The Native Shopify Theme Editor: The native Shopify theme editor is what I recommend all my clients and students use to customize their front end. We can customize any theme by simply clicking on the customized button for that theme. Before we start playing around with this version of the theme editor, it's very important to note here that Hopefi is constantly changing and improving the user experience of the theme editor. What you're looking at today could be very different to what I'm showing you right now. But also I want to make note that as the native theme editing system improves on Shape Fi, the need for page building apps slowly diminishes. Shabifai has some exciting updates to the theme editor on the way, but the timeline of when these updates will come out is never set in stone. So unfortunately, our only option is to stay patient and wait for the update. In the next video, I'll cover a big announcement to the theme editor that was just announced but has not yet been released. But as that hasn't happened yet, let's get back to what the options are at the present moment. So first of all, Shobifi uses a templating system so that you don't have to create separate looks and layouts for every single product page, collection page, blog post, et cetera, et cetera. By default, every product page will run through the default product template. Currently, we are on the home page template, which as there is only one home page for a website only applies to one page. But if we click this button, you'll see the list of templates we can modify. Let's click on Product and then click on Default Product. We can see that this template is assigned to 12 products in our store. And that there are no other product templates for selection here. Therefore, we can assume that this template will basically apply to all our products. We can create an alternative product template here, but we'll get to that in just a second, as this is the only product template in use on this theme. Any changes we make here will apply to all product pages next to the drop down. For choosing which template to edit, we have a drop down for Markets, which is a newish feature that allows us to make edits that only apply to a certain market. For example, if we switch this to Australia, you'll see the wording change for add section and add block. These will now become add section to Australia. Add block to Australia as you can see here, we'll get a warning with a link to learn more. And as this is more of an advanced concept that won't apply to most of you, I will skip it for this class, but you can always refer to this document to learn how the market selector works within your theme editor. Switching back to the default context, let's talk about what else is in this top bar, from left to right, we have the button to exit out of our theme editor, followed by the name of the current theme, followed by the badge here to say whether it's live or not. And then these three dots to expand some more information and options, The main ones being the direct link to edit the code of the theme or to view the theme as it currently stands on the front end. Obviously you've got some other buttons here, but the view button and the edit code button are the most handy. That being said, as this is a no coat class, it's basically just the view button here which is of interest. If we now take our attention over to the right of this tool bar, this button will deactivate the inspector, which all that does is toggle on and off this function, where you can hover at each section visually to see the section name and click between them to add new sections. Or click on the section itself to open up the settings for that section on the left hand panel. In terms of completely visual Dragon Drop Editor functionality, this is about as far as it goes, currently with the Shove Fi theme editor, but there are plans to improve this considerably. Stay tuned to the next video in this class to find out more on that. For now, let's turn this off and use the left side panel for creating, updating, and moving sections. But before we do that, there are just a few more buttons to address here. Firstly, you've got this toggle here to view the page on desktop, mobile or full screen, which simply hides the sidebar so you can see the design spread across the full width of your window. Then you've got the undo button, the red button, and the save button. These are pretty self explanatory. In order to get these to activate, we just need to make a change to our template and then we can either save or undo it. If we undo it, then we can just as easily click to redo that change as well. Okay, so with the top bar out of the way, we can now discuss this left hand panel which is where we will be making all of our edits. First you'll see from this theme we have a header group, a footer group, and then we have the template content. Section Groups are a pretty new feature in Shopify, so you might not see these in your theme. The ability to add a section and arrange the sections here unless that feature has been added to the theme. Regardless, it's important to note that the sections outside of this template group here apply to something called the layout. Typically, themes only have one layout, so we can simply say here that these sections will stay the same no matter what template we're looking at. These sections, on the other hand, are specific to this template. And so any change we make here will only affect the current template that we're on. So taking you through how sections work in Shapefi sections are the main building blocks of Chapifi themes. Essentially, every page in habifi is just a list of sections stacked on top of one another. For example, if I bring back the inspector for a bit, we can see these sections in the header group, the announcement bar section, followed by the header section. And then we can see the sections belonging to the template. We've got product information followed by related products. And then finally we've got the Potter section, which belongs to the layout inside the photo group. One thing I didn't mention with this inspector is that we can click into nested elements within the section called blocks. As you see here as I hofer over these elements that the corresponding block is highlighted underneath the section. Let me deactivate the inspector once again. And we can now see here that we can rearrange sections on a template as well as blocks within a section by clicking and dragging, by clicking on ad section. We can add any of these 17 sections to our theme. Or if we have a particular app installed that uses theme app extensions, we can include a section from a particular app as well. This one right here is a custom app that I created for another tutorial. In a similar fashion, we can add additional blocks to our section until Shopify publishes the update that I'll cover in the next video. The list of block options here will be limited to the list of block options defined in the section itself. So you can see here that because this section only allows one button block and one heading block per section, our only option here is to add a text block here which we can arrange alongside the other blocks. Both sections and blocks may or may not have their own settings. So you can see here for the image banner, I can set which images I'd like to use, set a specific opacity for the overlay, change the height of the banner, et cetera, et cetera. Then if I dive into some of the blocks here, you can see that these have settings as well. I could change the text of the button, update the address of where that button should link to. And in order to save any of these changes, I would just need to hit Save in the top right hand corner. And my changes will then be applied to the theme. Finally, with any section or block, we can click on the trash can icon to delete it, or the icon to keep our settings in place, but simply hide it from the end user. At this point, it's a good time to mention that these sections and blocks apply to this specific theme, which is version 12.0 0.0 of the Dawn theme by Sobi Fi. It's important to note that every theme is different and the settings in any of these sections and blocks come from schemas that have been written into the theme itself. I won't go into the code in this class as this is a no code shopify class. But just to note here that if you know some code, you can modify these schemas to enable new options within an existing theme. Back to the editor here, bear with me as there's just a few other areas to address. Here on the left panel, you'll notice that there are two other tabs here. In the second tab lies your theme settings. These settings aren't linked to any one section or block, but apply to anywhere within your theme. For example, we can go in and edit specific colors that are stored in the color scheme of the theme. All of these are grouped into separate accordions so that we can navigate between them more easily. Finally, the last tab here is where we can enable and disable certain app embeds on a single theme. This is most likely a panel you won't have to touch unless directed to by the developers of one of the apps you're using on your store. Before we wrap up this video, one thing that I promised to talk about was the alternative templates. So if you remember when we clicked up here and went into products, you can see that there's only one default product template. But I can create this button to create a template. Let's just call this alternative product layout. Okay? And then we can choose what we want it to be based on. And because there's only one template we have currently in our theme, we only have one option, which is the default product template. So we're going to create, oh, actually it won't. Let me do layouts. So let me just do alternative layout. The product part can be assumed. Okay, I'm going to click Create Template. What this will do is create an alternative product template in our theme. I just want to show you that quickly. I know this is a no code class, but just to show you what it's doing behind the scenes because you can do exactly what I just did in the code as well. It's creating right here. If we go into where products are, this products is the default product template. But this one right here, the one that we called alternative layout. This is our alternative product template. Okay, I'll show you how to assign that in just a second, but let's go back here. We've created it using the theme editor. We didn't have to touch any code, but just so you know, as I mentioned throughout this class, code is always created. So that's what's happening on the back end. Okay, so now what we can do is we can create a completely different layout with this. I don't know what we would do. A more practical example would be, we won't let me delete this section. But we can add in like, let's say for instance, we assign this to a very particular product. So we assign this to just one product. And we can talk more about that particular product. We can say more about, we're currently looking at the air pods right now. We can say more about the air pods and then go into here. Airpods are amazing. I'm not a great copywriter actually. We can get Shopify to generate text for us, description or selling points of Apple airpods Get to generate it for us. Look at that experience, the seamless connectivity and crystal clear sound of Apple airpods. How good is that? Okay, and then give this button label, actually we will just delete the button. You can have a product page with that particular detail. And all we need to do is just assign it to this Air Pods product. I'll hit Save on that and then I'll exit out of the theme editor actually. And I'll go into products, find that Air Pods product in our shop admin. And then down here is where I can change the theme template. And instead of default product, I can switch to the one we just created called Alternative Layout now. And I hit Save and click to preview that product. Looking at it through our current theme, Dawn version 12, you can see once we scroll, plast the Product Information section and the related products. You can see more about the airpods experience, the seamless connectivity and crystal clear sound of airpods. That's how we can affect the layout of a particular product while keeping the same layout template of the other products. As you can see, all of these are using the default template. They're not going to have that extra section, but on that particular product that we assigned the alternative template to, that section that we inserted on that template is present on that product page. Okay, so if we do want to edit this in future, we don't do it from here, the actual product listing. Within our admin, we have to go back to our theme editor. Navigate to the product template assigned to that product. Now you can see it's assigned to one product. We're previewing air pods, which is the product that it's assigned to. Now if I want to edit the template for this particular product, I can do so through this template. If I go back to the default template, you can see here that that section is not on the default product template. So there you have it. The Shopify theme editor. One of the questions the team at Skillshare asked me when reviewing my plan for this class was the reason behind the statement I made at the start of this lesson. That the native Shopify theme editor is what I recommend all my clients and students use to customize their front end. It's a hard statement to explain without going into technical details. So instead, let me just use an analogy. Maybe you've heard of jail breaking. It's the practice of modifying your phone so that you can enjoy unrestricted access to the entire file system. This access allows for changes that are not supported by the phone in its default state. Well, using a Page builder on Chobifi is something a little bit similar. It's a hack solution that could go against the themed design system that Chobe Fi have created without going into too much detail. You might find that through experience that straying away from Chobe Fi's standardized system might cause some unexpected problems. Some of which we may just see show up in the class once we start to install some of these page builders on your store. 4. Announced updates to the Native Theme Editor: Twice per year. Shobifi makes a bunch of announcements as part of something called Shapefi editions. In Shabifi's Winter 2024 edition, Shobifi announced some interesting updates to themes and the theme editor. Soon, blocks will be just as modular as sections. And perhaps more excitingly, blocks will also be able to be nested within other blocks as opposed to just sections. Two important things to note before we look deeper into this feature is number one, there has been no specific date set for this feature to be released to the public. And number two, even when it does come out, your theme will need to be able to support it. What this means is that new themes built after this change goes live will most likely leverage this new functionality. But there will be a lot of older themes that will remain on the old system. So keep that in mind for now. This feature is only available on developer preview, which means only partners like myself can play around with it. That being said, let me give you a little preview of how it should work when it comes out. All right guys, before I dive in and show you this cool new feature, I just wanted to provide a little bit of context here. What I'm in right now is a development store that has the developer preview enabled for this new feature. So this store, as it says here, is in development. It doesn't really say it, but this is not a live store, like I can't actually sell product and use this for a business. This is just for testing and development purposes and to preview this new feature. How I was able to do that is because I have a Hope Fi partner's account. And from there you're able to create a development store. I won't go into the process of that in this video just because I don't require you to actually do this. You can just watch this video to see what changes are coming and decide for yourself whether you want to wait until these come live and start to use them in your no code, chop fi workflow. But if you did want to preview this ahead of time and you're very keen to check this out, then you can find on my Youtube channel, which I will mention more of in the conclusion of this class, you can find a video on Shopper Fire Winter Editions 2024, which is when this feature was announced. In that video, I show you how I set up the developer preview store. Okay, so just in case you wanted to follow along, that is how you do it. And the other thing I just wanted to mention here is like I said, in order to take advantage of this new feature, not only do you need to be on a development store with the developer Preview enabled, you also need to be running a specific type of theme. And as you can see here, this theme is called reference theme main. This is a theme that has been created by Hub Fi to show you how it's going to work when it comes out. So you need the theme and you need the store. It's a bit of work to set up, so I decided to skip that for this video. But if you do want to know how to install the development theme onto a development store, you can check out that video on Youtube. But without February. Ado, let's actually jump into the customizer here and you'll notice that it's a little bit different to what we're used to. So here you can see we've got this image banner here, which is, first of all, the theme looks very much like dawn. I think it is based off of dawn. But it's leveraging these new theme reusable blocks. So as you can see, there's an image banner section here which is also present in dawn. But if we look underneath image banner here, we can see there is a nested group called group. And within this group we have nested blocks. Now, I can't add another block under here. It looks like I can button secondary. There we go. Now we've added a block within this group of blocks, right? And then I can rearrange these blocks within these group of blocks. And what this group is giving me is a container with a white background. But I can change the content position, I can change certain like layout aspects here. It looks like changing it to horizontal might be a little bit buggy because it is in Developer Preview. But the thing to note here is that previously we would have a section and then we could nest a list of blocks within one section. Now we can put a list of blocks within a block within a section. Let's have a look at another example. Let's go down to custom section. This is probably a better example because we've got custom section here. And if we look inside, we've got this block for the heading, and then we've got this group. And then within this group we've got two groups, and actually we've got something in the middle. Ah, so we've got basically three columns. So we've got this group, which is basically like a three column layout. And then on this third level, we've got group image group. This is basically like our columns. And then within this first one, we can stack two blocks to make one column. I could move this one over to the other side. And this gives me a more flexible control over my layout. Okay, so yeah, as you can see, we've got, in this custom section, this is where it becomes way more customizable. We can nest groups within groups, within groups. And that allows us to create custom layouts that were never possible before, just having a single level of blocks nested under a section. Okay, so this is a pretty exciting stuff. This is going to be a huge paradigm shift in the theme editor and I think it's going to be enough for a lot of people to not have to use page builders because I mean to do something like having this heading. I'm not saying this is a practical example, but to have something like heading above the icon for one of these columns, but not all of them, that would be near impossible to do. You'd have to like set a check box. It wouldn't be intuitive like you would have to build in a lot of options within your theme to get that. But now, with the fact that blocks are reusable and they can be nested within each other, it really changes the game. And I hope you are starting to see what I mean here with how this is all into different little blocks that I can then click deeper into. So like here we've got this section, then we've got a block, and then within that block we've got these three other blocks. And each of these blocks and sections have their own settings. So yeah, if you want to play around with this, but this lesson or this video is more to just show you what's coming up in order to inform whether you want to invest in a page builder still or wait until these changes come about. So that's very encouraging to see these features come out to the theme editor. The better the theme editor gets, the less appealing page building apps become. And that's always welcome for me as a developer. Given that this new block functionality has made it to develop a preview, we should see it released to the public pretty soon. As for flex sections, something that was announced six months before the last edition, we're yet to hear an update on that. So for now what I'll do is I'll end this video with a clip from Have Fi's official Youtube channel where the vision for the new theme editor is discussed and flex sections are introduced. Okay, so let's move back into the online store editor, which is where I know a lot of you spend your time making your sites look great. And I want to show you some new features in our show, Fire Themes that will help bring your store a little bit more to life. So right here in the editor, I'm going to click into my theme settings and click on Animations. And there's a couple of cool little things here. So you can have revealed sections on scroll, which gives me this nice effect when my sections kind of appear dynamically as I scroll down the page. And this other hover effect for three D lift means that as I mouse over the elements on the page, I get this nice three D shimmering effect which just brings the site to life. It's really cool. The last little effect I want to show you is in sections where you have images, we have this new effect where you can basically create a parallax by setting fixed background positions. So as I scroll through the page, we get this nice parallax effect, which again, great visual effect, makes your sit a little bit more lively. Now, everything I've showed you today up until now is live and out there for all of you to use. Before we wrap up today, I want to give you a peek behind the curtain at a couple of new features that aren't ready yet, but are coming soon. And I'm excited for you guys to get a look at. So the first one is something we're calling flex sections. So down here in the editor I'm going to click out of section, just like I always would in the section picker. I actually now see the sections a little preview before I actually click on them. Which is really nice and helpful if I'm spending a lot of time trying out sections in my theme. Now I've got the section on the page, and this is pretty good, but it's not exactly what I want. Now with flex sections, I can actually customize this section with new blocks. I'm going to click this plus button and say I want another image here. Let's put a couple of actual images into these blocks. I'll pick the tennis balls on the bottom, and let's maybe pick the sewing kit for the top. Now I want this to be sized a little differently. Now I can just pick up this handle and drag it to be the size that I want. I actually want doubles of this section, so I'm just going to click this, Hit Duplicate. Now I've got two of them, but I kind of want this one to be on the right. So let's just going to pick it up and drag it over to the right hand side. Kind of want these to be the other way round. I'm going to drag that down other way around. I want the symmetry here, so I'm going to pick this and I'm going to say, please align that to the right. Maybe. Let's get a little variation on this image. Pick a different sewing kit thing. Great, I really like how these images are looking. Now let's just go in and put some copy in, so we'll call it crafted in the USA. Then let's get some marketing copy in here. I'm actually not very good at marketing copy. Let's get some from shop fi magic copy about tennis gear made in the USA. Let's pick, I don't know, playful, generate. Okay, game set match. Why not? Let's take that then. Last thing I want to fix up is these buttons. These buttons are on top of each other. I'd rather they were actually side by side. Okay, I've got the section looking the way that I want now. This is on Desktop. Let's just quickly check. It looks good on mobile. It's super nice. It's just responsively laid itself out. That's awesome. Just like that, we are done. I'm going to click Save. This is called Flex Sections, We're looking forward to putting this in your hands really soon. 5. Introduction to Page Building Apps: Ideally, Chobifi's native theme editor should be enough for chop fi merchants to customize the front end of their website. But unfortunately for users that want more control over their front end designs, they will end up being forced into using an app. These page building apps represent custom software that offer more customization controls, often enabling more of the features merchants wish to the Shobifi theme editor to have like drag and drop, and standardized components with lots of customization settings. Before we dive into using a few of these apps, I'd just like to help you understand what exactly is happening when you use an app on Chobfi. Let's head over to our Shopper Fire admin and add our first page building app. Currently you can find the menu for apps underneath your list of sales channels. From here, click on the word Apps and the drop down will expand, allowing you to see the list of currently installed apps, as well as search for new apps to install. Let's search Page Builder and see what comes up. This will take us to the Shaba Fi App Store where we can see the matching listings for the search term Page Builder. As you can see, there are a lot of options here, but some of the main ones are Page fly, show gun composer, and gem pages. In this class, we'll take a look at just a few of these gem pages, Replo and instant. Let's start with Em pages. We'll click on the icon or the title for the Em pages listing right here. And that'll take us to the official app page on the Shopify App Store for Em pages. We'll then click on the button to install the app. And this will direct us back to our Shopify store, where Shopify will ask us to approve certain access that the app requires. Remember that even though the app has been approved by the Shop Fi app store, it's still a third party piece of software. The permissions you grant here will allow the app to plug into your Shopify store and make certain changes. Click the install button and now you'll see the interface for the app inside your Chop Fi stores admin. A few things to note here is that, number one, they've obviously designed their app to look quite similar to the rest of the admin. But don't be fooled, this interface is entirely determined by the app. If you've ever worked with a bunch of apps on Chop Fi before, you might have noticed that not all of them look like they fit perfectly into the Hopi Fi admin. And that's because they can be designed however the app developer likes. And number two, likewise to the design, the functionality and exact method that an app like this can use to deliver the designs you create to the actual theme can and often does differ between the apps being used. Also, as these apps are third party software, the cost of the app is not covered by Habi Fi. So most of these apps will have some sort of subscription price. They charge merchants in order to use them. If I click the badge here for development on the Gem Pages app, I can see the different plans available and their inclusions for this particular app. In this class, however, we won't need to sign up to any paid plans in order to follow along. But if you end up committing to a particular app you like, you may want to purchase one of these paid plans in order to get the features advertised. So now that we understand that Page Builder apps are external pieces of software that plug into your store, carry their own costs, and manipulate your store in bespoke ways, Let's move on to looking at how we can use these apps in practice. 6. Gempages: All right, so now that we've covered how apps plug into our Shopify store, let's demo three different apps that I found my clients to be most excited by. These are gem pages, Replo and Instant. Let's start with gem pages, which we installed in the previous video. So I'm going to click over to apps and I can look here at my installed apps. I'm going to click Em Pages Builder after we give it some time to load. You can see here that we can create a new page, but there's actually a new feature over here. We can create sections. Rather than create a whole template, we can create a section that can be included on a template, presumably hopefully in the theme editor. All right, right now I'm going to click Create New Page. Then here you can see that we can create from a range of templates, some of which have been fully built out, fully featured. If we have a product that matches this very well, then we can select one of these as a starting point. Very handy for a lot of people that don't want to custom design a landing page or a product page, but need some ideas. And this is one of the biggest selling points of using a page builder. App Shop Pi is not going to provide this to you with all of the demo content as well. That being said, a lot of these elements are specific to the specific product being sold. So I don't see anything here for snowboards, so let's just start from scratch. I'm going to create a product page from scratch. And what I can do here is insert a two column row, for instance, and start building my layout. This is a drag and drop, this system, which is good for a lot of users. So I could drag a heading into this side, I could drag an image onto this column. As you can see, this drag and drop functionality you don't actually have on Shopify's own theme editor. That's the selling point of a page building app like this. But as this is a product page, I want to build some dynamic content first. Let me, sorry, I'm clicking in the wrong areas here. I don't really use page building apps because I am a developer. But let me see. I should be able to click up here. And now we have this section. I'm going to delete that section. I'm going to scroll down to product. And this will allow us to bring in dynamic product information. As you can see here, it's bringing in the T shirt product which is in my store. But let's bring in the complete snowboard Oxygen. I think it was the collection snowboard Oxygen was the one we were playing around with earlier. All right, so we'll use this as our example product, right? So we've got this product section here and we can change the layout. We can view it on different screen sizes. And what's kind of cool about gem pages, I guess, is that we can build layouts underneath it. So maybe we want a product gallery title, price quantity selector like normal. But then we want to also bring in some other sections below it to really sell the product. So we can bring in, you know, something like this with a predesigned template. You know, we can drag and drop here. So we can really put this image anywhere we want. We can bring it back to that column. We could rearrange this above or below. So lots of flexibility here. And it's a really nice system for users who appreciate that drag and drop functionality. All right, now obviously this is not dynamic content, so we will probably only want to assign it to a single product or find a way to bring in dynamic content here. It's kind of hard with gem pages, though. The area where these apps tend to break down is when we do bring in dynamic content. And what I mean by dynamic content is this right here is pulling in the product title. You can see I can't edit that. I can't edit that. That's pulling from the product itself. This is dynamic data, but right here I could change this to whatever image I want. Change this to whatever text I want. It's totally edible. The only downside to that is this content will apply to every product that this template is assigned to. So speaking of assignment, let's go up here and click on zero product assigned. And let's assign it to that product. So the collection, Snowboard, Oxygen, I believe it's called. Click Confirm. Now when we hit Publish, this template will be assigned to that product. Once that's done, we can click View Live Page. And now we can see the product page is equal to what we created here in gem pages. Now because I'm a developer and I think it's important to understand how this is actually plugging into your store. What this is actually doing is creating a template in your theme and then assigning that template to your product. What I mean by that. Let me demonstrate that to you right now. If I go into products and find the collection snowboard Oxygen in my list of products here, and I scroll down to where the template is selected. We've got template GP standing for gem pages, and this long code that represents the template that we just created, right? So it's not a very user friendly name, but it links us directly to this template that we've just created, right? And then if we look into our theme code, don't worry we won't be writing any theme code here. But I just want to show you the effect that this has on your store. You'll see that gem pages, anything with gem or gem pages in this list of files here are files that have been created by gem pages just by installing the app and doing certain functions. So you can see we've got four files here and if we go into our templates folder right here and scroll down, we can see that product template with the code after it. And you can see that it links two sections that have GP section followed by a unique ID. So if we scroll down here, now you can see every section becomes this file in our sections folder as well. So I bring this up because right now this is not that messy. But if you end up building a lot of templates into your store using jam pages or a similar app, it starts to look very messy. Let me show you with an example from one of my clients. Right here is the theme code for one of my clients. And as you can see here, we've got those four files in our layout folder. But if we scroll down, we've got gem pages, templates for articles. And if we scroll down a ton for collections, we've got a ton for even the index template, which is the home page, we've got a whole bunch of custom pages here with different codes. We've essentially got a lot of gem pages files here. So here we go into the product section here, look at all these different product templates without descriptive names. Just codes that relate to products within gem pages. So it's important to note here that when you do go wild with these page building apps, it really adds a lot of bulk to your theme. Here we go into sections here, and you can see if we scroll down, it's not creating much in the way of section files, thankfully, but definitely in the way of templates right here. Now you're probably not going to be playing around in this code editor, but where this will manifest is in the theme editor. If you remember this drop down from earlier where we could view all the product templates. You'll see here that we've got a giant list and a lot of templates are assigned to just one product. It makes it a little bit harder to manage. If we do want to use the theme editor, it makes it hard for us to determine what template in gem pages is applying to what product. And if we were to try and edit this in our theme editor, you'll see that there are no options. There's not even a section here for us to use. It's all coming through gem pages. So essentially it doesn't really play nice with the theme editor if you are using gem pages. That being said, in the case that we wanted to create a template that applied to multiple products with custom sections that we designed through this Page Builder app, then gem pages probably won't cause too many problems. We can go in here, click on Manage, Assigned Products, and we can assign this template to a bunch of different products. So we could go complete snowboard instead. If I hear Publish, now the template for complete snowboard will change from default to this particular gem pages template to prove that, let's go back into our admin. I'll get out of the theme code here. Go into products. And it was the complete snowboard, wasn't it? Right here. If I scroll down, we can see that this product is using the same template as that other one from Chem pages. But we can go in here and set this to default product, and that'll set it back to showing through the default template. If I hit preview, this is the default template. If I switched it back to the G em pages template, hit preview. Now you can see that the same product is delivered through a different template, the one we created in gem pages. So the pros and cons of using gem pages are once we create a page template in gem pages, then it doesn't really play nicely with the theme editor. While the theme editor might not have all this drag and drop functionality, using gem pages is going to give you less control in the theme editor. But if you're happy to rely on this page building app of gem pages, then you should be fine when it comes to building templates for a lot of dynamic content in gem pages, it starts to get a little complicated. So what I'd recommend gem pages more for is creating landing pages. Obviously a product page has its own data and so it's highly dynamic. But a landing page is a single page that has static content. And so Em pages is a great landing page builder. If I go in here for instance, and I can click Select to select this landing page template and create a Em pages template. Based on that, we get this beautiful template that we can change to whatever we want. We can run a Black Friday sale and let's say it's 35% off instead. And we can link these buttons to wherever we want to link to change this as much as we want with this beautiful drag and drop functionality. Okay, if we are to hit Publish on that, this is not a product, so it won't create a product template. But it will create a page template. And not only that, it will create the page to go with it. So what do I mean by that? So if we click Publish again, the button disappeared before. For View Live page, it's annoying. You have to actually hit Publish for that button to show up. But here you can see we've created this page. The handle is not the best landing page. March 18, 13, 36, 16. But we can of course change that. But now we've got this beautiful landing page. And what it's done, if we look at how that's affected our shop fi store, not only has it created a template, but it's created a page in order to take advantage of that template. So as you can see under online store, we have custom pages and we can see that that landing page is there. And in the theme template, you can see it's this newly created template by Em pages. And because this content is all static, it's just a landing page. We can put whatever we want in here. This tends to work pretty well and not cause many problems with managing the code in the future. That being said, however, one of the biggest issues with these page building apps, pretty much all of them I'm pretty sure is that when we hit publish, these changes only apply to the currently live theme. If we go back to our themes here, if we look in dawn version 12, the one that's currently running, you'll see that all of the gem pages code has been put into here. But if we look at our preview themes, so let's look at version 11 which is sitting on preview, you'll see that Jem pages did not install any of their files into here. So if we want to utilize preview themes to preview stuff, so we want to make a change on one theme, maybe update the data and the theme editor and then view that before publishing. That is something that's a little bit hard to do in conjunction with Jem pages or any other Page Builder app. What I mean by this is if you see here, all these themes have a different customized button. So if I change content on this theme, it's only going to apply to this theme. And because this theme isn't the live theme, anything I do here isn't going to go live. I can test out a whole bunch of stuff. Unfortunately, I don't think there is a way for us to get gem pages to effect this theme instead of the currently live theme. And as somebody who has worked on stores that are using gem pages, but also trying to preview custom developed features on a preview theme, this becomes kind of tricky and hard to get the staging process working well. So that's a little demo of gem pages and how it affects your store. The biggest selling points of gem pages I think are these pre made templates that you can just throw into your store and rearrange via drag and drop. The dragon drop seems to work pretty well. You know, I can drag an image in between any of these little bits of texts, move these bits of text around. It's pretty nice for somebody that wants that drag and drop functionality. And as you can see here, we've made a change. So we need republishing, and that'll change our template. Obviously the side effect of all of this is how it affects your theme. But as long as you understand that, let's move on to the next app, which is rep blo. 7. Replo: All right, in this video we're going to take a look at another page building app called Replo. Now that you've seen your first page building app, you can now see through comparison with Replo what things are the same and what things change depending on which page building app you're using. All right, so let's go and install this new page builder app. Replo, there we go. Replo landing page Designer. I'll click Install, and then I'll click on Install again to give it its required permissions. And Replo works a little bit differently because you need to create a new project within Replo. Then that project is linked to the store. I'm going to call this, let's say Chris's skill share class. I'll click Create Project. Now with Replo, you can create a AI generated template. That's pretty cutting edge. You can create a blank page or you can browse from the templates. Let me have a look at some of these templates here. Just like gem pages, you've got a lot of pre built stuff here that you can utilize on your store so that you don't have to create a layout yourself. Let me just click on this one and create a new page with that. Unlike gem pages, Replo wants to know the name and the handle before we get started over this page. I'll say landing page. And as you can see, the handle is automatically generated. But we can change this now, or we can change it later in the Shopify admin. Obviously, all custom pages need to be assigned to a custom page in the Shopify system. So we'll be able to change this in our admin as well. So I'll just hit Create Page. And if you're like me using a development store, it's going to ask you to put through your store password. All development stores are restricted from the outside via a store password. So you can go down here into preferences within your online store sales channel and just copy that if you get asked for that. This is also a feature if you do have a live store and you want to hide it from view unless you have a certain password that is a feature of paid stores as well. But as my store is in development, I have to restrict using a password. All right, back here, you can see here that we have the dynamic content coming through. And you can see that we've got this pretty special layout here. Obviously this content here is demo content and comes from another product. So we'd have to go in and change all of this content to be relevant to our product. But if you look at Rep Blow and we just compare it to Jem pages, you can see we've got this panel on the left here which is more similar to the theme editor than Jem pages was. And if I try to click and drag this content, it does work, but it's a little bit less clickable and draggable than Em pages. I find it's perhaps a little bit more robust because you've got these different containers here. And you can see the structure of the template right here. And you can also click and drag in this section too, just like you would in the theme editor. If you recall what we covered in the video on the announced update to blocks coming to the Shopify theme editor, this little panel here more closely matches what's coming to the Shopify theme editor. So it's a similar paradigm, which I think is a good thing. But again, if you can hold out until those changes go live, then that depletes the need for something like rep blow. But one of the big differences here is you'll see we've created a page here. This is not a product. So if I hit Publish on this, what it's going to do is, well, first of all, it's going to ask us to create a plan, which we're not going to do. But if we were to hit Publish on this is going to create a page, not a product. If we wanted to use Replo to affect a product page, we'd need to create a section first. Now I'm not going to start paying, what was it, $300 a month. $250 a month. Just for this video. And I don't expect you to either. So what I might do is switch over to one of my client stores and we can see how this is affecting our lives store. All right, so here you can see we've got a similar thing fully built out for a product that is specific to this store. So as you can see, it's just for demo purposes because it's not actually on a product page. What this client is using replo for at the moment is product pages I believe, but mainly for the home page. So if I search. In the page section for home page, you can see this icon here indicating that the page is set to the homepage. And if I click on this, you can see this is a full home page layout that has been created for this client. I believe in this case we contracted Replo themselves to build this layout for us. Just like the other Replo templates, we can dive into any of these sections and edit so many different things. There's a lot of different options here, but you'll see it looks quite different in terms of all the different layouts and different ways to change the width compared to gem pages, which is a bit more heavy on the drag and drop perhaps. But again, each of these apps do similar things. They just approach it in different ways. In order to create a product page or to create something in replo, that would affect a product page, it needs to be created as a section. I'm going to click over here to go into sections. And you can see here that I have this currently published section for MCT Oil, Kickstart, right? This section, I believe is already published. So if I go into the customizer for the live theme here, you can see the home page just quickly. You can see here that there's no options to customize. That's only in Replo, because it's being handled by Repl. But if we were to go to the product page, I'm not sure what template it's running under. Let's just search for the product name. Mct, Kickstart. This one's a bad example because it's using G em pages. Actually, let me click here to change, and I can select from the list of products. Search for MCT, Kickstart. Hopefully there's one that's not assigned to Gem pages. Here we go. You can see that we currently have some native shove Fi sections in here. And if I was to click Add Section, we can add a section that was generated by Replo. In our case it's, let me search a MCT Kickstart. Here we go. Mct Oil Kickstart. And we can bring in this section. And what that allows us to do is we can hide these ones and just use the section as our product template. Now you can see we've transformed our product page for this product. But of course, we're on the default product template. We don't want to affect this particular template. We'd want to create a new template for the product. And then assign the section that we created to that product. Essentially, even though we've created a section here, it doesn't have any settings. The benefit of having this as a section is only if we wanted to add something below it or above it. Because if something is a section, then we can stack more sections above and below it. So for instance, I could grab an image banner here and put that under the section that was generated by Replo. Okay, so heading back into the Replo interface, I personally don't understand the hype behind this one. It's a similar system to Em pages. You can create sections which as we saw in the last video with gem pages, it looks like you can create sections in Gem pages 2. But those sections do not have settings, so it doesn't really leverage the functionality that comes native with the Shopify theme editor. But one of the things I can say that I like about this is this tree like structure here that we have on the left. And of course we have a lot of pre built components that we can use as well. It looks like they have a pretty big template library, which of course is a value add for a lot of merchants. But very similar to gem pages the way it plugs into your theme, it's going to create files. Before we wrap up this video, let's look just inside our theme code. If we search replo, we can see just like Em pages, it's creating a lot of Replo files with, well, not random but unique identifying sequences here, which look pretty ugly and messy in your code. But it allows Replo to do their thing. It'll also create a whole bunch of replochunks in your snippets folder. I mean, look at all these relo, repl, replochunk. If you're okay with dirtying up your theme, then go wild on these apps. It's all cool. But once you start to look at theme code, this starts to get real messy. Anyway, that's all for rep blow in this video in the next one will cover the final app, which is instant. 8. Instant: All right, in this lesson we're going to cover the last app in our list to cover which is instant. There's been a lot of hype around this app, especially with the Figma plug in and the unique feature this app has which it will create section settings for you, but we'll see how that works in just a second. Let's actually go ahead and install this app. So it's just called instant. We're looking for Instant Page Builder. I believe no results found. So let's search it in the app store by clicking this button, Instant Page and Section Builder. We'll click Install again. That brings us to the instant app, which, unlike the other apps that we looked at, this one does not load within your shop fi store. As I mentioned before, this is all external software no matter what app you're using. And hope Fi allows these apps to load within the window, within your shop Fi store. But that does not mean that it's part of, so it's just integrated into the look of Schopf for instant. This app will direct you to its own website, so you won't see the shove pi user interface on the left here. And the other thing that's different here is we need to create a site for gem pages. We didn't need to do any of this for rep below. We needed to create a project in instant. We need to create a new site. So I'm going to call this Christopher's Skillshare Store Hit. Next step. It'll ask us what we want to sell. Our product is closest to fitness. I don't know if this means anything. This is probably just market research for instant. So I'll hit Fitness and now will be taken to the interface for the Instant Page Builder app. Now one of the things I like is this clean design that encourages us to do certain things which I think are good practice, like setting up assets before we get started and setting up certain color styles that we can load into our different layouts. And here you can see we can create pages or sections. In here you can see the layers panel. But we need to create an actual page or section first in order to insert some layers. Let's just click here to build from scratch here. What we do is we click and drag from this panel over to our canvas right here. So let's start a two column layout. And then let's just say we'll put an image in one side and we'll put a heading in the other side, right in this side. Let's set the image. I'll click into the image. We can choose its source. We can. Let's upload this image which actually comes from the store, that instance attempt to recreate in one of their Youtube videos. It's a store by Beyonce called Sacred. As you can see here, we can hover over certain elements, click on them to reveal their settings, and we can see that it's responding to our clicking. But what we can't do is click and drag elements over. You can't really see from your point of view, but I'm currently dragging this image across and nothing's happening. So there's no click and drag functionality here. But similar to Replo, we have this tree like structure which once again is going to be similar to the theme editor once that new update comes out. One of the cool features though is that maybe it doesn't have drag and drop functionality to move things around. But it does have drag and drop resizing, so I can resize this image using the visual editor, which is a cool feature. So as you can see here we are in page building mode. The two options in instant are to create a page or a section. So if I just hit Publish on this, first of all, it's going to ask us to connect to shove Fi. I don't know why it asks us to do this when we've already installed the app. But maybe it's got something to do with the app sitting outside of the admin. So I'll click Connect. And I believe that that will connect our site that we created to our shove fi store. A site and a store seem to be two different things, but we can connect them together. And then now we can publish this page to our shop fi site. Now we can click here to view Page. Unlike Replo, it didn't give us the option to customize the page title and the page handle, but it has created a page on our shop fi store using that layout. And so if we go over here and go down to pages, we can see proof of that right here. If I click on here for page, you can see that the name of the page is simply page. And if we go into it website SEO, we can see the handle here of page. And then if we look over at the template, you can see that we're using similar to gem pages, similar to replo, we're using a template that was generated by them which will sit somewhere in our theme called instant followed by a unique string. All right, so that's how instant is creating a page on our store. But the exciting thing about instant is not so much that we can create pages like we just did, is that we can create sections and then these sections will have settings in built so that once we insert them into our theme editor, we'll be able to edit them using the theme editor. So ideally, we should be able to take advantage of both the theme editor and instant page builder by following this system. So let's test it out. Let's create a section. Let's just say that we want this section to be a product page section. What we can do is let me find the insert on page thing here. What is it called? The Insert Menu. And I'll go into elements. We could do another two column layout and put in some static text, some static image, button, video, all of that good stuff. But what we can do is put in dynamic content from the product object. If we put this on a product page or even if we don't put this on a product page, we can link a product and then pull the information dynamically off that product. So we will need to create a layout still. So I'll create a two column layout. I just need to drag it onto the canvas. And instead of putting a static image on this side, I'm going to put the product image on this side. And then instead of having a random title, I'm going to put the product title over here. But I've missed the point, so I have to. It's up here, so I just need to drag it into that row. Then I will also add in, let's say the price right here, product price and the description. And add to cut button underneath that. Okay, now at present nothing's showing up because we need to link it to a shopper fire product. Right here. We can select Set Source. Let's do the same one that we've been doing the whole time, which was the collection Snowboard Oxygen. I believe it's this one. Then we can go here for a product title, change the source to the collection snowboard Oxygen. And I think it's assumed the rest, this add to cart is currently linking to this placeholder. So we want to change the source to collection snowboard oxygen as well. Okay, And then we can create, just like we can with the other page building apps, we could create another sort of set of columns below it and put more content in. But for now, let's just, I'll undo that. Actually, it doesn't let me undo that. So I'm going to have to just delete that row. Has that worked? No. You just need to click that to delete. Okay, I think that's worked, although no, there's another column there. Okay. All right, so now I'm going to hit Publish. And instead of publishing a page, it's going to create a section which is then going to be inserted in our theme. And what we can do at that point is bring in that section to any usual template within our normal theme development paradigm, within our normal theme editor. And then we can utilize that section. And I believe that this should also create settings as well, so that once we do put this layout into our theme editor, we'll be able to edit it with the theme editor as well. So let's see how this works. Okay, so I'm going to go back over to my theme editor for the current theme, Hit Customize in order to get there because we created a product section. Let's go into products. We can go into default product here. Let's just say we wanted to replace this section for showcasing our product information. I won't delete it, I'll just hide both of these sections so that they don't show. Then in ad we didn't really name our section properly, we just called it S. I believe that's the name that's going to come through here. But as you can see, the section that we created in instant is now available for us to add in the theme editor. So I'm going to click that and bring that up. And you can see now that we've got our information here, the only problem is this is for the collection of snowboard oxygen. And as you can see here, we're previewing air pods on the default product. So we don't want this to apply to the Airpods product and every other product on the default product template. But if I click on this section, you'll see that it'll open up settings. So as promised, Instant will give us settings along with the content when we publish a section to our shop of I Store, which I believe is pretty unique. I don't know if any of the other ones do this. Maybe Jem pages now does this, I'm not sure, but I think this is where the hype around instant comes from. But even still, what I don't like about this system is there's three different places where I can put in a product. So I've linked a product here, linked it twice again. Add to cut button. The product hasn't been linked, but it should all just be related to the single product, right? So given this unexpected behavior, I thought it would be best to ask the app developer themselves why we've got three separate fields. And number two, how do we get the product to pull from the product template? In regards to the second point, the support person tells me that currently they do not support the use of creating full custom product pages, yet it is coming soon, so all the sections created are to be used as expansions for your current product page. Essentially, what I think he means here is that we can't pull the product from the product that we're viewing on a product template. But what we can do is create sections that pull product information from a product. We specify, we essentially can't use dynamic linking here. We have to go in and explicitly set a product. But as for the three fields, he mentions here that currently each element is connected separately. What we need to do is set the product connection on the parent layer and then all layers underneath can pull data from that single connection. Cross referencing this information with two T on instance Youtube channel. I think what we need to do is remove these individual dynamic product sections completely and put in some static content. But then link the parent container to a shopper fire product. So looks like we're not going to be able to get this section to pull from a product page. But at least we can create some sort of featured product section that we can use on other pages to highlight a specific product. Let me go back to the editor here and let me follow through with this idea. So I'm going to remove all of these elements with product at the start. All of these dynamic product elements that I entered before. So I'm just going to use my delete key to more easily remove them. Now we've just got our two column layout again. And you can see here that the rows are connected to Shopify. Let's just remove that dynamic connection. For now, let's put in our static text. We had, what was it image here? Text here. Let's see. Now we need a heading text for the product title. I'll remove actually, that maybe can be our price. I'll leave that there. I'd love to put in a button, but I don't know if we can pull from shop, if I here. Let's try it out. Now that we've got all the static content, let me go up here. And on the parent container, the column, let's set this to a particular product. We should be able to change this in the theme editor later with that dynamic source selected on the parent container. Let's go into image, and you can see here that we can link to the parent source. And then if we scroll down, the content of the image can be set from static to dynamic. And take the product image that's going to pull from that parent container, that's where the product is coming from, under here. We've got the source here. And then we can go down here in content here, we can do the same thing, move it from static to dynamic. There's one more step, I have to actually select here what field on the product object I want to pull from. So I'll pull from title there. You can see it dynamically pulls. And then this little bit of text here, let's pull the price right. And then down here, it's going to pull from that source. But I don't think we can give this a custom operation. Let's see interactions. Can we get this to add something to the cut? Here we go. Action add to the cut. Well, we've got our source here. Let's test this out. Let me just rename this. If I dive into the text, let's say add to cut. Now hit Save, and let's publish that section, and then we'll get this handy shortcut to open that up in the theme editor, let's see how this changes the result. So we're inside the theme editor again. And let's just go to the product template. As you can see, we've got double up of product information, so let's hide these. And what we're left with is just the section. Let me go in and check the settings and he can see now we only have one product field. So if I change this to archived snowboard, we should get the dynamic data pulling through from archived snowboard, which doesn't seem to be the case. Unfortunately, it's got this field here. But if I change the product here, okay, now it seems to be working. Okay. So that was a bit of a glitch, I guess. All right, so now we can change this to whatever product we want. And all of the details, the image, the title, the price, and the product that gets added to cut should now be pulling through whatever product we select here. Once again we're on the page for the collection snowboard hydrogen. So let's just, we'll try one more time. If we can use dynamic linking, I will select product and see if that changes when we now change what page we're previewing. So if I use this to change the product that we're previewing through the default product, let's change it to oxygen. Okay, so dynamic linking does seem to be working now that we fixed that issue with the inputs. And you can see here before when we were using dynamic linking, it was saying from current section, now it says from current page, which is what we wanted to do. And so I think there was a bit of misinterpretation by me of the e mail sent through earlier. Apologies for that. But you can see that dynamic linking does work. So now we can create essentially the same as this, a main product information section in instant, bring it over and still have some customization options in the theme editor. So we're getting a little bit of benefit of both worlds here. So if I hit Save on this and preview it through this theme, right? So this is on the default product template, so this should be really applying to basically all products. I'll click on this, this will open the product in the admin. I don't think there's a link to open the actual product page, which is annoying. But we can click Preview again to get to the page on the front end. As you can see here we were clicking to preview the collection, Snowboard Oxygen, and we have that. Now if you click on a different product, let's say something completely different, like a gift card. You'll see that the same template is applying and that dynamic data is pulling across. And this Add to Cart button should hopefully work as well. And it does, it identified that the product was gift card and pulled that across. That's excellent. So this is the benefit of using something like instant. Gives you a little bit of the best of both worlds. So if you're going to be creating something like a product page which is highly dynamic, I'd recommend doing something like this with instant over perhaps some of the other options we talked about in this class, so that's instant. In the next video, we're going to summarize all of our learning so far and then conclude the class with your class project and next steps. 9. Summary: Covered quite a bit going over the various ways to customize a Hopi Fi website with no code solutions. Let's quickly recap before we move on to the conclusion and class project. As you saw throughout this class, no matter which solution you choose to go with, all of them will go through a Shopifi theme as we also saw in this class. With the exception of instant creating a template or section on a page building app will force us to continue using that app in order to make changes to our front end files will be inserted into our theme, but in order to change the code, we'll need to go back to that app that created them. In the next video, I'll share my personal recommendations. But to complete the summary for this video, here are some points to remember. Number one, the Shopify Online Store Sales channel is built on a system of templates, sections, and blocks. In future, you'll be able to nest blocks within blocks to create more complex layouts. But for now, blocks exist on a single level nested underneath sections. Number two page builders help you to create custom templates. These templates are not split up into multiple theme sections and therefore do not take advantage of the features of the theme editor. That being said, number three page builders are now also moving into creating theme sections in order to play nicer with the theme editor. But so far I'm yet to see any of these page building apps generate blocks for you. Number four page building apps create a mess in your themes code base, which may cause issues if you want to customize the code in future. And finally, number five. Each page building app is also a separate system, meaning that you usually can't migrate a template from one app into another. Conversely, if you only build with the native theme sections, you can share these files between themes and migrate sections quite easily between themes and other stores. 10. Conclusion: Congratulations. You've now made it to the end of the class, which if you've watched all the videos, you should now have a good idea of the options for customizing your store without code. As a developer though, I can't stress how much learning a little bit of code can help you avoid a lot of the problems caused by relying on external apps Enough, That's why I recommend learning at least some Shopify theme development if you really want to have full control over your shop offi store. If you're curious to see what that looks like, head over to my Youtube channel code with Chris the freelancer, or check out some of my classes, specifically on Shopify Theme Development here on Skillshare.com For now, as this is a no code class, I want you to choose a solution from the class, either the native theme editor or a page building app, and build your own custom section or template. Once complete, add your work to the class project section of the class to share with the other students or to get feedback from me. If you've enjoyed this class, make sure to leave a positive review and be sure to check out some of my other classes here on Skillshare. Thanks for watching and I'll see you on the next one.