Transcript
00:00:00Setting up Shopify stores has been easier than ever because now you just combine it with the
00:00:04AI agents you use to code and let them handle everything. But just hooking Claude code up to
00:00:09your store isn't enough on its own. To actually end up with a shop that doesn't look generic like
00:00:14every other Shopify store out there, you need to combine it with a few key pieces in your setup.
00:00:19By the end of this video, you will know the entire workflow that you can use to set up your own
00:00:23Shopify pipeline end-to-end so that you can start selling your products right away.
00:00:28You need to follow a few steps in order to prepare for building your store. The first
00:00:32thing you need is a Shopify partner account, so you go to the browser and sign up. The partner
00:00:37account matters because it gives you access to development tools that let you experiment with
00:00:41the platform. It is basically a sandbox for your stores, where you can build your app the way you
00:00:46normally would, while also exposing development tools like fake payments and test users so you
00:00:51can test the app before it goes live. And later on, if you think your app is in a ready state to start
00:00:56selling, you just have to add payment integrations and you can easily move the development account to the
00:01:01merchant account where you can start selling real products to real people.
00:01:05Now once you have created the app in the project, it is time to install the Shopify CLI. You can do this by
00:01:10copying the install command from the CLI docs and running it in the terminal. Once you run it, you
00:01:15will be prompted to select between a React app or an extension app. We chose the React app because that
00:01:20is what we mostly develop in and it is easier to customize the app that way. After that, you can choose the
00:01:26language you want to use and we picked TypeScript because of its type safety and security features as
00:01:31compared to JavaScript. Once you have run through this setup, it will install all the dependencies needed to
00:01:37run the app. After the dependencies are in, the project will be ready and when you run it, you will
00:01:41see a basic template of the app from where you can start making further changes. So once the CLI has
00:01:46been installed, there are other things you need to install, starting with the Shopify AI toolkit which
00:01:51adds on to the building process. The most important part of it is the MCP and the install command for this
00:01:56MCP for all AI coding agents can be found in the docs. Since we were using Claude code, we copied the command
00:02:03for Claude and installed the MCP and you can do the same with any coding tool of your choice. Once the MCP
00:02:08is installed, it exposes its tools to Claude, but the MCP alone is not enough because all the tools in it
00:02:14are basically there to help Claude build better. The MCP has no way to push changes to your store running
00:02:19in the cloud. It just contains docs and knowledge about the Shopify API along with other validations. So
00:02:25this setup was not enough for building on its own. And that is why the CLI matters because it is
00:02:30actually the bridge between the Shopify app and the local setup. Aside from the MCP, you also need to
00:02:35install the plugin. The plugin matters because it contains multiple agents and skills bundled together.
00:02:40You can install it by following the install commands. After running the installation commands,
00:02:44run the reload plugins command and all the agents and skills will be ready to use.
00:02:49Now the main setup is done, but before you actually start building, you need to prepare the project
00:02:53itself. The first thing to set up is the Claude.md file, which is basically the file for guiding the
00:02:59agent on the practices you want it to follow. The Claude.md we added contains all of the best practices that
00:03:05we always talk about. We have a dedicated full video on this where we walk through the best practices for
00:03:10the Claude.md file, which you can check out on the channel. Aside from Claude.md, you need some other
00:03:15things in place as well. By default, Claude generates SVGs and uses them as placeholders for images. But
00:03:21these SVGs won't do for our shop's visuals, so we created a skill to cover the gap. We created a
00:03:26Gemini image generation skill, which lets whichever agent you install it in call the Gemini CLI and
00:03:32prompt it to generate images for the website. The skill contains instructions on how to call the Gemini CLI
00:03:38and where to save the generated images. And because Gemini CLI has image generation integrated, there is
00:03:44no need for a separate API key, so you can use this skill directly just by relying on Gemini CLI
00:03:50authentication. Aside from image generation, we also built another skill for our own ease. The prototype
00:03:55skill works in a way that whenever you ask the agent for a design change, it first creates an HTML file
00:04:01that you can preview, and once you have previewed it, it applies that change to the app's design. The
00:04:05skill.md file contains details about the whole workflow divided into two phases. Once these skills are in
00:04:11place, there are some hooks that you also configure and connect in the settings.json inside the .claud
00:04:17folder. These hooks basically act as guardrails for Claude. For example, the pre-tool used script can
00:04:22stop Claude before it pushes changes directly onto the app without your approval. You can configure as many
00:04:28hooks as you want. So with this setup in place, we were ready to actually build the app. But before we move
00:04:33forwards, let's have a word by our sponsor, Willow Voice. If you spend most of your day typing emails,
00:04:37slack messages, docs, and prompts, you're working way slower than you need to. Willow Voice lets you
00:04:42speak instead of type anywhere on your computer, and the text appears instantly. It's not like your
00:04:47built-in dictation that gets every other word wrong. Willow is three times more accurate, and it
00:04:52actually formats everything properly with paragraphs and structure. The best part is it adapts to what you're
00:04:57doing formal when you're writing an email, casual when you're on Slack, and technical when you're in code.
00:05:02It learns how you write over time so the output sounds like you, not a robot. Over 100,000 professionals
00:05:07use it daily, and it's SOC2 certified with HIPAA compliance and zero data retention, so your words
00:05:13stay private. I've been using it for the past week, and going back to typing feels painfully slow now.
00:05:18Download Willow Voice free using the link in the description. Now once this is in place, you can
00:05:23just prompt Claude on what you want to build. You need to describe the landing page you want,
00:05:27just like how we mentioned the style we wanted the landing page to follow. And because we had
00:05:31configured the skill, it loaded the prototype skill first. So instead of making the changes directly on
00:05:36the actual app, it wrote HTML code in which it finalized the design, and then waited for our approval.
00:05:41It also opened the design in a new tab so that we could preview it. The first version it built
00:05:46looked clean and worked well visually, but it used placeholder sections on the landing page where the
00:05:51images should have gone. Since we had installed the image generation skill, it should have loaded
00:05:55that directly and used image generation in the first place. So we prompted it again to use the image
00:06:00generation skill and actually generate images for those placeholder sections. After we gave that prompt,
00:06:05it launched multiple Gemini CLIs through the bash tool and opened them in YOLO mode so that the Gemini CLI
00:06:12would not be blocked by any permission prompt. Claude launched multiple terminals and all of them
00:06:17started generating images in parallel. Image generation takes a longer time, so you have to wait for it to
00:06:22finish. Once the images were ready, you can check the website and it will look much more polished. And
00:06:27since the image generation prompts were also controlled by Claude, the images matched the UI style very well.
00:06:33Now with the visuals added in, the website was complete. You can iterate over the design at this
00:06:38point. Since we had no more changes to make, we asked Claude to proceed and implement the app in the store.
00:06:43It will ask you a few questions related to how you want the app to be implemented, like whether you
00:06:48want it synced with the live store or not, which we did, so we chose that option. Once you answer its
00:06:53questions, it proceeded to convert the HTML design into the app itself, not directly to the main app,
00:06:58but to the development app we had created. It mimicked the design one-to-one and you can preview the app
00:07:03yourself to see that it has completely mimicked the design. Now, it was a good thing that we used the HTML
00:07:08preview before actually implementing it in the app because this process takes a lot of time. And if you
00:07:13were iterating on the design using this process, it would have wasted a lot of time and tokens. HTML
00:07:18prototyping was much faster and easier to iterate with. Also, if you are enjoying our content, consider
00:07:23pressing the hype button because it helps us create more content like this and reach out to more people.
00:07:28Up to this point, the app is in sync to the actual store URL. The design you just built is on the local
00:07:34server for preview on the local machine and it also sits inside the theme preview, which is where it
00:07:39basically shipped the theme to the development app so we can live preview it. It is not the final version,
00:07:44it is just a draft. So we simply told it to sync the live and it used the Shopify CLI and the MCP
00:07:50tools to sync the design to the main URL configured for the Shopify store. And after this,
00:07:55Claude will have updated the design live on your app. Now, similarly, you can ask it to update all of the
00:08:00other pages on your website and it will follow the same process. It will first prototype the sections,
00:08:05then update them in the actual app and then sync them to the hosted store. But there are a few things
00:08:10you will still need to do to your store to make it ready. At this point, you won't be able to add
00:08:14products because updating the products and making them ready for implementation requires the Shopify admin
00:08:20API. It cannot be done without the admin API because this is what gives you access to the main parts of
00:08:25the store like the about page products and other management features. Up to now, we were just
00:08:30making changes to the theme and applying that theme to the store itself for visuals. In order to connect
00:08:35the admin API, you need to authenticate it with the store using the Shopify CLI. Once you enter the
00:08:41authentication command with your auth link, it will open the browser from where you can authenticate. After
00:08:46that, you will be able to create store related pages and it will use the Shopify MCP and the CLI tool
00:08:52together to update the other sections of the page. Now, you can tell it to add in other products to
00:08:56your store so that you can start selling. But for adding products, you need to configure the permissions
00:09:01for the Shopify store so that it can access the tools via the admin API. Adding products needs more
00:09:06permissions than the ones we gave previously. We had only added the right content permission, but for adding
00:09:11products, we need additional permissions like writing products and reading and writing publications.
00:09:16So, you need to run the auth command again but with added permissions. Once that is done,
00:09:20you can ask Claude to add products to your site. And once it does, you can check out the app and see
00:09:25the products listed there along with the store being ready with product details and cart features and
00:09:30can also check the products in the admin panel. But whoever visits your store still won't be able to make
00:09:35purchases at this point. For the store to actually be ready to sell products, you need to add payment
00:09:40details so that payments can be processed. You would also need to select a plan because unless you do so,
00:09:45whoever visits your store will need to enter a password to view it, which is obviously not feasible. So,
00:09:51once you have selected your plan, you will be able to start selling your products. Now, the whole setup
00:09:55guide and all the skills created here can be found in AI Labs Pro for this video and for all our previous
00:10:02videos from where you can download and use it for your own projects. If you found value in what we do
00:10:07and want to support the channel, this is the best way to do it. The link's in the description.
00:10:11That brings us to the end of this video. If you'd like to support the channel and help us keep making
00:10:16videos like this, you can do so by using the super thanks button below. As always,
00:10:20thank you for watching and i'll see you in the next one
Community Posts
No posts yet. Be the first to write about this video!
Write about this video