Getting started with Shopify theme development (from scratch / complete guide)
Вставка
- Опубліковано 27 вер 2024
- In this video you'll learn how to create custom Shopify themes completely from scratch. We'll make use of theme kit to sync our files with Shopify.
Shopify Partners - www.shopify.co...
Theme kit:- shopify.dev/th...
Product CSV - github.com/sho...
Theme architecture - shopify.dev/th...
Liquid Objects: - shopify.dev/ap...
Like and subscribe!
Thank you for this man, I watched more than 40 hours of videos on Shopify and no one talked about this liquid api page you are referencing for doing everything. This page seems to have everything I wanted to know. Thank you for great tutorial. You are a great teacher.
It is needed to note that the "Theme Kit Access" app name was changed to just "Theme Kit", still just at the start of the tutorial but thank you for this!
Actually I think it's "Theme Access" right?
@@joshuasalcido9025 Yes, you are right.
Its actually better than most of the paid courses. I already knew about HTML, CSS and Template languages so picking this up was not a big deal for me. I just needed the guide of how to get started and this tutorial does just that stuff. No time waste on CSS or anything like that. Thanks man!
Bro can I contact with you
@@sifatcreator1175 Can I help you?
To the point, no fluff, thorough and easy to understand. I seriously wish more guides were this good. Thank you man!
Robby this video is the best ive seen covering shopify, im 35 mins in and I love the way you've gone through each tamplate skiping the CSS, only focusing on the most important parts and worrying about the looks later is so valuable. Great video!
Your video is 🔥! Thank you, for covering Shopify development. I've seen others try teach liquid and the platform inside out and it made things even more confusing. However your approach was straight on with getting started and being able to jump straight into things!
We need a complete course on this. Creating a good looking theme would be nice
This is the best beginner Shopify theme tutorial I’ve seen. I mean that. Thank you!
Robbin, You performed admirably. Bravo to you. As a novice, I learned the basic about theme creation from you in a brief period of time.
Thank you for this video. I saw many tutorial and course on UA-cam and Udemy but your are the one who tells everything about Shopify in very one smallest video with accuracy.
Thanks for this simple tutorial! I especially like how you look at the documentation as you're explaining to us. It has a 'teach us how to fish' feel, instead of just showing us the least steps to get to make a theme.
I just bought some Udemy courses, that were awful. This video was CONCISE to what I needed to know. Thank you so much.
Thank you Robby. This is the exact liquid course that I was looking for. I could understand how to set up environment for liquid on local computer and sync it with shopify editer and how to deal with it from the scratch. Excellent!!
I know I wrote a message 2 weeks ago from what I can see lol. But I had to leave another comment. I just finished your video and want to thank you so much for making this amazing content!!! First, I'm blown away by how fast you created all that html and liquid code and how smooth it is in a jampacked 1-hour video. I learned so much throughout the video, but from watching it I feel completely confident and comfortable giving it a shot on creating my own Shopify frontend Store! Thank you, again robby I really appreciate it.
Brilliant video Robby, you focus on the main concepts and i feel little time was wasted. Most informative video I've watch in a while! Looking forward to applying the skills you teach.
This is one the best videos I have seen on shopify that describes in a simplest way. I cant tell you how much it help me to learn and understand the basics. At first glance of shopify I was scared but after watching this, I loved the shopify environment. Thank you so much for your great work. ❤
I haven’t even watched the whole video but I already see that this is what I’ve been looking for. 🔥 Thanks
Hey Robby! I was looking at the code that comes with the DAWN 2.0 theme. I wanted to know if there was code in there that I actually need for my website or if I am safe if I leave things out. I was confused looking at it so I am hoping I don't need it. haha
Also, do you hop on video calls to help people out? Cause at this point I think I am ready for help.
Awesome. A full guide, no time waste on design or CSS stuff. Solid foundation. Loved it, man. Looking for the Shopify App development tutorial too.
I was looking for such video for last many days and finally i found you, its straight and explained in a better way, very easy for anyone to start with. thanks a ton for such super easy explanation video.
Thank you for blasting through this. There was no time wasted in this walkthrough. "That's pretty cool!"
Thanks man, this video is what I was looking for.. straight to the point, no bs-ing around
Really cool that you care about time of the someone who watches the tutorial. Thanks for materials
Amazing tutorial, loving it. But I'm so sad to see that this video has less views and your channel is under rated :( I'm praying one day you will cross millions videos and subscribers. Best wishes.
Thanks Robby,this is one of the best video on shopify.
Best video about Shopify ever .. It makes you understand all the structure .. Love it!
Exactly what I am looking for in shopify tutorial! Good job! Though I would say this is not for the real beginner. It aasumes you already know Liquid.
Robby this video was awesome! Thanks so much for putting in the time to create this video
Just so helpful! You gave me the confidence to jump into customizing shopify with the sections everywhere stuff. Thanks
This was sooooo helpful! And just in 1 hour, I understood how to build a custom shopify theme. Thank you!!!
Thanks very much for this thorough and easy-to-follow tutorial - massively helpful!
This has been ridiculously informative. Thank you for putting it together.
weird thing: when I want to run "theme configure" it says bash: theme: command not found :)
0:43 Installing Theme Kit & Other Tools
3:06 Starting With the Theme Folder
3:51 Theme Liquid & Uploading zip file
5:06 Connection with the Developement Store
6:06 Theme Watching command
6:26 Start Creating the necessary files
13:10 Header Section
16:33 Home page Collection
21:40 Product Template
25:36 Cart Template
33:26 Page Template
37:09 404 Page
37:46 Blog Page
50:00 Gift Card Page
53:42 List Collection Page
56:35 Search
Thanks
no mix-max staright to tha point. Enjoyed so much. Lots of thanks
Absolutely fantastic video, this really did teach me the basics needed to get started. Thank you!
This is so cool! How can I learn more and how to improve my html, css, java script skills? Which website etc. Im using sololearn for now, I am just starting learning web development and I want to specialize in Shopify . Thank you!
this might be a little late but freecodecamp has a decent webdev course thats free and they go into depth on all the basics and fundementals as well as more complex problems. Its were i learned the foundation for my webdev experience. however if you want to learn more i reccomend you to just start building and learn as you go. pro tip is to start small but aim big and little by little you will grow your knowledge and hone your skills and also dont try to learn everything just stick to what you are familiar with and dont get distracted
Hey... I'm using windows 10 it says no theme found ( theme configure -s) in in cmd
same
This is only one english tutorial, I understand fully. Thank you so much Robby, for youre easy and effective tutorial. I subscribed you're chanel. I'll continue you're video must be. Again Thanks
Best Of Luck. 🎉
[API] Invalid API key or access token (unrecognized login or wrong password) :(
I have the same error. Did you find the solution?
I ran my terminal as admin, I then noticed there was theme update needed, I ran 'theme update' and then tried again, it worked
@@humbertocueva3815 Did you find the solution?
Thank you for your tutorial. It's really clear and thorough.
Hey Robby, thanks for this cool tutorial. But i think i found a little mistake. Until 1:13:22 there is only "header.liquid" in the "sections" folder. But then, from 1:14:06, there is an additional file "featured-product.liquid" in this folder. But there is no explanation how this file is created and what is it used for.
How much of this content is still aligned with the current version and install docs for shopify custom storefronts? Would you consider doing this again with the latest version?
It’s all still relevant just make sure to use sections everywhere (covered towards the end). I also recommend my dedicated video on sections: ua-cam.com/video/DhvllxGMg4E/v-deo.htmlsi=O5xWxh2Xz3JX2oXo
I'm getting this error in command prompt
'theme' is not recognized as an internal or external command,
operable program or batch file.
Good tutorial learns a lot from single videos Thanks, Sir Robby.
Thanks! Wonderful but somehow when I go to checkout page it shows me error like below:
Checkout isn't available
Return to the home page or contact the store directly.
Return to HOME PAGE BUTTON.
Great video. Straight to the point!
I had some bug while chaning 404's liquid to json. I couldn't see 404 page in the panel. I had to rename it back to liquid and then again to json to fix it.
why am i getting redirected to cart/add page which doesn't exist instead of cart page like you showed in the tutorial
Hi robby, when I publish my uploaded theme, i get the error message "Role can't be set to main: missing required file layout/theme.liquid". On my local machine im seeing that the folder does include the layout folder with the theme.liquid file that you showed us how to make. Any ideas? Anyone else run into this problem as well?
Can I buy you a coffee? I've been struggling to figure out liquid for work and this is a game changer
Glad I could help! Sure: www.paypal.me/codingwithrobby?locale.x=en_US
Amazing Video, Thank you so much 👏
This was such a great help!
Will I have to create a custom template for each blog post separately if I have to add a multi-row section? For example, if I have 100 blog posts, I want to add multi-row to any 50, do I need to create 50 templates? When we add content to multi-row in customizer, it applies to all templates.
Thank you so much Robby
Amazing content.
Can you please make a video playlist on Shopify app development?
Great video! super useful for someone who is just starting to understand all the structure, do you recommend to use the Dawn theme as a starter to do a fist test shop?
I like to start from scratch personally, but it's up to you. There's tons of great examples inside of the Dawn theme.
I’m learning java now…then kotlin and then js and then I’ll start watch your video 😢
would you recommend starting with hydrogen?
Thank you very much for your good afford Robby. You know this tutorial is little bit old. It would be great if you make this tutorial again using new Shopify CLI. If you make that from the very begging like creating folder and file would be very helpful for who like to write code along with you. Thanks again!
This was excellent, thank you!
Would you recommend we create the site in html and css first and then break it down into the shopify structure? Or it's better to start with the shopify structure? Also can I use sass with shopify?
I would recommend doing it directly on Shopify. This will give you access to partials/logic and make things quicker. Scss files used to work natively on Shopify, but I'm not sure if it's available on new stores anymore (they deprecated it). If you really want to use sass just compile it yourself and have it output to the assets directory.
@@codingwithrobby thanks. I'll keep that in mind. Great tutorial. I'll go over it once I get the design of the store done. 👍
Best video on how to build a Shopify theme
Thank you Robby.. I have created my store by following your tutorial... "Add Section" button not visible while customize the custom theme ... pls help
I cannot find 'Theme Kit Access', is that only for paid accounts? I have been on your video for days. Not getting anywhere.
Nah it's for everyone. Here you go: apps.shopify.com/theme-access
@@codingwithrobby Thanks. They changed the name, so that is one reason I was lost. I may have another question in the near future. Thanks for replying.
At 27:25, why do you double dot as item..title?
Hope you can make a video for creating a theme from scratch to deployment like with design and stuff 😁
Hi Robby , url_to_remove clears the whole cart what should we do
Nice Man! Very Helpful.
Hi Robby. I have noticed that there are more template pages than you have listed. I assume that they will all have to be added, no?
What a wonderful video!
your video is aweosome but i am facing problem with terminal which you used kindly tell me
Can you make a tutorial about Shopify bundle? The docs are not clearly enough to me. Just giving you a video idea
good video for people that are just starting out, great for motivation but keep in mind that this is just the tip of the iceberg fellas, if you want to create a theme, you've got your work cut out for ya!
are you up to the challenge?! 😁
Hey Robby, thank you for this video, it was incredibly helpful. One question, which might be a stupid one, is there a way for me to edit the code of specific pages through theme kit, or any method without using the Shopify page editor?
Hey do you have a video for how to convert shopify theme into woo commerce and open cart theme
Thank you. You are my hero.
Shopify introduced a new way of managing custom CSS in February 2023.
hi guys, I want to ask that what is the purpose of the filter like "stylesheet_tag" or "script_tag" when linking the theme.liquid file?
Hi Robby, it is still valid in 2023 (almost 2024)? Thanks in advance
Hi, when I create the header.liquid file inside the snippets folder, I get this error "Unused snippet problem". Anyone can help? Thanks
Need help around 12:39 the images was not updated on the live preview even I did theme watch. How come?
Thank you has everything I need
Thanks man, it was extremely helpful to get a head around liquid
the settings for colors code doesn't work when I followed it.
You are amazing.Thank you so much .
This course covers all the backend functionality?
Hey Robby, @31:05 when putting in the quanaity It will not add the quananity, It will go back to the default which is 1. What am I doing wrong?
how to you enable autocomplete for html in your .liquid file?
It’s the Shopify extension for vscode
Where did the featured product section come from?
"Hello,
I'm new to Shopify development and would appreciate some guidance on creating a theme from scratch in Shopify. Can someone provide assistance or insights on the role of Shopify CLI and Theme Kit access?
Anyone else have a problem when connecting the stylesheet. MIME type error. Super annoying have no clue how to deal with it
because this first video, i get my first gigs on fiver
also i'm using tailwind for css
Hi Robby, Just a quick one, how can one download or get the file creating terminal(MINGw64) Thanks.
Any example of Shopify for selling digital services online?
i am very inspired and please give me link of next part of vedio
Amazing tutorial 🚀
🎯 Key Takeaways for quick navigation:
00:00 *🛠️ Shopify theme development is explained thoroughly in the video, offering a comprehensive guide from front to back.*
01:00 *📦 Setting up Shopify involves downloading Shopify Theme Kit, joining the Shopify Partner Program, creating a development store, and importing sample products.*
02:55 *🛠️ Installing a Liquid extension in VS Code facilitates Shopify theme development.*
03:09 *📁 Shopify themes are structured with seven main folders: assets, templates, snippets, sections, config, and layout.*
06:13 *🔗 Themekit is used to sync theme changes with Shopify; it requires setting up configuration files and using specific commands like `theme watch`.*
13:22 *🖼️ Snippets like headers can be created and rendered on Shopify pages to maintain consistency.*
16:37 *📄 Displaying collections on Shopify pages involves accessing collection data and rendering it using Liquid tags.*
19:18 *🔄 Liquid filters can be applied to manipulate data, such as formatting images and prices, ensuring proper display on Shopify pages.*
21:11 *🔗 Products can be linked to their respective pages using Liquid tags for URLs, ensuring seamless navigation on Shopify.*
22:14 *🛠️ When uncertain about available properties in Shopify theme development, refer to documentation for a comprehensive list.*
23:34 *🛒 Shopify allows for products with multiple variants like colors or sizes, each represented by options.*
24:32 *🔄 Correct syntax errors in code by ensuring proper loop declarations and variable assignments.*
25:01 *➕ Implement an "Add to Cart" button within a Shopify form to add products to the cart.*
26:26 *🛍️ Customize the appearance of the cart page by accessing Shopify's cart object and iterating through cart items.*
28:31 *🛒 Ensure proper parameter passing between Shopify templates, such as passing the cart object to the cart form.*
29:57 *📦 Enable functionality to update cart item quantities and remove items from the cart.*
31:29 *🛒 Implement conditional rendering in the cart template to display a message when the cart is empty.*
33:37 *📄 Utilize Shopify's page object to create and manage website pages, including navigation integration.*
35:33 *✉️ Create a custom contact form on a Shopify page using HTML input elements and proper naming conventions.*
38:37 *📰 Utilize Shopify's built-in blogging functionality to create and display blog posts on a website.*
42:35 *💬 Enable and customize comment functionality for blog articles using Shopify's comment object and form tags.*
46:05 *📦 Access and display products within a collection using Shopify's collection object and product iteration.*
46:40 *🛠️ Use partials in Shopify theme development to render reusable components efficiently.*
48:03 *📄 Pagination in Shopify collections allows for better organization and navigation of products, enhancing user experience.*
49:21 *🔄 Implement sorting options in Shopify collections using JavaScript to enhance user control over product display.*
50:32 *🎁 Customize Shopify gift card templates to include unique features such as QR codes and balance display.*
53:48 *📚 Create a list collections page in Shopify to display all collections, enabling users to easily explore product categories.*
56:33 *⚙️ Utilize the config folder in Shopify theme development to define global theme settings, such as color schemes and toggles.*
57:33 *🌐 Utilize the locales folder in Shopify to enable multi-language support by providing translations for various theme elements.*
01:09:11 *🖼️ Implement Shopify sections to allow users to customize their theme layouts without coding knowledge, enhancing flexibility and personalization.*
01:10:44 *🎨 Create sections with customizable settings in Shopify themes to allow users to personalize their website layouts and styles.*
01:11:51 *📝 Include CSS and JavaScript directly within Shopify sections to streamline loading and enhance performance.*
01:12:56 *💡 Access section settings in Shopify to dynamically apply user-defined configurations to section elements.*
01:13:30 *🛠️ Customize Shopify sections with inline styles to incorporate dynamic user settings efficiently.*
01:14:13 *🔄 Enable Shopify sections on different pages by converting page templates to JSON format and defining section inclusion within the JSON structure.*
Made with HARPA AI
nice tutorial..lets make a full theme with designs and all what say bro...make a video on this or live session on YT
Does it still profitable to design your custom theme and relese it to shopify theme store? Some people say yes some of say no. I am confused a little bit.
Hey how to download that csv apparel file ?
This Theme Kit Access app is nothing but problems for me. I have wasted time for 3 different days now. Something with Chocolatey now. Should I just buy a Mac? Windows installs are terrible sometimes.