Shopify Web Design - Plan, Design and Build a Shopify Storefront with AI

1. Introduction: Hello, and welcome to Shopify Web Design. Your guide to planning, designing and building a Shopify storefront with AI. If you haven't seen my face before, my name is Christopher Dodd. I'm a top teacher here on skillshare.com and an expert in Shopify development, working with Shopify stores since 2019. In this class, I'll take you through the process of creating a high flity web design for an eCommerce store in Figma. Utilizing artificial intelligence as much as possible to automate the most basic of work. In my previous two classes, I taught you how to build web designs on Figma, structured in a specific way that makes them easier for AI agents to interpret, and most recently, I took you through the process of taking a brand from its core elements into a functioning storefront using an off the shelf Shopify theme. In this course, I'll take you through a process that touches on what we learned in both of those classes. We'll take that same brand from the last class, but instead of fitting it into an existing Shopify theme, we'll create a high fidelity web design Figma to create something completely custom. With that same convention I taught you in my previous Figma web design class. Within this class we'll automate as much of the web design process as possible, focusing only on the core decisions and principles of web design while letting AI handle most of the grunt work. By the end of the class, you'll have created a set of high-fidelity mockups in Figma, all mapped to templates on Shopify that we can then use AI once again to generate the code for a 100% custom Shopify theme. Let's get started. 2. Preface: So as I mentioned in the Intro, I'm going to design and build a Shopify storefront in this class using the same fictional brand that I used in the previous class, CNS Macha. Attached to this class, you should be able to locate and download the project folder for CNS Macha. Many of the files are the same from the previous class, but you'll also find that I've separated out the website Images folder and added a bunch more images to that folder as well. I've also included a website icons folder with the standard Shopify icons. If you want to follow along exactly, you can use the same files as me, but if you want to learn along with your own brand, feel free to use your own files instead. Other than the project files, you're going to need a couple of tools. And unfortunately, both of these do come with a price tag. Claude code is the tool I'm going to use as my AI agent for this class to automate a lot of the grunt work, but you can feel free to swap this out for any alternative, whether that be Codex by open AI or something else. Claude code will help us to create wireframes in Figma, which is the core tool we will use in this class to create our high-fidelity mockups. While Figma is usually free, in order to use the Figma MCP, which is what you'll need in order to connect it to Claude code, you'll need to be on some kind of subscription. For me, I pay about 20 USD each for these services, but it's 100% worth it. That being said, if you want to follow along without any AI agent helping you, that's possible, as well. You will just have to do a lot of the basic work yourself, namely setting up the Figma wireframes manually. Finally, and this is something I forgot to mention later in the class, but if you want to use Claude code to build you a custom theme based on the Figma mockups that we'll create in the class, you'll want to have Shopify own AI toolkit installed. Without it, clawed code or whatever agent you choose to use might not have the necessary skills and knowledge to write the theme code. One other tool you might also consider adding is the Chrome DevTools MCP. This tool enables clawed code to open pages and take screenshots so it can verify its own work in the browser. This is a tool I currently have installed, but I also forgot to mention it later in the class. So you might want that one installed as well. That all being said, if you have an AI agent and a Figma subscription, you should be all set to follow along. While we may be relying on AI a lot in this class, I can assure you as someone with years of experience building Shopify sites, we will use these tools in a professional way to design and build a Shopify website on the correct foundations, rather than just creating another AI slop website. 3. Moodboarding / Gathering Inspiration: In this video, we're going to cover moodboarding, which is the initial stage in the web design process to gain visual inspiration in order to help you figure out what elements do you want on your website and what aesthetic you would like for those sections and the overall website. As it says, here, a mood board is just a visual collage of images, text, colors and textures used to define and communicate the aesthetic direction of a design project. Obviously, in our situation right here, we're doing it for web design. Going to look at other similar Shopify websites, see what they're doing, screenshot sections that we like and put that into a mood board, which you can think of like a scrapbook. You don't need any specific software for this, but seeming we're going to be using Figma for the rest of the class, I'm going to use Figma. I've already set up a design file here for this brand that we're going to be working on is the same fake brand as the previous class, Sans Macha. Obviously, we're doing it a different way this time, but the process with moodboarding is basically the same. The first step is obviously where to look to find these inspiration sites. If you want, you can simply Google it, or you can use a tool like Gemini, which is also a Google product. So we could go into here, just like we did in the previous class and ask what are the top machaPowder brands that sell predominantly online. Okay. So this was basically the same prompt we put into Gemini last time, and you can see here that there's different categories we have here. As we saw last time, some of them are very Japanese and authentic, and some are more modernized macha brands catering to the modern consumer. So here are a few right here, Jade leaf marcha. And of course, this is specifically for macha brands. You want to change this for whatever your brand is. So if you sell protein supplements, you want to look at what are the top protein supplement brands. But you can also look for design inspiration outside of your niche, as well. Any sort of eCommerce websites that you like. Anytime you're browsing other eCommerce websites and you see something you like, definitely you should bookmark that or bring that into your mood board. But we're doing it in one session here. So we're going to look at Jade Leaf marcher as our first example. And I can already tell here, just like I did in the last class that I like some of the design elements. Difference between this class and the previous class is we're going to be designing everything from scratch. So I'm going to note all the websites that I like their overall design system because later in the class, we're going to be creating something called a design MD for all the sites that we like, describing what we like about those sites and then combining it with our own brand system to come up with an overall design system for our web design using AI. Okay? So I'm just going to not only screenshot the sections that I like, but I'm also going to note down the URLs of the sites that I like their overall aesthetic. So this one, Jade Leaf, I really like their aesthetic. I'm looking to build something similar. So what I'm going to do is I'm just going to open up a text edit, any sort of simple text software, and I'll just paste that in there. Okay, so then I want to go through and gain inspiration for sections that I might like on my website. So as you can see here, we've got a hero section, and then we've got a featured collection section. These are the industry standard terms on Shopify. A hero you can think of as a big banner that goes at the top of your page, and a featured collection section, as it relates to Shopify is basically just a bunch of product cards listed in a row like this usually with a slider. So that's just explaining some of that terminology. Pretty much all of the eCommerce sites you'll see, start with a hero and a featured collection section. And you'll see that's built into the defaults of the tool we then use to generate the plan of our Shopify storefront. Okay? So as we go down, there's another banner here. There's different categories here. So there's like a collections list section here, a image on the left, text on the right element. They've got a recipes slider here. Again, depends on what site you're looking at. Typically, most eCommerce Shopify sites will have the hero and the featured collection section, but after that, it's really going to depend on that specific brand. Okay, so what I want you to do here is number one, like I just did, list down the websites that you like their overall design system because we're going to use that to help create our design system later. Number two, I want you to look at some of the sections and gain inspiration of what sort of sections you can put on your website apart from the standard hero and feature collection. For example, maybe you look at this recipe section here and you go, Oh, actually, have a lot of great recipes with our marcher brand. This one is definitely a section that I want on my website. So we can even write this down in our text document here, sections that I want, right? Let's say, featured recipes. And in Shopify, we can put this into a blog. I believe that's probably what they've done. Yeah, so they're using the article template to deliver all of these recipes. It's basically just a blog post, okay? There's also some blurbs here, what is Macha, how to make Macha, Macha health benefits. So you could say, Okay, I want and then describe it in however you want. As long as you understand it and can describe it, it doesn't have to have an exact name, but I would call these ones that list products featured collection or featured products, and this one hero, because the app that we're going to be using to create the plans understands what a featured collection section is and a hero section. Okay, so the more we can use the standard terminology, the better, but don't get too caught up on that. Describe the section as best as you can. For me, what I'm going to do for my section list is I'm just going to basically replicate the same sections that we had on our Science website from the previous class. So if you remember, we just set it up on an off the shelf theme. So if you look at the website, we've got our hero. We've got our product range, our featured collection here. We've got some blurbs on Y Cans Macha. Because there wasn't a text with icons section in the theme WA heading, we had to combine two sections here, but we won't have to combine two sections to create one section when we custom develop it. So that is essentially one section, the USPs, and then this testimonial section. I'm also going to add in a few others like I'm going to add in an announcement bar, but for the most part, I'm going to use the same list of sections as what we created in the previous class, okay? Your purposes, what I want you to do is build upon this list, determine what sort of sections you want, and also look at the design of them as well, okay? So maybe we don't have a bunch of different categories in our marcher brand. Actually, we only have four products. It's quite a simple brand for my particular test brand, but I definitely like the style of the header. So I'm going to do a screenshot, and I've got this set up so that it goes directly into the screenshots filter here, right? And then I can go into my mood board over here and say, you know, you can set this up however you like. I can say header designs that I like. Okay. And then you can just bring in that screenshot. Maybe you want to make this text bigger. I definitely do. Even bigger than that. So we can say, Head of designs that I like. I like the sort of pill look. You can say, Okay, sections that I like. Okay, let's say, for this one, I'm going to just zoom out so I can actually capture it more easily. The zooming out doesn't really work. So I'll try and capture it as best as I can within my little screen width here. So I'll grab that. And then I'll say, actually, I can just copy this head. And say section ideas, right? So we could do a recipes section, bring that in Section ideas. You know, we can arrange this into a frame. So I'm going to click and drag to create a frame and then put this above here as section ideas. Actually, you could put that on another page, for example, how you set up your mood board is up to you. I'm just covering the main principles of what you want to be looking for and gaining inspiration from so we can say here featured recipes, right? So head of designs that you like section ideas for your own website. I'll just bring this Whit fin a little bit. Bring it in on the left, as well. Just try and put that in the middle. And, of course, we've only looked at one website so far. So let's look at some other ones incher. Let's look at incher Macha. Okay. And let's again look for very nice hero section there. Maybe we do a screenshot of the hero section, closing any annoying pop ups there. I like sort of the badges here for grown in Japan and USDA. So we can say, here, copy this heading and say, hero designs I like, and then bring that latest screenshot in. Right? So we're just making a Mo board here, exact same process as we did last time, but this time we're not limited to the sections list within a pre built theme. We're building this all from scratch. So any section that you like and any look that you like, we can achieve via this process that we're going to do where we're building everything from scratch, which sounds daunting, but with AI, we're able to automate as much of this as possible. I don't like the overall design system of this one peak marcher, but I kind of like this one, sharing the benefits. So I might take a screenshot of that, and then I might put that in my section ideas here. All right, so I'll give this one a name, let's say, benefits section. And we can go through this process as much as you want. More research and inspiration you gather, the better. But as a minimum, I'd say spend at least half an hour doing this. And for my purposes, like I said, I'm going to stick with the same section list as what we built in the previous class using off the shelf theme, just to keep things simple. But for you, I want you to go through, capture the URLs of websites where you like their overall design system, make a list of the sections that you want, and also take note of certain designs for sections that you're definitely going to include or are considering including and think about what is it you really like about that particular design. Again, this is a flexible process. There's no set way to do this except for the fact that we are going to be loading in our favorite websites into a tool later to generate an overall design system. But of course, if you just want to watch the class and then get back to that later with your own brand, you can always follow all of the examples and the test project that I'm running for this particular class. You can just follow along with the fake brand I've already created SNS Marcher. Okay, so that's it for moodboarding. In the next video, we'll actually get into putting together our website plan, which will then become the beginning wireframe of our high fidelity Shopper fi design. 4. Planning and Initial Wireframe Generation: This video, we're going to cover the planning stage, which will in turn create our initial mockups for our Shopify website. Now, the Shopify storefront is built on a system of templates and sections. And so what this tool that you're looking at now, which is a tool that I developed specifically for this purpose, what this will do is reverse engineer that system so that we generate our designs based on the actual templating system used within Shopify so that we can easily translate this design project into real life code, which is essentially the objective of any web design project, whether we use AI or not. Alright, so as you can see here, we're on storefront planner.com. That is the URL in which you can access this tool. And as you can see, I've already got my credentials right here, and I can just hit Sign in when I'm ready. For you, you'll need to create a new account. So you'll just click here to create a new account. It's completely free. The reason I'm able to do this for free is because we're still going to be sending prompts to Claude or to whatever AI assistant you prefer. So you will need your own AI subscription order to handle the actual Figma and code generation. But what this tool will help you do is generate the plan that we can then feed in to our AI agent. So without further ado, I'm going to sign in. And as you can see, the initial page on a new account is no projects yet, so I'm just going to click this button to create a new project. And as we already discussed, I'm going to use the same fake brand that I created in the last Skillshare class, Sance Macha premium Macha for the modern day woman. Then I'm going to hit Create Project. Here you can see we've already got a starting point for our site map generated. So if we go back to the online store editor for that seance theme that we worked on in the previous Skillshare class, you'll see here in this drop down, you have a list of templates with some of them allowing for alternative templates. Any of these with the Chevron next to it allows for a default template of that type with other alternative templates. This is the Shopify themes system, and hopefully, if you've worked with Shopify before, you should be familiar with this system. We go back to the store planner, you'll see that this site map here is specific to the Shua fi theme development system. And if we hover over these, just like on the online store editor, we can add new sections to the template to the header group, and also on certain templates, we can add alternative templates. So you can see here if I click this and let's just say bundle, actually, we are going to do this for our particular project. So I'll do this now. Add a bundle alternative product template. And if we scroll down, we can see the group for the product template. Here we've got our default product template, but then we've got a separate alternative template called Bundle. Okay. You can see that also for the page template. This is very typical in Tuba fy. You have a default page template. So, for instance, you might have a privacy policy page and about us page. They all follow the same template, but then the contact page is going to have a contact form. So that sits on a different template, and you can see here for the default page template, we've just got a main page section, and for the contact form section, instead of that, we've got a contact form section. You'll see here that a lot of these sections have main in front of them because these sections are assumed for the particular template type. Homepage is going to be your most flexible. As I said, most projects have a hero section and a featured collection section. But on the collection page, you're probably just going to have a collection grid, as is the case over here, or on any Sho Fire website that you find, you go to a collection page. It's typically a grid of product cards showing the products in that collection, okay? So in that sense, we've got three different types here. We've got these global sections, so the header and footer, if I just navigate over to that. Right here. So the header and footer by default, but we can also add new sections to the header and footer group. I might change this in future, but I've got a lot of finish setup here. So telling us what sections we still need to plan. We've got our main sections and apologies. If the app is a little bit slow. I just created it, so I think it's taking some time to warm up. Here you can see the configuration of our main sections. So for example, the main product section, if we go to a product template, you'll see here that there's one section just called product page. But as you can see here, we can add different sections beneath what we typically call the main product section, which shows the gallery of images, the title, the price, and all the other details that you need for that product. Okay? Then we have other sections, which could be anything other than our global sections, I E the header and footer or our main sections. So we've got the contact form, the feature collection section, and the hero section right here. Okay? So our goal is to first start with sitemap, add in any alternative templates, add in our list of sections for each template, and then we'll give our planner extra details into the header and footer and the main sections, and then any other sections. So here we're building our template list and our section list, and then the other three tabs will give extra detail to those sections. Alright, so in between videos, like I suggested that you do yourself, I've created a list of the sections that I want out of these optional sections, and I've also added a second inspiration site here, which we'll use later to help with our design system. For now, we're not focusing too much on high fidelity design. We're just trying to get our structure down. So this is the high level planning and wireframing, okay? So obviously, I want a homepage hero and a featured collection section, but we want a selling point section, essentially, that Y Sance marcher section that I pointed to earlier. I'm going to click Below Featured Collection. I'm going to leave this created new section, and then I'm going to call this selling points. In here, I want to describe as best as I can what it's supposed to look like and do so that the AI will know what to build. So I'm going to say section title, y Sans Macha with three blurbs. Is it three blurbs? One, two, three, four, four. So I'll change that to four blurbs underneath. Each blurb has icon, title, and subtext. And then we're going to click Insert section. Okay, so there we go. We've added the selling point section here, and the final one for our homepage was the testimonial section, testimonials testimonials section with three testimonials. Each testimonial has a quote, along with an image and name for each testimonial author. Let's say. Okay, so I'm also going to for the collection section, if you remember, from our previous website that we set up using the prestige theme, there's also this collection banner section here. So I'm going to click above the main collection section, and I'm going to call it collection banner, hero section with background image to go at the top of collection pages above the product grid. Insert section. Okay, that's in there. For the cart section, it's pretty old school for the customer to have to go to a separate page to see their cart. Most carts now work as a drawer that pops out to the side and live inside the header. So I'm not going to focus too much on this one. We can just leave it at main cart section. All of the main sections in this planner already have descriptions that match defaults, but you can, of course, go in and change those defaults if you have a very specific design in mind. I'll show you that next as we go to the next tab. Same thing with the search page, same thing with the blog index and blog article, but I've also left these icons here to delete these templates from the wireframes in the case that your Shopify website does not have a blog at all. For now, I'm just going to keep this in here and use the default blog index and main article section. Moving down to product template, as I mentioned before, I created an alternative template. I can create another alternative template like such. Or delete any alternative templates here. I want a different template for a bundle product. If you remember from our CNS brand, we have a fourth product which actually has all of the previous three products in it. So I want to create a different template, and the reason why is because I'm going to add a different section on here called What's included, which is only relevant to the bundle product. So I'm going to say a section that shows the three products that are included in a bundle product. So for the main product section and the bundle section, I'm going to add in the selling points again. And because this is an existing section, I'm not going to leave this at Create New section. I'm going to open this up and select selling points from here. I don't need a description because I already have one, so we're going to add that in and then the related products underneath that. So then I'm going to go under here, and we can just recycle featured collection. Now, because I already created the alternative template, it's not going to naturally have these sections here. I probably should have built this first and then branched off, but that's all good. What I'm going to do is I'm going to add in the selling points section on this template, as well. And maybe I leave out the featured collection because this bundle has all the products included in them, so we want to keep them on that product. And then a pretty typical pattern as I showed you before, the page template, just the main page section that'll show whatever content the admin user puts into the content section of the page in the admin, and then this contact form, which we don't really need to reinvent the wheel with. We can also add a meta object template. If you don't know what that means, don't worry about it, but that's in case you want to create pages based on your meta objects. All right, so if I go back up here, I'm pretty much done except that I want to add a new section to the header group. It's going to be an announcement bar section, Announcement bar, and it's just going to we can have announcement bars that show like a slider, a marquee, different images. But I'll just say single line text promotion in a thin bar. Alright, I'll hit Insert section. And now you'll see that all of our templates that use the same header group, which is all of them now have that announcement bar added. So that's now a global section defined by the fact that it's been added to a header group or a Potter group. So you'll see every template has that announcement bar. Okay. If you wanted to show up on just one of the templates, instead of adding it to the header group or the footer group, you would just add it in this white section here, which is the template, okay? So provided that this is our overall plan, which we can always go back and change at any point, and we're happy to move on, we can now go to the next tab Global Sections. And fill in some other details to help the AI understand what each of these are. Okay? So I'm going to click Edit information on the announcement bar. And as you can see, it's a little bit squished at this screen height. But you can see here at announcement bar, what is the section trying to achieve? So we can add in some purpose here, say, promote certain offers, and then how does it work? If it's a slider with multiple different messages that we want to show, we want to write that in here. And we also want to check this box for users repeatable blocks because we can set it up as separate messages built into different blocks that we can then set in the online store editor. In that sense, it's going to be pulling the data from the section and block settings. As you can see here for content source, we can put in theme data store data, which means pulled from the actual store, not from the online store editor or a mix of both. This is definitely going to be theme data because the intention is for the user to edit the text at the Shopify theme level, and there's no functionality. So I'm just going to leave that blank and hit save. Okay, so the announcement bar, we've configured, and now we're going to go into the header. So the header is going to have some extra fields here for the configuration. It's going to first ask us what should the header hold? Usually, the header holds a site title or logo, some navigation, and then these particular icons that trigger different things on Shopper Fi. So I'm going to select all of them. Going to have accounts card icon for the cart drawer and a search icon that allows users to search right in the header. Then I'm going to hit next. And now I can make some decisions around whether I want a mega menu, which is good for three levels of nesting or a drop down, which is better for two levels of nesting. So let's just say, for us, we'll just do a drop down because we don't necessarily have that many different levels of nesting. Can also choose to use a Nav drawer on desktop. So usually when you're browsing on mobile, you don't have navigation items in your header anymore because the width of the screen is so small. You usually have that hamburger icon on the left. So actually, I'll just show you that right here. Just exactly like this, you usually have that hamburger icon on the right, and this is what's called the navigation drawer. Some websites will use the navigation drawer on both mobile or desktop, so you can click here to choose that instead, or you can describe a custom behavior right here. But I'm going to do drop down, and then in this optional field, you can add in anything special that appears in the mobile menu drawer when the hamburger icon is tapped. One thing I want to note here is, if you don't know the answer for any of this, any of this is confusing you, just plan whatever. We'll get the wireframes. You'll see it inside a Figma and then you can edit from that point. These are just some common design decisions around really common elements and patterns within Shopify eCommerce websites that we're just asking ahead of time so that it's just one click within the planner the AI will build exactly that. Okay? So next one, how should search behave when a visitor clicks the icon? So I will say it should open up a search input underneath the header that the user inputs their search term, hits Enter and is directed to the search page with that search query pre filled. Okay. But again, whatever you think here, in fact, I think you can leave this blank if you want or just take a best guess here. Now, what should the cart icon do? On some websites that don't have a cart drawer, it'll just direct the user to the cart page. But we're going to be making a normal modern day Shopify theme, so it's going to open the cart drawer. Then here we can talk about how the cart drawer should work. Let me just see if I can skip that because we don't want anything special with the cart drawer. Yeah. And then anything else that we want to describe about the header. Here is where we can add in any extra information. Otherwise, if we just leave it with generic information, is going to give us a generic wireframe, which if you don't have any objection with that is totally fine. But if you want something specific, better to write it now so that your initial wireframes will be closer to the vision you had in mind for your storefront. So I'm going to hit Save on that and that will complete the header configuration. As you can see here, configured then go down to the Footer group. I'm going to hit Configure on this. And again, it's going to ask me what elements I want in my footer. So I think I'm going to select all of these. I want a site logo. I want navigations. I want an email subscription, social icons, and a final row below the rest of the footer, usually just called the bottom section. And then how many different menus will we need? So for example, again, I want to put a visual to this if we go to the seance Macha from the last Skillshare class. You can see here you'll see that it only has one, so I'll put in one here. And what should the bottom section include? As you can see here, the bottom section of the previous website just has the copyright. But if we go to one of our inspiration websites like Jade Leaf Macha, if you go down here, you see it has three different menus, a newsletter sign up, and also the bottom section is just the copyright text. So we don't have that much content, so I'm just going to also click copyright text, no extra menu, no payment icons, hit Next. And anything particular described about the Footer, this is an optional field for you to add in any additional information that wasn't asked. I'm going to leave that blank and hit Save. And now you can see how header, footer and announcement bar are now configured. Now to the main sections. The main one, as is highlighted here is the main product section. So I'm going to click Configure. And what elements are we going to have in this main product section? These are all typical elements. So what I'm going to do is, of course, it doesn't have the images here because it assumes we're definitely going to have that. Product title, pretty obvious. We're going to include that product price reviews summary. Quantity selector adds a Cart button and some accordions. I don't believe we're going to have variance, so I won't include variant selector, and we're not going to offer on subscription yet, so I'm not going to add in subscription, and I will add in a product description. I can also add in a custom element of my own if none of those describe an element that I want in my main product section, so I can do that, too. Otherwise, we can add that in later once we get to the wireframes. That's cool. Where should the product gallery sit on desktop? Usually, it sits on the left. Just leave it on the left unless you have a different kind of product page and you want the image on the right. And then you can also click drag in which order with the gallery on the left and the content on the right, what order you want for that. So I'm going to actually move up my product description. Underneath product price. But other than that, that's my order. So I'm going to hit next on that. And then I'm going to choose my mobile layout, which sometimes changes. Maybe the image is really big, and so the user will have to scroll or look down the page to see other important information. So a pretty typical pattern is to move the product title and price up above the image on mobile. So let's do that. Actually, maybe we will want to put the summary of the reviews there as well so that the user can clearly see the title price and reviews before they see the image, and then they can scroll down for everything else. Alright. Now for the gallery style, we can have thumbnails on the left to navigate through the different product images or thumbnails on the bottom. We can have a single image slider or we can have a grid. These two are your most common. So let's just do thumbnails on the left, or you can describe particular style if none of those meet what you're looking for. And then on mobile gallery style, do we want thumbnails on the bottom? Do we want a slider without thumbnails? Do we want something else? Do we want a grid? I'm going to do thumbnails on the bottom on mobile. Okay. So we're going to save that information, and then once that saves and refreshes, you'll see that the main product section is configured. As you can see here, this probably needs to update the layout of this, but it tells us that before we can say that we've done the setup and create our website plan, do the main collection section and the main product section, and then answer the question of do we need a different configuration for the main product section on the alternative templates. At this point, you might be thinking this whole process is quite laborious. There's a lot of decisions to be made, but this is going to save us a lot of time with the initial generation of the Figma files. And this planning stage can take as long or as little as you like. Can give as much or as little information as you like in this planning section. Obviously, if you had a particular idea in mind, this tool is mainly designed to prompt you to think about these design decisions before we get to the actual FIGMA stage. But obviously, once the Figma has been created and you realize something that you didn't like or you want to change something, that's totally cool as well. Doing some planning ahead of time just really helps us to automate the initial web design process. And so that we're not staring at a blank Figma file. And as you'll see soon, we'll have a nice starting point with the wireframes already created in Figma. Rather than starting completely from scratch and having to figure out these design decisions on the fly and also having to build it manually inside of Figma. Okay. With that out of the way, let's finish off our planning. So there's another question here. Because we've got two templates, it's going to ask, does main product section vary by template. I'm going to say no, it's the same everywhere. The only difference with the template will be the extra what's included section underneath the main product section. But the design of the main product section can remain the same for both of the product templates. And then if we're happy for the cart section, as you can see here, for a lot of these, it'll just assume a certain configuration, so they're optional, but we just need to make some decisions around the main collection section, mainly around how much columns we want the grid. So on desktop, I'm going to set it to four column grid and I mobile a two column grid. Next question will be, does the collection need filters? Because we've got a product range of only four products, we don't need filters. If you've got a product range of lots of different products, filters can be quite handy. It all depends on how big your product range is. So I'm going to hit next on that. And then we're going to design the product card, which is the tile that each product gets shown on, which is used not just on collection pages, but on featured collection and related products, that product card to display another product when you're not on that product page is a common element that we need to make some decisions around. So obviously, I want the product image or images. I want the product title. There's no variance for my particular projects, so I'm going to leave that out. I'm going to have a review summary and a quick ad to Cart button, and then here I can click O to add another one if I want. And then underneath here, if I scroll down, you can see I can control the order as well. So actually, it doesn't give me an option, but what I'm going to do once we bring into Figma, I'm going to put the Add to Cart button on top of the image. But for now, I'll just leave it in this order. The order can easily be changed later, so I'll just hit Save. Cool. So that's now configured. You'll see here that the main card section, the main page section, and the main article section all have a default description. But for the blog index, there's a question of, will there be tags. I'm not even going to do a blog section, so I'm just going to leave that left out. Again, you only have to give as much detail as you actually need for your project, and then we can move on to our other sections here. And these other sections don't have specific questions. If we click on Edit information on any of these, we're just going to fill in purpose what it looks like and how it should operate, and then also where the data comes from. Collection banner and where the content source is. The purpose, again, I'm just going to leave that blank. It's optional fields here. Doesn't really have functionality, and it's going to pull from theme data. So the intention is in the online store editor, set the image, set the text that appears. And then for the look, it already has it pre filled here. Here section with background image to go at the top of the collection page above the product grid. Ah, we already filled that in when we created that earlier, okay? So contact form, as you can see here, name, email message that submits a contact request. Yeah, we don't really need to edit any of this. It's all just standard functionality. The hero section, I might just specify. It's definitely theme data. This content source isn't going to affect the Figma mockups, but what it will do is later when we come back to this tool to grab the spec sheet, so we can actually implement it on the website, which is kind of like a bonus to this class to show you how to actually take that design and build it into the code required for the theme. At that point, we will see how these decisions around content source matter. But for now, all that's important for the Figma design generation is the look mainly, okay? Selling points, it's going to be theme data as well. I already mentioned the look in the description when I created it in the site map. There's no functionality. Purpose is pretty self explanatory, and I want to use repeated blocks. Again, the information that I just entered here is only for the spec sheet at the end when we try to build. It doesn't really make a difference to the Figma design. This one is also going to be theme data using repeatable blocks. And then what's included, again, theme data using repeatable blocks, hit save, and that's it. Obviously, it depends what you put into your site map in terms of what sections show up in Global, Maine, and other sections here. I don't believe you can add any more main sections, but you could add, as we showed in this video, adding an announcement bar to global sections, and then all these other sections like selling points, testimonials, hero that aren't main sections or global sections going to here. So obviously, this list is going to depend on your specific needs. If you wanted to follow along exactly with my test project, this is how it's going to look on your end, as well. And now we can from any of these tabs, click on this blue button to create the web design plan. Alright, so here you can see, we've got web design plan on the left, and we've got the spec sheet on the right. The web design plan basically covers all of the sections where they exist and what they should look like. The spec sheet is something we will use to accompany the wireframes later to give context around functionality and content source to the AI to actually build it into the theme. But for now, let's completely ignore this right side and look at the left side. So here we can export this web design plan, and at this point, we don't even need to use AI. We can have this document here that you could send to a designer or you could have up on a second screen as you're building out a design manually on Figma. So you don't have to actually use AI if you don't want to, but because we've made all of these decisions ahead of time, we can automate the building of this web design plan into Figma. Okay? So as you can see here, we've got the template name, and then within that, we've got the different global sections, the main section, and then the FOOTA section. And for the homepage, obviously, we don't have a main section. We have those two global sections and then our four optional sections there, okay? So in this class, what we're going to do is we're not going to build the Figma manually from this web design plan. We're going to just click here to copy the Figma instructions, and then we're going to want to paste those instructions into a clawed code session. You can use the desktop app here, but I prefer to run the clawed code extension within my preferred code editor, which is Visual Studio code. However, you want to do it, I just go over here to start a new session. It's just loading up here. And then right here is where I can insert my prompt, so I can paste, and there you can see the highly detailed prompt that should be able to give Claude all the information it needs in order to create the wireframe. Down here, I've set this to order, so it's going to ask me as little as possible for permissions and just go straight ahead and build it. And, of course, in order for Claude to connect to Figma, the Figma app needs to be open. Remember you need a dev seat or higher in order to use this MCP feature, at least at the time of recording, and you also have to have the MCP on. So the instructions have changed for turning on the MCP since my last course on Figma web design. So be sure to look up the latest instructions for how to install the Figma MCP. It changes quite often. But provided that you already have the Figma MCP setup, then you can simply run this prompt in Cloud code. And let's see if it comes up with any questions. Otherwise, it should basically just create the Figma file for us. As you can see, here, it's going to load the Figma design generation skill from Figma and then it's going to trigger some other skills and other MCP actions. But here we go. Here's our first question. It's asking us which Figma team should it create the new wireframes in? For me, that's definitely going to be my personal team, Christopher Dodd's team. Make sure you choose a team with a dev set. Of course, I'm going to fast forward through a lot of this because it's just Claude working in the background. If this takes a long time for you, don't be alarmed. This should take quite a bit of time. I'm currently up to about 17 minutes of waiting. But if you'd like to see something a little bit more interesting, you can actually go into Figma, see the file, and watch it being built in real time. So I'm going to switch over to that view, and you can see now that we have a frame with our components, and we have our different templates being built out. Obviously, it's not complete yet. So I'll just let that continue to run until it's done. Alright, so after about ten more minutes, so that was like 26 minutes. So you can expect probably the whole process to be completed in under half an hour. But obviously, it depends on how many sections you included and all of that. But for a project of this size, it took about 26 minutes. And now if I switch over to Figma, you can see that all of the wireframes have been generated. So don't worry, this is not going to be the final form. We're going to make this look a lot better, but this is just basically the low fidelity mockups here. So we've got our homepage on desktop. The mobile version of that homepage. Then we've got the product page. Remember, we made some design decisions ahead of time that we wanted the product gallery on the left, and we have the product thumbnails on the left on desktop, and then we have them on the bottom with these above. So all of those decisions have been now factored into the Figma wireframes. And as you can see, Y Suns Macha right here, and it should be using components as much as possible. So components is a thing in Figma. I believe we covered it in the Figma web design class whereby we have our master component here because this header is supposed to look the same on every template. So if we update this one right here, that should port across to the desktop header on every template. You can see here indicated by this diamond here that this is an instance of the component. So this lines up quite well with the Shopify system. We obviously have to replace some of these icons here, and it's not perfect. But what we've got here is a basic layout of all of our sections, and we have the sections laid out in their appropriate templates. So looking further down here, we have the default product page. We have this one here. What's included. I don't want these buttons here. Again, there's going to be little changes here and there. That's normal. Our collection page right here with the four columns on desktop and two columns on mobile, I default page template on desktop and mobile, our contact page right here. And actually, one page I forgot to do was the about us page, the Our story page. We had that in the previous web design class, so I might throw that in later. Like I said, you don't have to get everything done in the planning stage, but just to get something on the canvas, everything else we can do manually because we are inside of Figma. So all of this we created here, we could have done ourselves, but we've just let Figma do half an hour without us having to touch anything, which I think you'll agree is a better use of our time to just get the basic layout onto the file. So there you go. We've got our wireframes ready. And in the next video, we're going to breathe some life into these wireframes by applying a design system that we will once again use AI to help generate. So I'll see you in the next video. 5. Implementing a Design System: This lesson, we're going to create a design system, and then we're going to send that design system to Claude to then implement that design system on our currently gray low fidelity Figma wireframes. So if we look at what we generated in the last lesson, we've got all these boring gray Figma wireframes, which is hard to potentially imagine this being a finished website or web design just yet, because it's missing a few things. Number one, it's missing that design system, it's missing color, it's missing fonts. It's also missing some imagery and iconography. And also, certain parts we need to put in more appropriate placeholders and rejig the layout a little bit. But you already start to see this design come alive a lot more by just applying a design system to it. Now, in the age of AI, we have something called design dot D. What is this exactly? It was developed by Google, I believe, and it's a design system document that AI agents can use to read and generate consistent UI across your project. So basically, it's like the design system living inside a markdown file dot d is Markdown, which is basically just a document that is easily readable by AI agents. And if we look inside the project folder, if I go into our brand identity folder here, we can see that we already have a brand identity right here. Let me just bring this into the frame. You can see here that we already have our color palette and our fonts. A design system goes into much more detail than that. But for this project, we're keeping it simple, and we can actually create a design MD file off of this. And then what I'm going to do is remember those inspiration sites you found earlier? Well, here in mind again. I have Jade leaf marcher and morning made. Well, I've created this tool right here called a design system Mixer. We're going to use a chrome extension I built called Design MD extractor. We're going to extract the design system and create a design dotD file from each of those websites, and then we're going to mix them with our own design dot md to create a new remixed design dotD file. This is one of the powerful things that AI is good at. It's good at mixing things together, and using the design dotmd format, it means that we're using a format that has been engineered by a giant company like Google. Okay. So the first thing I'm going to do is generate a design MD file from the files I already have in my project. Okay? So what I'm going to do is, remember I ran this here in this window here. This is not connected to any folder. So I'm going to click this button here to open up a folder, and then I'm going to select the brand identity CNS folder here, open that and now it'll have context within that folder. I think it's actually going to open up a whole new window, and I'll have to create a new clawed session, but that's fine. As you can see here. If I run a clawed code session, it's going to now be running within this folder, so it has access to all the assets within this folder. All right? So what I'm going to do is I'm going to ask it to generate a design dot md file based on the files in this folder. Namely the logo. So you can use the at symbol here to reference specific files within the folder. So I can say namely the logo, the whoops I just wrote the literally. Sans, it doesn't respond well to files with strange accents in them, unfortunately. So I'll just open up the At here and then find it in the list. There's a lot of nested folders here. But there we go. The brand identity guide, and the colors and fonts document. I'm also so that it has context of what a design dot MD file is, paste in this. So I will zoom in here for you to see what that is. Just write that in word for word. Build a design dot d from this following the canonical Google Lab spec at the Github address of the design MD file and mirror the structure of the reference example at the design MD. Okay? Just giving it that extra detail so it knows exactly what we're trying to do here, and then I will hit Enter on that and let Claude code do its magic. While it's doing that, we can then go to our example websites and extract their design MD. So let's go over to this page on my website, christopher dow.com, DesigmD Mixer. And at the bottom, it links to another page, DesignmdEtractor. I'll just open that up in a newTab and you can see here that we can download this chrome extension. So how it works is you open any website and then you click on the design MD extractor icon. In your Chrome toolbar, and then it'll take all the computed styles and name CSS variables and then puts them into a design dot md file. In order to install it, we need to download and unzip the file and then go to Chrome Colon extensions, turn on developer mode, and then load the unpacked file, click Load Unpacked and select the unzipped design MD extractor folder. Alright, so a little bit of setup here. We're going to just go into our desktop here and drop in design dMDEtractor. Then we're going to unzip that Zip file. And here you can see the unpacked folder containing the web extension. Then we can go to Chrome Colon Dash extensions. Turn on developer mode up here on the top right, minus already turned on. Click Load unpacked over here on the left, navigate to the folder with the name design MD dash extractor, the one we just unzipped, hit Select on that, and then it'll say extension loaded. And as you can see here, I've got it twice, so I'm just going to remove the most recent one. I don't need multiple of them. Chrome extensions are very easy to make nowadays because of AI. So I have a few that I have created previously that are here on my Chrome account already. And then what I'm going to do is I'm going to navigate to that address. So the first one, Jade Leaf Macha, and I have a few different extensions. I'm going to have to click on this to open up the full list of extensions. And then I'm just looking for design dot d extractor. Click on that. And then I'm going to double check the brand name is correct, extract and copy prompt. This will open up Cloud in a new tab. We can either do it here on the web or we can go back into our Cloud code session right here and create a new session. But let's just do it on the web because it's easy enough. We don't actually need to run anything locally here. So I'm just going to paste in that exact prompt and hit Run on that. Then we can go to the next one, which is morning made.com. This is another design I like for a Macha website. So then we're going to go over here. We're going to go to design dot d extractor again. This one has the wrong name coming through. It says ceremonial. So we just need to change that to morning made. Then we're going to click Extract and copy. Put this into a new clawed session. Hit Enter, it's as simple as that. And then each of these clawed sessions is going to return back a design dot d file. Okay? So if I go back to my session over here, looks like it's finished now. So it says, I created a design dot md file in the brand identity Sans folder, blah, blah, blah, blah, blah. So let's look inside our folder. Go into brand identity seance, and we've got that design dot d file right there. If we open it up in Visual Studio code or whatever our code editor is, this is a little preview of what it looks like. You can see it's generated variables for all of the colors and the fonts here. It's also inferred some other details there. Have some general information about the content of the brand. Obviously, if you want to review this and change anything here because it doesn't really match with what you had in mind for the brand, obviously, go ahead. But if this is based on locked in brand identity files that have been confirmed, then this should all be accurate. So we've got that design file now. We're going to go back into here. I'll go back to actually not this page. We've already gotten our extractor, and then here in the design MD mixer, we're going to start by uploading our own brands design dot md file. So I'll click Open there and it'll just copy the details into this box right here. And then we're going to have our inspiration sites. Here you can see I've already done this. So I already have morning made here. I believe it's cached my previous inputs here. But now you can see in these Claude sessions, both of them seem to be done now, so you can see we've got a design MD for which one's this one? I forgot the name. So this one is for Jade Leaf marcher, so I'm going to download this. And instead of calling it design MD, I'm going to call it Jade Leaf design dot md. We can drop that wherever we want, and then I'm going to download this one, which is morning made design MD. So I've got both of them now, and then I can go back over here. For the morning made one, I will go one step back. Actually, it was two steps back, put in the morning made design. And as you can see here, I've got an extra box for what do you like about this site's design. So when the AI is remixing these ones, it's retaining what you like about each design system. So what I liked about morning made, if I go back to it, Was I liked this sort of paper looking background color, and I also liked the spacing and dividing lines. If I then go to Jade Leaf Macha, upload the design dot D for Jade Leaf Macha. What did I like? I liked the p shaped header, border radiuses, and iconography. So if you go to Jade leaf marcher. I liked this pill header. As you can see here, that floats over the top and the border radius. So the curved edges on this I particularly liked. So what I'm doing here by adding this is letting Claude know to look at those parts specifically when it's building our new design system. As you can see here, we can then hit generate prompt. It's going to generate a pretty big prompt, 34,000 characters. And then what we're going to do is just like we did with the planning tool, we're going to copy that prompt and then just go straight back to Claude. Right here in the same window where I created my design MD for my brand, I can either do it directly in the same session or create a new session. I'm going to do a new session, and then I'm going to paste in the prompt to generate the combined design dot D file that takes inspiration from this other site, but ultimately combines it with your own design MD to create a new design dotmd file where it has all of the information that Claude needs in order to re skin the Figma wireframes. Hit Enter on that. Okay, so now that it sees we're creating this in the same folder where we have the original design dot d, it's asking us whether we want to overwrite that file or save as a new file. It doesn't really matter. I'm going to hit Save as a new file just in case we needed the original for whatever reason, but we shouldn't, so that looks like it's now done. If I look inside the folder, this is the design synthesized version that they just created. So what I'm going to do is I'm going to switch back to the original session. You can probably create a new session, but this session I at least know has already done something on Figma, so it has the context already. So I prefer to do it right here, and all I want to do is I want to write the following simple prompt. Please take this design system and apply it to our current Figma mockups. Okay. Then, of course, I need to attach that file, so I'm going to click Upload from computer. Grab the design synthesized dotmD as long as it's in the same format as design dot MD, it doesn't need to be named exactly design dot MD. And then all I'm going to do is hit Enter on that, and then it should then re skin our Figma mockups in real time, okay? So I'm tempted to move directly over to Figma and see this happening live Figma, but there may be some questions that come up from Claude, so I want to be checking both of them at the same time, if possible, but looks like everything's going well so far, so I'll just leave it here for now, so we can see this updating in real time. Alright, so now it's finished, and you can see that these lifeless figma designs are now looking a lot different. As you can see, it's using our brand colors of that marcher green. It implemented that paper color background. It implemented the pill design for the header that I told her I liked from Jade Leaf marcher. The product cards look a lot nicer. The fonts now should match my brand fonts. So if we look, we've got Inter and seance body. So it's using Sans body, which should be, if I unlink it is Inter. So maybe we need to update the headings if we want them to be Well, actually, the heading here is correct, but the product title is using Inter. So this should be on Brand with tennis Sands. Yes. Okay, so it is using the right fonts most of the time. We might want to check its work a little bit there. And as you can see, at the very least, we've got color and border radius implemented in our Figma designs. So I'll leave it there for this video on implementing the design system. And in the next video, let's bring in some of our images, our iconography, and possibly clean up the design a little bit more because there's certain parts that definitely need some work. 6. Manually Adding Images and Icons: Okay, so in the previous two videos, we used our storefront planner and AI to build our wireframes, and then we applied our design system to the wireframes. They're looking a lot more lively now, but there's still work to be done. And we can use AI for this for certain parts of it. Like we could tell AI to update the icons here and tell them exactly where to look. But, of course, AI isn't free. We're going to have to use tokens and wait for Claude to come back to us or whatever AI tool that you're using. So for this, I'm going to be doing mostly manual work. But you can see here that the majority of the work that we could automate has already been done for us. So first thing I'm going to do is add in our logo because you'll see here it just says Sans marcher wherever the logo is supposed to appear. And if you recall, in the last lesson, I talked about components and instances in Figma. So here is an instance of the header. Go over here, we have another instance of the header, the desktop header. If we want to change something on all instances, we need to go to the master component, which is over here, and you can tell it's a master component. By hovering over it, it'll say component, but also this icon here. So this is for components. And if we have a look here, this diamond here is for instance. So if you want to make a change that's just on an instance, we do it on the instance, but if we want it to pull through to all headers or all of the instances of that component, we do it at the component level. So let's do that. Instead of Sans Macha, we will replace it with the logo. So what I'm going to open up my folder here, grab the logo, and then just drag it in to that position. Now we need to do a little bit of work here to change the height here to fill the container, it's going to naturally fill the height of the container, which is what it'll do in HTML anyway. Then we can delete the text that was the placeholder for the logo. It might look a little small. I need to see it maybe in real life, but maybe it's a little small. So I might just increase the min height of it. I will go here to the height, click to add a min height, and let's just say I want it to be at least 30. Okay? So now that's going to be a bit bigger. And now that I see that coming through, I think I need a little bit more padding on the left, perhaps. So I'm going to make an adjustment to the padding right here. It's currently at 24, which is linked to a specific variable, which is container padding. I actually might just leave that for now. Now, this didn't happen when I did this before, but the arrangement of the components is a little bit off. Some of them are overlapping. So let me just move some of these components into its own space here, so it's not overlapping with other components. And then this right here is the accordion row component. You might want to label these or just leave them as is. But as you can see here, this frame right here holds our master components. And for each component, there's going to be a desktop and mobile version. That's obviously not the case in the finalized code version of the theme, but Figma, because we have separation between the desktop and mobile designs, there's going to be a version for mobile and a version for desktop. So I'll go over here and do the same thing to replace the logo here. Go over to here, fill container for the heights, remove the existing one. And then, as you can see here, it's still a little too big. So do we have any top and bottom padding we do? So maybe we need to work with the width a little here? And reduce it down to let's say 100. As you can see here, it's cropping here. We didn't select fixed aspec ratio. So I'm going to hit fixed Aspec ratio and then reduce the width down to 100, and there you can see it's working a little better, but it's not arranged in the absolute center. So I might break it out of auto layout by clicking this button here to do absolute positioning. This will make it ignore auto layout, and then I can just place it in the dead center, okay, in case we wanted that. Actually, it looks a little bit off to the right or is that I'm just imagining that. I think there looks better. Okay, so now you should be able to see that that logo has ported across to all the designs that use that component, which is pretty much all of them because it's a global section. And so for the header, it's looking pretty good. It somehow figured out the icons without me giving it any icons. Maybe it actually looked inside the folder. So if we go back to the folder, and actually, they're not in here, but if we go back out and look inside this folder right here, we do have website icons. So maybe it looked outside the folder to find them. I'm not sure. Sometimes AI works in ways you don't specifically instructed, but we do need to replace the icons here for IG, Facebook, and Tik Tok. So what I'm going to do is I'm going to go into the social icons folder here where I have those icons. The first one is IG, so I'm going to bring in Instagram right there. Looks like it didn't fall in the right position. Oh, I see. I'm actually editing the instance here. So I want to actually go up here and edit the actual component. So let me do that again at the component level. That's a good one. That's a bit of a gotcha. It looks like it's being positioned inside this circle next to the IG text. I'm going to remove that IG text, and I don't want the circle at all. So let's drag this out of the frame and just put that there. Then I'll do the same for Facebook. It's kind of hard to place them exactly where you need on a small design like this, but there you go. You can always just move them once we place them. Try and throw TikTok in there. There we go. And there you have it, the three social icons without the circles around them. But they are a bit smaller than what we intended. The circles were 28 by 28, so I'm going to make all of these icons 28 by 28. But first, I've got to fix the aspect ratio. Again, click here to fixed Aspec ratio. And then once again on the TikTok icon. We don't want a white background there, so that was a little bit of an error from the AI, so I'm just going to remove the fill like such, and there you can see. So we may actually want these to be white, so we could go in here. There's a fill here, so we can actually change the color because they are, in fact, SVGs. But I actually like it as black. Actually, I think there's an off black that we have probably stored as a variable somewhere. So I'm going to move the fill here, open it up here, and try and find from our libraries the appropriate color. So we've got a whole bunch of color variables here that have been implemented at the previous stage. What about on secondary? So, yeah, it's about the same color but slightly different. So let's make these on secondary. Always good to use variables. Let's see. If I detach the variable, yeah, you'll see that it's almost black. It's very close to black. So it's better we use consistent variables so that our colors are consistent. And as you'll see in the footer, there's also a logo there. So I'm going to replace that with our website logo. Again, we need to fix the height of this, so I might just reduce the width of it down to 100, maybe a little bit more than 100, so let's say 150. Cool. And then similar thing here for the mobile version of the footer. Once again, this one can probably be 100 on mobile. Okay. And then we need to move we can probably just copy and paste what we've already done here to save us some time and then just remove this frame. 28 seems a bit big, so let's change these to 20 on mobile. And because we're making all these changes on the component, that should flow through to all of our mobile designs, okay? Another component here is the product cards. So this area right here, we're going to have our product image, so we can ignore the color of that. That's going to look different. But as you can see, we've got these curved borders with a shadow. You may or may not want that. I think it looks okay, so I'm going to leave it for now. What I want to do and I mentioned this in an earlier video is that I want to put the Quick Add button over the top of the image. So what I'm going to do is I'm going to grab that button and we can label this if we want. We can say Quick Add button, change the frame name if we want, and then I'm going to click drag it. Actually, I need to do this inside of the side bar here. And I'm going to click drag it up here. The problem with that is that we now have this little frame here for the image icon. We're not going to actually go live with that. That was just a icon there to indicate a placeholder. So I'm just going to delete that completely. And then I'm going to take this button, actually, the background color of the button, and the color of the image space is the same, so we're not going to see the outline here. But what I'm going to do is I'm just going to add some padding right here. And then for the button, I'm going to position it to the bottom. So I'm going to click here in alignment. Actually, I need to do that on the parent frame, set the alignment to the bottom, and then you'll see the boundaries of the button here. Maybe I just add a border to make that a bit more obvious. So it looks like it does have a stroke, but maybe the stroke is the same color as the background. So let me just change the stroke to something else, let's say, on primary. Okay, so now you can see this Once I implement this, I'll make this button only show up on Ha. But for now, that indicates roughly what I want. Remember, this area here will be replaced with images, and I'm not sure whether I asked for it in the planning stage or not, but this card seems to be missing the price as well. So I'm just going to duplicate the product title and do a product price here. And that's just too big. Actually, I think I will group these together. Frame selection, turn this into an auto layout frame, set the direction like such, align them so that they're equally spaced, and then set the width to fill the container. If you haven't used Figma before and you're not exactly sure what I just did, definitely watch the Figma web design class. I don't want to repeat myself in this class when you can go back and watch that one. In that one, I cover more of the actual practicals of using Figma, okay? So I'm going to set that to 12 instead of what it is now as the product title. So actually, I think I'm going to go boost this to 16 on desktop and the price to 14. And then, obviously, over here, I need to do something similar. It's like, very small over here. Let me see how it shows up in the actual designs because we put in the plan that we wanted it to be two columns. That's not a ton of space, so we might have to reduce down this gap on mobile. For now, I'm just going to leave it as is. And because there's no Harvest date on mobile, I'll leave the quick add buttons underneath. Or perhaps just get rid of them altogether. So I won't do that on an instance. I'll do that on the master component right here and just delete that from the mobile experience. Okay? All right, so that's basically the master components. I've updated them a little bit. I've put in the logo and the icons, but I haven't done any images yet. So over here, what I'm going to do is update the hero image. So I'm going to click this, and then I'm going to go into fill. And remove that color fill and replace it with an image fill. So I'm going to upload that from my computer inside of website images. I've got my hero section right there, so I'll bring that in, and then I can position it how I like it, like such. Now, it's a bit bright, so if I put text over the top, it might be a bit hard to see. I'm going to add another fill over the top, and Figma is good at this. It knows what I'm trying to do. It adds a black overlay at 20%, and then I'm going to change this from a dark color for the text fill to a light color. And because all of our variables are set up, again, I encourage you to not set the color with a hex value here, use the existing variables. So I think on primary and then here, primary as well. And you can see that that's looking quite nice, okay? The other thing is that I wanted the pill header to overlay over the hero. So what I'm going to do is I'm going to make this header on desktop, specifically on the homepage desktop frame because I only want this to apply to this page, I'm going to remove auto layout and let this position absolutely. Okay? So now it's going to go over, and then I just need to adjust my image a little bit. So I'm going to drag it like such. Now you can see I've got that nice pill style header that I saw from Jade Leaf that I liked. Okay? Let's put in the same hero image over on our mobile version. So we just click here, same hero section. This panel is kind of blocking it, but you can see here, I'm happy with that and we want the same colors here. So it was just on primary and then same thing for here on primary. And I forgot to put in the overlay, so I'll just press that button to add an extra fill, the 20% overlay, and I'll leave it like that, okay? We'll get to inserting the copy a little later, but let's actually go in and fill in product images to these actual product cards. Obviously, this information is going to pull from the back end of Shopify when it goes live. But for visualization purposes in the design, we're going to replace the fill here again on the instance, not on the component because each is going to have a different fill to represent a different product each. We're going to go into the website images. We're going to look inside photos, and I've got product images here. We're going to look in primary product images. I'm going to feature the matcha powder first, as you can see here. Now we can see that our button doesn't have any fill once we've placed it on top of an image rather than that background. So I'm going to go back over to the component here, make sure that this has some fill. So I think I'm going to use this color right here. Actually, that doesn't go well with the green at all. So maybe I just to surface. Let's have a look with an image. Okay. I think I'm pretty happy with that. Change the product title. Again, this is going to be dynamic information, so you don't really need to do this. But depending on whether you need this for visualization or you want to showcase this to someone else. I'm going to update the title. The name of the product is if we go into here, just go to open that in the new tab so we can look at Both at the same time. If we go over here, we've got our product list right here. So the premium matcha powder, 100 grams. I'll just get rid of the 100 grams part because we don't have space for that. And here we can actually see that we might not have space for all the details. So we might have to go back to the card here, the component, and reduce this down again, or 16 is pretty small already. Maybe we just increase the container width here to give it more space. So currently it's at 1,200. There's quite a bit of padding. You can actually see here that it's not extending the full width of the container, so I might try and fix that over here in the product grid. So I'll line them to the center, make them space evenly. It's still not fitting quite nicely. So what I think I'll do is, yeah, we don't have room to put the price on the right, so I'll just change that, bring this price down below the product title. And now we don't need the frame, so we can just remove that. Again, these things come up while you're designing, but with a tool like Figma, you can do this all manually, and with the Figma MCP, you can also have AI to help with the more basic stuff. So the price of that product, if we look at the product list, is $45. So there you can see, like how the card will show up on the website. Let's continue with the other product cards. I want to do this quickly because I don't want to get too bogged down on this. It's just the same process over and over again. So maybe we do the bowl next. And because these titles are going to come through dynamically, I'm not going to edit them here. But again, you might want to do that, update them to the right name. Actually, I want to do the accessories one last, so I'm going to do whisk and then I'm going to do the accessories kit. Okay. Maybe I will update the titles here. I'll just say ceramic bowl, ceremonial whisk and bundle set. Okay. So that's looking quite good on desktop. I'm going to change featured collection to our product range, and then I'm going to go over to here and do the same thing on mobile. I'll just do the images for mobile. But for your design, maybe you want to update the product titles and prices too. I just realized we have an add price to the overall component, so I'll do that as well. The next one was bowl. Then I see that the mobile card has this still, I just want to remove that. And then add in the price. So I'll just grab this, paste it in here, and then obviously make that smaller because we're on mobile. All right, so we can go back here, update these images via the fill property, and there's your bundle. Okay? So that basically covers the first two sections. If we want to actually update the copy of the hero section as well, I have the web copy document here for reference. So it was premium Macha for the modern wellness lifestyle. So I'll just replace that because now we can see that it's either too big or we need to break onto two lines. So it's good to put the actual copy in there just to see. So what I'm going to do is reduce that down to one of these variables. That's better. And then I'm going to, what was the other crafted for quality and purity. Okay, so we're going to go in here, put that in there. And actually, I'm just going to leave the font size like that. Same thing over here, bring in that heading. That's going to be way too big for mobile, I think. So we want to make it smaller, and then we can use line breaks here, but it's still a bit too big. So I'm just going to break out of the variables here and do 24. Then over here, the other web copy that goes underneath it. I'll put there definitely going to need a line break for that one, as well. So I'll do probably two line breaks like such. Maybe we reduce the font size as well. So as you can see, that's kind of the workflow. We insert the images, we insert the icons, the real content, and we make any edits that we spot along the way that we need to fix. I'm not going to do all of the templates because for a lot of these, the images is going to pull from theme data and store data. So a lot of that information gets lost when we build. And it's based on what I already just showed you. For example, if we wanted to to the product page, same thing again. We just take the area where the image is meant to go. We get rid of that annoying little icon there. Because that's going to be a problem. We replace that background fill with a real product image or any kind of image depending on where you are, and you continue through updating the images and replacing the copy, seeing what breaks, seeing what changes, and updating that as you go. The one thing I do want to cover on video is our Y CNS Macha is not looking too good and our testimonials as well. So I want to refactor that and also what's included is using basically product cards, so I want to change that. But the rest of it is looking quite good. We just need to fill in that content that's missing. But otherwise, it's looking pretty okay. Let's have a look at our global sections over here. Yeah, it's looking pretty good. It's even got the icons here in the mobile navigation. So rather than go through and add images and copy to all the templates, I might just in the next video take you through the selling points testimonial section and what's included section because the initial AI result that has come through is going to need a bit of work. And if you want to go through and populate the rest of the wireframes with your images, you can do that, as well. I might do that myself a little later for this test project, too. I'm going to break this into a new video, and we can talk about these extra sections that need some work in the next video. 7. Cleaning up AI-Generated Section Designs: So as we saw in the last video, AI has nailed some of the sections. I think the hero section and the featured collection section is looking pretty good. But the Y CNS marcher section, I can't really see the vision yet. And right here, the testimonials section as well needs a bit of work. So it didn't fully understand what's included because my intention is not for the customer to add individual products to the card when they're on the product page for the bundle. I just want to showcase the different products that are included in the bundle when they're on that page. So in this video, we're going to manually fix these sections. But first of all, it looks like for the selling points that Claude did not create that as a component, and I want these changes to apply to every template which uses it. I can, of course, just delete the section and then bring it over, but I'd rather it be a component instance, I think that also helps with the code generation to explain that it's the same code for each of these sections just with potentially different content. So for this, instead of fixing it myself, I'm actually going to go back to Claude here, and this is something you can do no matter what stage you are at the project. Claude can actually dive into Figma through the MCP at any stage. And if it's something that you can easily explain and that Claude can easily interpret, it makes for a good Claude prompt. Rather than necessarily having to do the manual work yourself. So I'm going to copy the names of these sections, and then I'm going to go back to my Claude code session inside of Visual Studio code. I'll say you implemented the selling points section. Actually, the testimonial section only appears on the homepage. So I'll just say you implemented the selling points section as regular duplicate sections. I would like it to be a component in Figma. Okay, so I don't know if I explain myself that well, but it seems to have understood what I meant, it's going to turn the selling point section into a proper reusable component. So it's going to inspect what's currently going on the Figma file and change it for us. Okay, so it's saying that it noticed something unexpected and it thinks that someone else has edited the file since they last checked. So I'm just going to make sure that Claude understands that. Yes, I have edited the file since you first generated the wireframes. Please do not reverse my work. Okay. Hopefully it understands that and doesn't go back reversing any of the work we've already done. I don't think it will, as long as we make it clear. Alright, so it now seems like it's done. Let me go into Figma, and, yeah, it looks like selling points is now a common component. Not sure where the component is, because this is an instance still. So we got to find there it is. Again, it's overlapped the other content, but I could just pull that off. And to be honest with you, that took about 6 minutes of time with Claude. In this situation, maybe it would have been just faster for me to do it myself, which goes to show that some things are just better done with AI and some things are just better done manually. So that's a good example there that took 6 minutes and spent a bunch in tokens. Sometimes it's just better to do it manually. Now that that's done, we can edit the selling point section in one location, and that information will pull through to all the templates using it. Okay, so what I'm going to do is obviously replace these tiny circles with the icon. And if we use the website that we built in the previous Skillshare class, as an example, these icons are a bit bigger the 40 pixels. So if I have a look here, 64 by 64, that's probably around the right size that we want. So I'm going to instead of just changing this to 64 by 64, we're going to replace it anyway. So I'll bring in the icons. The first one was radical defense. So let me find where that is. So inside website images inside of icons, this one is the first one, so I'm going to drag that in here. Going to come out huge. I want to fix the aspect ratio and then set it to 64 and then remove that dot there. I'll just quickly do the same for these other ones. Fast forwarding through this because it's the exact same process for every blurb. I'll also do that for the mobile version. Okay, cool. And then I'll just fill in the featured titles and descriptions as well. So I'll just copy that from the website, radical defense, sustained ritual, metabolic spark, vivid detox, and then the descriptions. This is also in the web copy document. So if you're not taking it from the website like me, you can take it from the web copy document right here. S, sustained Ritual. I'll switch to the web copy document because you might not have access to the website from the previous class, but it's the exact same content here. And maybe it's worth noting that we could probably have avoided this stage if we just gave this information to Claude in the beginning. But there you go. I took us an extra few minutes, but now we've loaded in this information, and I want to see that now on the actual instance. As you can see, there's a few things that need to change. I want all of these blurbs to be centered, so I'm going to go to each of these blurbs, center the content. And I think I also want that here on mobile, as well. Let me go see it in place. I think maybe I want a different background color, too. So I'll change the background color here to let's say, white, but I'm not going to choose normal white. I'm going to choose the background variable, actually, the background variable. It looked white here, but it's not actually white. Let's try surface. No. I'll do surface bright. And then here also fill surface bright. Yeah, I think I like it more like that, and the text is not aligned in the center. It's aligned to the left. So just going to go into the alignment of the text here for each blurb and align it in the middle. Now let's have a look again. It's looking pretty okay, but the text is a bit too big, so I want to have a Max WIP container on the text content here. So, right here, I'm going to set a Max WIP by clicking on the Chevron next to the WIP, add in a Max With of, let's see what 200 looks like. Okay, maybe 250, maybe 260. Yeah. So I'm going to set these all to Max WIP 260 on mobile. And on desktop, maybe 260 as well. Let's experiment with that. 250 looks like it's not wrapping. I just need to change the resizing rules here. Yeah, I don't like how it wraps like that. So I think I will do for the Max with 260. So this one as well, setting them all to 260. Some of them won't change because they were already small enough, but these are responsive rules that are going to translate well, into the web and as we resize on different screen widths. Okay, so now you can see that we've got Y CNS Macha, and all of our changes apply to every template that uses it. Okay? Let me just check also the font. So it's coming up as Inter. I want to use the heading font here, so I'm going to switch that as well. I can use a variable here as well. I can click up here to switch it to the variable, or I should be able to. I swear I saw a variable for headings before. Seance heading headline MD. Okay, so just need to go in here, and I think click here to apply styles. That's what I'm looking for. So I'm going to do headline MD, apply that style across the board. There's also Title MD I can use. But let's just see what headline MD looks like. It might be a little bit too big. Yeah, I think it's probably going to be a bit too big. So maybe we do. Instead of that style, we change the style to something else. So title MD, and then maybe just like on the website, the upper case doesn't look good with that font. So maybe I do set it to MD, but just unlink that, bring the font size down to 24 or we can go to the style itself and change it at the style level. So if I go here and click to edit the style, I can bring that down to a few pixels, maybe to 24. And that's going to change it everywhere. So remember, here we brought it down to 24. We can probably bring that back now to the style it was before, and I prefer to do that because that just maintains the consistency across the website using these variables. So I need to apply the styles here as well, headline MD. And one last change I want to make here is I want some more spacing between the header and the container. So I'm just going to increase the gap to, let's say, 48 and maybe make this heading Instead of MD large, there we go. Maybe add in a question mark here. Do that on both. This one I want to be centered, so I'll just set the alignment here, and I'm pretty okay with that. So I'm going to leave it there, and let's work on the testimonial section next. So this one only appears once, so it's not going to be a component, but we can, of course, treat it like a component. And so what I'm going to do is replace all these image place holders with photos of the customers themselves. Same photos we used in the previous class, again, it's going to make them huge. So we've got to dial them down to what we think is better dimensions. I think 200 maybe is enough. And then we want to add a corner radius. We've got our corner radius, variables here. So because we're using radiuses everywhere, I think we should use it here. Remove that. Let's put in an actual quote. So I'll grab that from the web copy. This can be Sarah. So I'll copy her author name as well. And yeah, it's not looking that amazing. I think what we're going to want to do is make it look more like a product card. So I'm going to add some fill here. So I'll go into my libraries. Let's have a look. Let's do background. It's just going to do the page background on background, and surface surface bright, like we did up here, not feeling that Eva. I'm feeling something that's a little bit more white. Maybe if I put some corner radius here, again, using one of the default variables. And then let's center everything in this frame, add some padding inside this frame. I think that's one thing that's definitely missing. Let's see if we have any variables for the spacing. Yeah, so container padding. Let's use that. Okay, that's looking a bit nicer. And then some gap here as well. There's currently only ten pixels gap. So let's set that to 20. And now I need to see this stacked next to each other to see if it looks good. So I'm going to duplicate. Okay. All right. I think I like that. So just going to remove that place holder and use this duplicate. And again, if we were getting technical with this, we might want to make this right here a component as well. So if we make any edits, it's going to apply to all of the components in here. In fact, let me just do that right now. I'm going to create components, pull this into our components section right here, remove that and then bring in a instance of that component. And by now, you should know what that allows us to do is edit the card once over here in our components, and then those changes will flow through to all of the testimonial cards, okay? So I'll just name this one instead of testimonial one testimonial card desktop, right? And then I'll just duplicate this out twice. Okay. I like the look at that apart from something's happening here with this clipping. I'm sure why it's overlapping on the final one and not the other ones. The card itself is overlapping. So what we want to do is we want to make the WIP hug contents, but then add a minimum whip so it's not too squished like that. So maybe like 300. And then now we can align these in the center. We could align these with equal gap if we wanted to. I'm just going to line them up like this. And I don't think the image needs to be as big, so I might reduce that down to 150 and actually maybe put the testimonial at the top. I think all of these testimonials are probably too much text, but let's not reinvent our copy just yet. So we're going to replace this one. Obviously, at this point, we are editing the instances because we don't want this change to apply to all of our components instances. Then we just need to drag that into this instance. It's not liking me dragging a new image in, so I'll just update the fill here and then replacing the content of the last instance here, Ava then obviously, you need to replace the image here of the third profile. Okay, so I think that's good for now. I think if I spent more time on it, I could definitely fix this up. I think these burbs are probably these testimonials are probably too long or need to be presented possibly a little bit differently, but I'm happy enough for now, and I'll just do the same thing here for mobile. So I'm going to create a mobile version of this testimonial card. So I just duplicated the component, and I'm calling it mobile, right, drag it off, so we know that it's different, and then I will option drag. To bring that in, delete the other ones, the placeholders, and then duplicate that twice. As you can see here, it's not centered in the middle, so I'm going to align that in the center. And I just realize we don't have a heading, so I need to put above this testimonial row a heading. Actually, I'll just copy the heading up here, place it above here. Then we're going to need some gap in our testimonials section. I think the gap I used before, what was it? Let's get a consistent gap going. It was 48, I think I used 48 here, then I, perfect. Okay. Then same thing over here, we'll copy this onto our mobile design, put that to the top, and I'm actually pretty okay with those cards. So I'll just replace the content once again. Okay. So as you can see here, this is looking pretty well filled out. It has actual content inside it, so you can see how it's going to look on the final website. And so those were the two sections from the homepage that I wanted to address. The selling point section also goes into the product template, so that covers the product template as well. But finally, I wanted to cover and fix up the what's included in the bundle. I don't want this to look like a product card, so I can actually detach instance here, so it's not an instance of the product card. Then I'm going to remove the other ones here and I'm just going to duplicate what I create here. I don't want it to be a product card. It can be a little bit similar. I'm going to remove the quick ad. I will put in the product title, premium marcha powder, replace this, of course, with the image. I'll remove that. Add an image fill. We want to go back to our product photos. Our primary ones, add in the macho powder. And instead of reviews and all of that, I want to put in a descriptor of what that product is. So I think maybe I have it in the web copy here. Actually, let's do some dot points. So I will create a new let's just duplicate this, then obviously we don't want to bold here. Looks like I've triggered the AI prompt box accidentally here. There we go. So I want to group this together into its own frame selection. I want to add auto layout. I want to align it in the center, this title to be bigger. So I'm going to apply that style. Obviously needs some gap. I'll add 16 pixels gap. The heights won't be fixed. It'll be hug contents, and I'm going to rename this frame what's included card. Make this a bigger headline, headline large, center everything in the container. And a lot of personal preference here, obviously, design, however you like to design. And I'm obviously going through this fast because, you know, you might want to design it in a completely different way. But just to finish off this lesson and make this look a little bit more appropriate for what I had in mind for the actual website, I'm going to line these up auto layout, flex them with space in between, and then rename here to the other products, which, if we look inside the product list, we had the elegant marcher whisk. Let's make each product title two lines so that they match, and then text a line center. Need to obviously replace the image, and then the final one will be the bowl, and then we need to grab the name of that bowl, the premium marcher bowl ceramic. And then for here, I don't have any content quite yet, so I'm going to leave that as placeholder content for now and then clean that up in between videos before we're ready to generate the code. There's something here that's making the section really big here, so let me just try and figure out what that is. I believe we have a fixed height on the container here. If I switch that to hug contents, no. Let me just bring it up manually, and I think that's good enough for our Bundles page. Again, I could go into a lot more fixes and updates across all of these different templates, but that would create a really long course, and a lot of it is going to come up to personal preference of you as the designer. So in this video, I just wanted to show you how I would clean up certain sections. Obviously, I've got to do the mobile version of this. I'll do that between videos. But showing you how you can create your wireframes, you can reskin them with your own design system, and then we can go in after that. And manually do our normal Figma design process now that we've got that groundwork laid for us. I think you'll agree that setting up the wireframes ahead of time and getting Claude to help implement our design system is saving us a lot of time, giving us more time to focus on the important stuff, those little minor updates that we talked about in this and the previous video. So after this video, I'm going to continue to clean up these designs, get them looking exactly how I want them on the live website, and then we will then use these high fidelity figma designs, as well as the spec sheet that we generated earlier. Right here to go ahead and actually generate the code for our Shopify storefront. 8. Generating Theme Code: Alright, so as mentioned in between videos, I was going to clean up the Figma design if we go all the way out to the product page, the Bundle product page, the collection page, you'll see it's all built out now. Contact us. I didn't need to make any changes to that. I filled in images and actual information here for the cart page. Cart page isn't too important because not many people will navigate to it, given that we have a cart drawer. The search page on Desktop and Mobile and then we've got our blog pages here, which I haven't filled out. I'm not going to implement a blog in this class, so I'm just going to delete all of these templates altogether. Remember, I mentioned in the planning video that you can just delete these from your plan if your Shopify website doesn't have a blog at all. I wanted to include them just to show you how they're coming through as a wireframe. But I'm just going to delete these wireframes altogether because we don't really need a blog template. And you can see over here our drawers. So the cart drawer on desktop, which is basically the same design as on mobile and our navigation drawer right here. We've now basically built out our Figma file. It has all of the templates that we need to build. As you can see listed here. Everything is nicely structured into sections with auto layout and components with instances, just like we did in the Figma web design class. And just like in the Figma web design class, we're going to now generate the code for this Shuberfi theme. Unlike the Figma web design class which was agnostic to a platform, it wasn't based on Shopify or anything. It was just based on HTML and CSS. In this situation, we are going to actually build a Shopify theme, which is a very specific set of code files that only run on Shopify stores. So that's why we went through the planning at the beginning with the planner. This is all built specifically for Shopify, and then these wireframes have been set up specifically based on that plan mapping to certain templates within a theme, the theme being the system that represent the storefront operates on Shopify. So, along with these finished high-fidelity mockups and the spec sheet, which if we go back to our storefront planner and we look next to our web design plan, we can see our spec sheet here, we have enough information to give an AI like Claude the instructions to go build that theme. Before we do that, we just want to check on what possible questions might come up during the build. You can see here that I have this orange part at the top of the spec sheet. This will cover stuff that we didn't really cover in our plan. So it's asking for the featured collection section, is the section's content source theme data, store data or mix. So it looks like we didn't fill out content source. So I'm going to go back to the project and just make sure to make that part specific. So I'm going to go into other sections, go to featured collection, edit information. And you can see here I didn't set the content source. So I'm going to say mix of theme data and store data because the products are going to come from the collection, but the specific collection that is chosen will be from the section settings. So I'll save that information, go back to create web design plan, and then I'm going to copy the theme build instructions. Actually, before I do that, I want to rename this and give you access to this file. So let's say seance Macha Skillshare class project in case you want to access this. So I'll hit Share here, and then I will copy the link and try and include it somewhere in the class. Under worst case scenario, if I haven't posted anywhere, I'll just create a note here, can pause here, screenshot and then pull the text content from this right here. Okay? Alright, so back to here, I'm going to copy the theme build instructions again and I'm going to open up a new window in VS code. You can do this in whichever code editor or IDE that you prefer. For me, it's Visual Studio code, and I use Visual Studio code in all of my classes. So I'm going to create a new window inside Visual Studio Code. Actually, I need to point it to a specific folder. So I'm going to open up my finder window here, go backwards to my desktop folder here, and I'm going to create a folder called custom theme. Okay. Then I'm going to go over here, click on this button called Explorer. And as it says here, I haven't opened a folder yet, so I'm going to open up that folder. Of course, this folder is empty, but now everything we do inside this folder will apply to this folder. Okay? So I'm going to click over here to open up a Claude code session. And then all I'm going to do is paste the Figma instructions, and then I also need to attach the spec sheet. So I'm going to go down here and download it as Markdown. Markdown is easier for AIs to read. Word document is more for humans. So I'm going to download the Suns marcher spec sheet to that same folder. Then I'm going to press this to upload that from my computer. Select the SNS marcher spec sheet, and this should be enough to go ahead and build the theme. Now, I can actually read here. There's a few things I need to mention. Before you begin, this needs to be actioned first. It's in the prompt, so it's going to prompt you to do this anyway. You will need Shopify CLI in order to push the theme files to your Shopify store. I guess you can opt to just create the theme, trust that it works, zip it, and then upload it via but I'd recommend you do it with the CLI. So if you're not familiar with the Shopify CLI, CLI just stands for command line interface. You can just search Shopify CLI on Google. It should direct you to a page like this, and then you can just install it if you haven't already installed it. Okay? The other prerequisites you're going to need are a Shopify MCP connector. This prompt Iclaud should prompt you to set that up and connect to a store. Of course, you're going to need a store to connect to. I'm going to deploy this theme directly to the same store as I had for the previous class, Sansmchatmshofy shopify.com. As you can see here, we've got the Horizon theme, and we've got the prestige theme on trial, which is the theme we built our storefront on in the previous class. And so connecting to this store, what it's going to do is it's going to publish this theme that we're creating to the draft themes. Okay, so I think that's all the prerequisites, but once again, if we run this prompt, Claude should tell us what we need if we're missing anything anyway. Okay? So I'll zoom in, and then I will hit Send on that. While it's doing that, we can look at our design and take a look at some of the dynamic content that we will need within our existing Shopper Fire Store. For example, the menus and the products, okay? So, up here in our header, you can see we've got these menu items, and they each have a Chevron, which indicates that if there's sub items, hovering over these is going to open up the sub items. Currently have a very basic menu in our store at present. So if I go into the actual it's now living in the content section of the Amen, you'll see main menu, there are just three links with no nesting. For a store with just four products, this kind of makes sense, but in the real world, you might have 100 products, so you would potentially want menus that are nested two or three layers deep with more menu items than this. Same thing for the footer. So if we scroll down here, you can see there's all these menu items. This is going to pull from that same section in the admin. So you'll see when we publish this, these will be empty and we need to link it to the correct menu links. So it might not look exactly like the design in that sense, with the placeholder menu items here. Then of course, each of these is pulling from a different product. So each of these would need to be set up as a product. But I believe we already did that in the previous class. So if I go to my product section over here, you can see that we have the four products already loaded in. And if you didn't take the last class and you haven't got this already loaded in, that's totally fine. If we go to the project folder, I'm quite sure that I left in the product list. So what you can do is you can just go over to here at the top of the products page in the Amin, click Import, and then import a Shoo five formatted CSV file, and that'll bring in that exact same product list. Okay. Also the collections. So I think pretty simple, but I've got one shop or collection. Doesn't really make sense to have any more collections other than this when you've only got four products in the store. But when you have lots of products in your store, obviously, you want to arrange them into collections. So I believe that is the majority of the dynamic data. Stuff like this will come from the section settings. So we'll just need to set that up, or the theme will have those defaults included, so it'll come out of the box. Obviously everything in this section comes from the product object itself. What's included doesn't really need to change anywhere on the site. This obviously pulls from a certain collection, and the search obviously pulls from products or other resources in your site based on your search term. Okay? So let me look back at our clawed code instance now, see where it's at. And it's asking us if we want to proceed with an MCP query or action. I can't remember what it's called. And of course, we want to say yes. We're going to need to use the Shopify MCP in order to connect to our store. So we'll just wait for it to come back asking for us to connect. Okay, so here we go. What do we need before starting? It needs the exact store domain. So I'll just grab that for our instance here. It's going to be Sans marcher.mishabify.com. So I'll say number one. Number two, Shopify CLI login. So I will click to open a new terminal and run this command right here, replacing your store with Sans Macha. Obviously, put in your own store here. Okay, we've come up with an error here. I think this is a bit out of date. This used to be how you could log into a store. Instead, I'm just going to go Shopify Theme Dev. Store equals, and then put in Sans Macha dot my shoafi.com. And this will open up a new browser window for me to log in. We're just going to match this code with what it displays in our terminal. Yep. Confirm and log in, says we are successfully connected so we can go back to here. Alright, so I'll say number two, I've successfully authenticated, and down here, I'll say yes to proceeding. It's going to ask for the store password. Okay, so we're not fully done yet. The store password is something you find in the online store sales channel under preferences. I've made the password fake, so I'll just type that in. Fake. And that should be enough to actually connect to the store. Okay, it says, No, because I'm already running this same command with a different store. That's quite typical for me, being a Shopify developer. I work on a variety of stores. I've just gone ahead and cleared that, so I'll run this again. Yes, I want to proceed. Okay. And now it seems to have worked, but it's trying to actually upload this theme, and there's nothing there. So yeah, it's not really going to work yet. Then number three is the Figma frame link. So what I'm going to do is that link I copied before, I'm going to copy inside this Claude chat, too. So the share link right here. Then Shopify MCP connector, I'm going to ask if Claude code itself can connect me. Please connect me. All right. And this is a good thing about AI, if you're blocked at any stage, is going to tell you you're blocked and prompt you with what you need to get unblocked. So just follow what the AI agent tells you and you should be fine. Otherwise, as always, you can use the discussion section of the Skillshare class. I'm going to minimize this a little bit so we can see more of what's happening up here. And I can see from the logs showing me right now, it's already starting to read the Figma, figure out what's inside it, and soon it should get started on the build. If I click this button to look at the explorer, you can see no files have been created yet, but that's soon to be happening as we build out this theme using that master prompt with a spec sheet. Okay, so it's asking me about the frames for the blog and article template, the ones I just deleted. So it's asking me, should it build a standard convention or just skip for now. I'm going to hit Skip for now. Alright, so after an additional 15 minutes, it's now completed what it was doing. And as you can see here, it has built out all the files inside the different folders that make up a Shopify theme. Okay? So let's scroll up a little bit and read what it has come back with. It says, I've now built and validated all eight templates that have Figma coverage. Here's a full status report. So instead of reading this out line by line, I'll just cover the main points. So it understood that certain sections are shared across every template. So it's created those. It's created the different templates. It's understood that there's an alternative template. For contact page and for the product bundle. So as you can see here, I don't expect you to fully understand Shuba fi theme code, but if you do, you can see here that this is definitely an alternative template just from the file name alone. They skipped the blog article templates because that was removed from the Figma, then certain assumptions it has made with variant switching, for example, there has been no Figma UI shown for it, so it added a minimal low design select just in case a variant comes through. For the quick add to cart, it inferred that it should direct to cart rather than a cart drawer. We might need to change that. We'll have a look at that. Collection sort, it's going to do a sort by for the collection page using Ajax, which basically means no page reload. It did not invent any filter facets. Again, we did not tell the planner in the beginning that we needed collection filters, so it just hasn't included that. In the cart page, it's using Ajax to change the quantity whenever we update the quantity within the cart page. And the search page is scoped to products only. Fixtured collection section has no live data yet. The store already had two themes, Horizon, and it says, development here, it must mean the one that's currently running using the CLI. It hasn't pushed anything. Tell me whether to push to that existing dev theme or create a new one. Technically, this development theme exists just in the CLI. As soon as we turn off the CLI, that is not existing anymore. So we're going to have to ask it to push to a new theme. Then manual visual QA is still required, which is totally fine. Okay? So I'm going to say, for the deploy target, please deploy the theme to a brand new theme. Please deploy the code to a brand new theme. This one that we're running right here in Shopify Theme Dev is still the one that was mentioned earlier, this development theme. So if you're familiar with the CLI, we can run a development theme to test out code changes without actually pushing that to the store. So while it's pushing the theme to the store, let's actually have a look at that one. So we can typically find that the same address each time, if we pull up the terminal, we'll be able to see which one that is. So it's typically this address. So I'm going to copy that address, paste it over here and looks like we've got a four oh four error. I'm just going to close down our previous session by pressing Control C and then restarting it. We first started it, there was no theme files whatsoever, so that's probably the issue. And now you can see that it has come through. So as you can see here, some of it's good, some of it's not good. Our basic framework is here, but there's some things we need to fix. Namely, we've got this weird container here. Not sure exactly what's going but it seems that the page is not reaching to the left and right of the screen. So while we can use Figma to create our initial theme, and if we go to a product page, which is going to be easier if we enter the online store editor. So I'm going to look at the second link over here. This will allow us to navigate to the different templates and also add in missing theme data. If we go over to the product page here, we should be able to see, and this is a very small screen size. I'm going to zoom out for a bit, and you'll see that it did create the necessary sections, but there's quite a bit of cleanup to do here. As you can see, here's our little product cards. What I'm going to do before we go ahead and clean that up is I'm going to add in the missing data. So for featured collection, it understood correctly that we want to bring in a collection, but we need to select what that collection is, okay? So after we do that, it populates the information. I'm going to hit Save on that. And in the next video, I'm going to take you through cleaning up the output that has come through from the AI code generation. 9. Cleaning up Theme Code: Alright, so in the last video, we generated the Shopify theme code for our storefront. But as we saw, it's come through a little broken and a little incomplete. So we're going to spend some time in this lesson fixing up as best as we can the output that has come through from the AI. If you remember from the Figma web design class, we were able to get a fair way using AI code generation, provided that the Figma files were set up the correct way we still had to do some little refinements along the way, and this is no different. In fact, it's probably a little bit more challenging because it's based on a platform where a lot of data is pulling through from different locations. For example, the featured product section on the homepage is pulling through from section data. And you'll notice here the product list is missing here. That's something that's an easy fix. Sometimes there'll be data missing that we need to actually insert into the theme. Now, one of the issues we're going to face is that this theme that we're looking at right here is a development theme that's going to disappear as soon as we turn off the CLI, as is this online store editor right here. So I'm going to not use this now while I update the theme and instead look at the theme on the actual store that it has created. Ans Macha. In order to make the edits, we are going to prompt Claude, but we'll just have to ask Claude at the end of each session to push those changes to the store to that theme so that we can actually view them. And this is a little bit of an issue with Shopify the data of the theme in which we edit here in the online store editor and the code both live in the same folders. But if we edit the data here, it doesn't automatically come back to this theme version on our local computer, okay? So for now, I'm going to do it on the storefront, and then I'm going to compile a list of changes that I want fixed send that to Claude, and then Claude can push those changes to the theme. Okay? So I'm going to go to the featured collection section here and load up a collection. So as you can see here, the theme code generation has successfully added in the customization settings. So as you can see here, we can customize the title. So we could say featured collection, or we can leave it at our product range. And if we had other collections in our store, we could show other collections, okay? This is pulling through correctly. As you can see here, we have selling point blocks. I'm actually going to zoom out a little bit here, so we can see on the left here selling point blocks and then the details for each. So we can change this. We can update the icon. It looks like it's pulled the icon and added it directly to the theme. But ideally, we don't want to do that. I'll leave that as is for now. It looks like here we can change the icon to something else, like we can see here. But if we don't add that in, it's still going to default to these images. And if we go down here, same thing as well, so I can change the image here. This store already has images from the previous class, so that's why you're seeing them in the library here, but you can always upload your images to this section. Actually, I'm going to put that as my first piece of feedback. If we go into the Assets folder, we should see all the images that have been included in the theme. Ideally, we don't want to have any images installed in the theme itself. So I'll just create a feedback prompt here. One, do not store images in the theme. All images should come from store data or from theme data. Okay, that's my first piece of feedback because having the images in the theme means that we create a bulkier theme. We just want to have the code in here, and we want to have the photos actually uploaded to the files section of our Shabafi Amin. Okay, so that's the first thing I'm going to change up here in the header, you'll see that it's linking to main menu. So these are actually the menu links that we have in our main menu link list. So as you can see here, if I click Edit, that'll take us to the menus section of the admin for us to edit. So I believe these links should therefore be correct if I just go back to it now based on the work we did last time. Yeah, so those links should work. The logo, again, is showing a logo without us uploading anything to it. So this first feedback should fix that as well. And then the really glaring thing is, if I just go here to preview that theme, I'll just say entire layout is indented on the left and right. Try and be as descriptive as possible here. I'm a developer, so I'm able to sort of look at the code and be a bit more descriptive. We can probably figure out what that indenting is by looking at the code here. So we've got this weird content margin content grid system going on here. Is typically not how I would set it up, but you can see here, I believe that the body section is on some sort of grid. But let's just ask Claude to fix it. Entire layout is indented on the left and right. The left edge of each section doesn't line up with the left edge of the viewport and vice versa on the right. Okay, we want Hova states on the buttons. So I'll say implement Hova states on all buttons and links. So yeah, the website feels like it's not very interactive because nothing is happening when we're hovering over buttons and links. And over here, the gap between icons on the right side of the header is inconsistent. The gap between icons on the right side of the header are inconsistent. Not sure what caused that. And then this pill shaped header, pill shaped header on the homepage should be positioned over the first section. Then I know some CSS, I'm going to say sticky or absolute positioning as much detail as you can possibly give it here, I might not be as much as I can provide, but just do your absolute best. I think we're missing for the FOD the links here. So for Instagram, I'll just put in instagram.com because this is not a real brand, but it's not going to show the icon by the looks of things. Unless we insert a link. So I'll just say instagram.com. Yeah, and as you can see, that creates the link, facebook.com, and then TikTok, which I believe is just tiktok.com. And then when I put in these links, then the icons appear. Now, for the newsletter section, I'm not sure why it has all this space there. Let me have a look at the Figma designs or what it's supposed to look like. Okay, so I'll say there is a big gap in the footer between stay in the loop and the email input. All right, What next? Logo is stretched on the footer. Logo is stretched horizontally in the footer. Okay, so that's just the homepage alone. If I go to the product page, you'll see here, honestly, not that bad. But again, the sections are kind of indented in the collection for the related products, I'll just load in these, but they're going to be off to the left. So I'll say if there are three items or less in the featured collection section, center the product cards. When working with dynamic data, it's good to have conditionals in here. Just because it's three items now does not mean it's going to be three items in the future. So you don't want it to break when new items are added. And as I mentioned, I wanted the Quick Add button. So if I refresh over here, Quick Add button on the product cards should show only on product card hover, and the width of the button should be 100% 100% meaning taking up the 100% of available space. Reviews we can't implement without a specific reviews app, so we would have to insert a Reviews app first. Now let's see what happens if we click our account button. Okay. Yep, that seems to work. Search takes us to a new page. I would ideally want search to open up a panel below the header. So clicking on the search icon on header, should open up a search input directly under the header to capture the search term. And yeah, obviously, in your situation, the feedback might be different. I would expect that. Also, it seems like the operation of the cart icon and Account icon opposite. I'll say operation of the cart icon, and the account icon is back to front. Also, the position is back to front as well. And also clicking the CRT icon should always open the cart drawer, not navigate to the cart page. So yeah, just go through the full theme. Obviously, it's going to be different each time how much edits we need to make. Let me just go to the product page. Oh, yeah, we had a look at it here, didn't we? Yeah. Okay. And now let's have a look at the collection page. Collection page is looking okay. And then we've got our contact page with the contact form. I'm totally cool with that, and we don't have any blog posts. Default page looks like this. Again, I'm pretty happy with that. So let me just run with this feedback for now. I'll remove the 13th point there, and then hit Enter. Okay, so that took a considerable amount of time, so much time that after about 15 minutes, I just decided to go to the gym and come back to it later. So it has completed. Here is the summary. I also compacted the chat, which is something you do when you're talking to AI agents to summarize the context every now and then. So that's why you're seeing this right here, compacted chat. But if we scroll back up and see what it has written here without us even asking, it's pushed all the fixes to the same unpublished theme. It's removed all the images from the assets folder like I asked and covered all the stuff. So let's actually just go back and check if it's actually done the stuff that it says it's done and it's fixed the problem. Okay? So we can go back to the exact same theme, and straightaway, we see there is a liquid error. So you can simply just take the liquid error and paste it directly into the chat, and usually it knows what to do. While it's doing that, you'll see once we go back to the homepage, you'll see that we've got the standard image placeholder SVG everywhere where an image hasn't been set. So let's go back into the online store editor and set those images again. So I'm going to go to the homepage here and add in our logo, which should already be in our library from the last time we set up this website, and now you can see the logo that we've selected is right here. We'll go into the hero right here, load in the hero image right here. Right? So instead of having the images pull from the theme folder, which is typically not what you do, we are making sure that they are all files inside the Shopper Fi store that we're then bringing into the theme via theme settings, okay? Selling points for each blurb, we're going to bring in the relevant icon, which I believe was these ones. And let's save that and have a quick look back here. Fixed and push the bug. Hopefully, that hasn't overwritten our data. Looks like it hasn't God. And you can see that the header is overlaying the hero on the homepage on desktop. That's good. If I click on the cart icon here, it does look like it's taking us to the account section, and the account icon is taking us to the cart and then we have this search here. It's a bit floating off in the middle of nowhere, so that's not ideal. The button now has a hover state, but it's not perfect Eva, and the quick ad buttons are only showing on hover. That's good, but they're not extending for with. And at this point, if you have the development knowledge, it might be just easier to edit the code yourself or to inspect the code and give more detailed instructions. I'm not going to assume in this class that you have knowledge of how to code or the Shopify theme development system. Of course, if you want to learn that, you can access my previous classes on those subjects. But here, I'm going to continue loading in the images. I believe that was Sarah M, Maya K, and Ava L. Obviously, these are fictional people, so it doesn't really matter. Hit save on that. And then for the Footer load in the logo. And it looks like we've lost that data that was in the social icons section, so just going to repopulate these. And this is the thing to be careful of. This is why I like to use the Github integration, which is a bit more of a developer thing, but the Github integration will keep everything in sync and minimize the risks of data loss like this. So I prefer to deploy my themes using Github. You can see that gap there that we asked it to fix has been fixed. And let's go now to what else did we ask in our list? So if I scroll back to the beginning, instead of seeing what it says it's done, let me see what we asked it to do. Okay. So yeah, a lot of logs in here to sift through. Oh, here we go. We can just go up to the top to feedback. So, yeah, it removed all the images from the theme. It had that issue with the indenting on left and right. It looks like it's completely fixed that now. Thank God. We wanted Hovstts on all the buttons and links. There are Hovstts, but the style that it has inferred, not particularly fond about, but it has done that. The gap between icons on the right side of the header inconsistent. It fixed that. The pearl shaped header on homepage should be positioned over the section. Yep. There is a big gap in the Footer. Yeah, we fix that. Logo is stretched horizontally in the footer. No longer is the case. If there are three items or less in the featured collection section, send to the product cards. Okay, so we can go to a product page right now, see if it's done that. So we need to actually populate the images again. So I'm going to go into my product template right here, and this product actually needs to be assigned to the alternative template. So let me go back into here. I might have to publish, actually this theme to the main slot in order to select that template. But as this is a development store, it's not live, that won't be an issue at all. And then for the complete marcher set, I'm going to set it. I'll zoom in here. I'm going to set it to use the bundle template, not the default template. Okay? Now, if we were to let's just go back to the homepage, then go back to the default product template. It shouldn't show us the bundle product anymore because that's on a different template. Okay? In here, we're going to add in those images again and also add in the related products. I'll hit Save on that. Remember, we were checking whether it aligns them in the middle. It hasn't done that. So that's one thing that it hasn't done. I'll just fix up the icons here for the selling plans. Hit save on that. Now I'll go to the bundle alternative template. Looking at the main product section, it's working pretty well. What's included, we just need to change this with the images. I'll put the image of the premium Macha in the first one image of the whisk, I believe it was in the second item. Yep. And then the third item, which is all blocks in the online store editor, as we would suspect will be the bowl. There you go. And 100% of this content is editable and rederable in the online store Editor, which is what we would expect, okay? Again, selling points here, I believe this is the last place that it appears. So only one more place to do this in. Okay, I got these back to front. Hit save on that and go over to our collection page. So we just have a default collection. For here, I'm going to throw in the landscape image. So going into our Shopify website images here, photos of a sourcing T fields version two, I think, was the one that we wanted. Hit done and we can customize the heading here to something else. If we want. Otherwise, it just defaults to the collection title as we would expect. And then here we have our collection grid. I'm going to hit Save on that. And what else? We have our default page. Don't think there was any issues with that and our contact page, which we didn't really have any issues with Eva. Unless we wanted to put some content in here, but I'll leave that up to you. Okay? Now I'm going to look at it all on mobile preview. So yeah, not 100% perfect. Definitely some things we can improve, but nothing really broken that I can see here. If I click on the Nav drawer, it successfully opens. Now, if I go to the product page, you'll see it didn't really get the order that we specified right. I believe in the design, we had the title and the price above. So we'd need to give that feedback to Claude, as well. Collection template. Yeah, you can see where I'm going with this. I'm just checking all the different pages. And as you have feedback, you can literally just insert that back into Claude and ask it to fix it. I'm only going to fix the obvious errors in this video. So, for example, I'll say additional feedback. One, contact us form section, what is it called? Contact Form section should stack on mobile rather than flex in a row. So I'll put that as an actual bug. What else was there? The big one was, if I just break out of this, this one, with this not going in the middle is not a huge bug. I won't make a big deal out of this. But there is a big bug in terms of why is the account icon triggering the cart and the cart icon is triggering the account. So I will say cart header icon is triggering account link and the accounts icon is triggering the cart drawer. It should be the opposite. Let me check the functionality of actually adding to cart. So if I wanted to quick add this bowl to my cart, the interaction was nice, but it didn't open the cart drawer. Oh, and I just remembered that this is not actually indicative of the cart right here. It's actually put it in the wrong place. But as you can see, we've got this nice little cart drawer that updates the only problem is we had to refresh in order to see it. So I'm going to write that. After adding to CRT, the cart drawer should auto update and open. And the indicator on the icon should show up a synchronously as well. I'm not sure how to spell exactly a synchronously. Tough word. I'll just type it into Google to auto correct it. So I'll send it off. Actually, I'll just double check the product page. Click how Add cart works on that. Yeah. Again, it looks like we have to refresh our page to see the updated card, which is not ideal. So I'll just send that off. I believe that 0.3 is touching both of those situations where we have the quick add cart and the Ad card on the product page. Let's just double check that our product gallery is working. It is, but slowly, so we can definitely optimize that. But I'll just run those, and the main principle that I want you to sort of take away from this is that it's probably not going to come out perfect, and your fix to getting it perfect is just to continue to iterate with Claude on what needs to be fixed. I obviously, as a developer on Shopify since 2019, know how to write the code manually, but even I talk to Claude now instead of coding myself. So I recommend taking this approach. The more technical knowledge you have, and the better descriptions that you can give it obviously will improve your results. But just do as best as you can, and most of the time, it should understand what you're talking about. Not just keep going back and forth until it does. So I'm going to wait now, hopefully, that doesn't take another 20 minutes, and I'll catch up with you when it's done. Okay, after about four more minutes, we get this. So push to live theme. It's saying Sans matre is now the live unpublished theme. Should we push these changes there? It's asking me this question because obviously, if it was a live site, this would be pretty risky. I'm going to make sure that it doesn't delete our data first. So I'm going to do other, and I'm going to say yes, push to live, but I've made some changes in the online store editor that I would like you to maintain. Don't wipe my work in the JSON files. So for those of you who don't know all of that information, all of the values in the online store editor go into these JCN files. So that's why I'm saying don't wipe my work in the JCN files. Hopefully it follows this instruction, and it'll be able to merge the code changes with the JSON changes on the actual website. Okay, so it looks like it's done. Let's have a look at what it said. All three issues are fixed, verified live and pushed scoped with the only flag so that it just changes the liquid and SVG files. So none of your theme edited JSON edits were touched. Okay. So the main thing was the icon in the header. Okay, so now looks like it's the correct icon. It's just the incorrect position. Right, but at least the icons are now related to the right place. And now, hopefully, actually, I'll remove these from the cart, as you can see. And then if I click Add to Cart, yeah, the cart will auto update, and so will the number. Let's double check on the homepage that Quick Add is doing the same thing. Is, I would like to be a bit more of an animation when the cart drawer pops in and out. But it is working. And like I mentioned earlier, there's also this Our story page, which is currently empty in this current theme. I'll leave that one blank for now. If you followed along in this class using the same brand, Sans Macha with all the same templates, I'll leave the Our Story page to you as an extra project to go on with. Add an extra couple of frames for desktop and mobile for the Our Story page. And then you can mimic what was created here in the prestige theme for that particular page. All of the images in the project folder with the copy for all of this. So you can have a go at creating this in Figma using AI or not, and then implementing this on a Shopify store. But in terms of the finished build of our custom design, I'm going to leave it here. Obviously, there's more work to be done. But, again, it's just going back and forth with Claude to fix it. And obviously, as a Shopify developer myself, I can get pretty detailed and in the weeds with this. But just in general, you can see that we've created our own custom theme from planning stage all the way to a working theme on an actual Shopify store using real store data right here. And the beautiful thing about this is this is 100% our own theme. Unlike that previous theme, the prestige theme, where if we wanted to go live with that theme, we would have to actually buy the theme, which I think is 300 to $400. So yes, while we did spend a bunch of tokens in Cloyd in order to take a website plan and create a totally custom theme, this theme is now our own, and we save the money on any other custom development that we might have to get, whether that be hiring a developer or paying for an off the shelf theme. So this is where we'll basically end the journey for this class. In the last video, we'll wrap things up, and I'll give you some details on your class project. 10. Bonus: Finished Theme Code: Before we move to the conclusion, I just wanted to include a little bonus video here. In between videos, I have gone ahead and updated the theme, cleaned it up. As you can see here, that search header needed a little bit more work, but now it's looking nice. I realized probably don't need search for a store that only has four products, but there you go. Again, all of this data is pulling through from the actual store. So the products and the menu up here and also the menu down here. But if I wanted this theme to exactly match the storefront, of course, I would go in and update the store data. Menus, of course, live inside the store, not inside the theme. And because we didn't create an O story page, I'm just going to delete that from the main menu and from the food menu. So if I was to go back here now, you'll see that that will change it on our theme. So I hope you understand by now, that some of the changes you'll make on your Shopify store are at the store level. So changing things like menus, products, collections, and some are at the theme level. And what I mean by that is when you're on your theme, these different settings right here, all of this is reorderable, as is the case in all Shopify themes. So the theme should be flexible enough theoretically to work on any store with any data coming through, okay? And with that in mind, what I've done is I've committed all my work to this GitHub repo here just in case you guys want to access the final theme code of where I ended up. This is available at my GitHub account of Christopher Dodd, the address you can find here if you need the direct link. If you were to create this theme as a theme that you wanted to sell on the theme store, for instance, that should work on any theme, you need to test this out on different stores and see how it works. In this video, we were building specific to this particular store Sans marcher powder store. And so the choice is up to you how flexible you want to make the theme. I used to work for a company, for example, that had no section data whatsoever. You would come into the online store editor, and there would be no sections at all. It would just be code. And so, of course, you can do that, as well, or you can make it highly customizable so that someone could use this theme without writing any code and still be able to customize it as much as they need. Yeah, I just wanted to create this extra video to give you access to the final theme code that I landed on. This is definitely not the end. You can come in here, branch off of this theme code, and use Claude code or whatever AI agent you like to then iterate off this, improve it, and build it to your requirements. And that's the best part of this whole process. We're using the same standard development process as is done in the real world. We're just using AI to help plan and automate a lot of the basic work. So with that being said, I will see you in the conclusion. 11. Conclusion & Class Project: This concludes this class on AI automated Shopify Web Design. For your class project, I encourage you to create the web design for your Shopify store Figma using the techniques we covered in this class, laying out the plan for your wireframes, using the store planner, and then building out the high-fidelity mockups in Figma. When you've completed your design, upload it to the class project section to share your work with other students or to get feedback from me. If you enjoyed this class, make sure to leave a positive review and be sure to check out some of my other classes here on skillshare.com, where I dive deeper into concepts like web development, Shopify, and other modern tools. Thanks as always for watching, and I'll see you on the next one.