How to Set Up a Local Theme Development Workflow
Вставка
- Опубліковано 23 лип 2024
- In this video, Liam will show you how to set up a local theme development workflow, using Theme Kit, which allows you to edit theme files on your local machine and push changes up to a live store. He’ll walk you through how to:
- install the Theme Kit
- connect it to a live Shopify store
- push changes
- setup ignore rules
More info on Theme Kit on the GitHub page: bit.ly/3js0AEy
More info on working with themes on our developer documentation: bit.ly/32HKGAf
Note: When setting up Theme Kit, you'll need to create a private app. You can enable the private app development setting from the “Manage private apps” page in admin. Only the store owner can enable private app development.
Contents:
0:00 Introduction
3:55 Installing Theme Kit
6:20 Connecting a store to Theme Kit
15:30 Editing a theme locally and pushing changes
19:40 Creating ignore rules
--------------------------------
Subscribe to our channel for more videos about developing and designing ecommerce stores, apps, and themes with Shopify » / shopifydevs
Looking for more information about developing on Shopify check out www.developers.shopify.com and shopify.dev/
Connect with us on Twitter » shopifydevs
Launch your own online store by visiting Shopify and starting your free trial » bit.ly/VisitShopify - Наука та технологія
just want to say Liam you are always the contributor to any posts I'm using re: Shopify so thanks for the support over the literal YEARS to the dev community!
Thank you Liam. Really helpful video and very easy to follow. :)
Thanks for the video, friend!
I would love to see more videos about configuring the IDE to work with more effectively with shopify's unique syntax and language injection!
Great video thanks! Helpful to include some of the potential gotchas like files to ignore to not override settings.
Thank you! Great tutorial 👍
You're a great tutor, thank you!
Excellent tutorial! Thanks!
Glad to hear it was helpful Will!
Very Informative :)
Thanx Ian. Great video 📹
I'm more and more interested in shopify development. I'm really looking forward to be part of the developers community.
@@shopifydevs Thanks a lot Liam and yes there is a lot I want to know .. apologies..besides my age.. I am a newbie . I am much interested in how to use CSS grid in
a context of a loop for example :
{% for product in collections.staff-picks.products limit:4 %}
{{ product.title }}
{{ product.price | money }}
{% unless product.available %}sold out{% endunless %}
{% endfor %}
then I would use class prods as an item in a css grid
Sorry , not sure how to do that .
I just paste the code for the sake of an example .
Something on how to use a css grid in shopify would be wonderful!!!
Thanx again and have a nice day Liam ! Cheers to the dev team in shopify ! Wonderful job !
@@jeffb6291 Not fully sure on this exact example of grid within a loop, but it is possible to implement CSS Grid, we have two great blog posts that cover that here: www.shopify.ie/partners/blog/css-grid and here: www.shopify.ie/partners/blog/css-grid-framework
@@liamgriffin6897 That is great Liam
I think I really can go from there.
Excellent articles and well detailed
Many many thanks 🙏🙏👍👍👍👏🏼👏🏼 hope someday I can pay you a coffee ☕
Thanks for the tips! I learned about the ignore_files property. Also, I finally installed the liquid and shopify extensions. It's nice to have the syntax highlighting =)
I was wondering if you could make a video or if there's already docs on this on how to increment the quantity on a product in the cart and simultaneously update the price without clicking update button.
Great suggestion for a video Joel - it's on the list! In the meantime, I'm thinking it would involve Ajax: shopify.dev/tutorials/develop-theme-ajax-api-using-jquery
This is great as im just getting into theme development for shopify. Would love to see more videos like this!
Hey Joshua, awesome to see you here as well!
Hope you´re doing great :-)
Jan! Good to see you here too! Hope all is well with you as well, can’t wait for new videos :)
Take care!
thank you for this tutorial. is there a way to see the changes immediately on localhost? I tried to setup the proxy configuration inside config.yml but it doesn't seem to owkr.
I want to make a REST call from the Shopify frontend to my Spring Boot application on any button click in liquid. How can I do so?
thanks a lot, clear and well paced tutorial. only thing I had problems with was: 1. the windows theme kit line commands ( no abbrevastions like -p -s -t but complete --password --store --themeid ) 2. On Windows, you must use a backslash (\) as the path separator, when configuring the ! config.ylm file to ignore files: path config\settings_data.json 3. finally on command "theme watch --allow-live" to be able to make changes, don't forget to place watch and not only "theme --allow-live"
thanks for " config.ylm file to ignore files: path config\settings_data.json"
How i can see a correct higlights and autocomlit like emmet for .js.liquid
I'm just kind of confused on the private app part. Don't you want it to be public so it can be published to the theme store?
Hi, do you know if there is a way using themekit login to redirect to another browser? Like my default is Waterfox but I always use chrome for shopify work.
Thank you, I noticed that the API is not working anymore, and you need the Admin token in order for this to work
Hi I am getting the following error while downloading the files from my store. PLEASE HELPP!!!!:
[development] 117 files, Downloaded: 117, Errored: 117
[development] Errors encountered:
[development] error downloading templates/search.json.liquid: could not unmarshal JSON from response body
This usually means Theme Kit received an HTML error page.
Http Response Status: 401
How can you add external links to your Shopify website? Please please please make a video
Shopifys documentation says: "Shopify CLI replaces Theme Kit for most Shopify theme development tasks." So maybe you should do a new version of this video-series, since this is outdated...
Hey I've got that T-Shirt :)
Will this work with thinkific? They use liquid also
Hi awesome, a quick question:
1: Is there a way for me to actually first fully work on my local (ie to see my theme on local do my work test everything and then push to live)
2: When we get a theme or download a theme it has sass files is there a grunt/gulp way for us to be able to edit it or we need to use name.sass.liquid file to add our new custom styling?
Hi there Robin! Thanks for your questions- hopefully I can help you figure these out.
1. Because a theme doesn't contain any store data, and Shopify is a hosted platform, it's not possible to have a fully local store. The best option here might be to set up a cloned development environment that you can push changes to, for testing and then when you're happy you can push those changes to the production store.
2. You can use Gulp to manage your SASS files, here's an example of how this could work: www.codeshopify.com/blog_posts/using-gulp-for-sass-compilation-allows-for-sass-partials-with-liquid-tags
Hope this helps!
@@liamgriffin6897 Thank you that's helpful
is this still relevant? cause I know it is suggested to use shopify cli 3
Hi Liam, what are the requirements before I can run this setup? Do I need to install packages for the shopify? thanks :)
Hi there Lloyd! When installing for Mac the only dependancies are homebrew, and when installing for Windows, you'll need chocolatey. Full info here: shopify.github.io/themekit/#installation
How can I develop theme from Scratch because Shopify does not provide support to slate theme.
So what can I do now for theme development.
Hi there Sreyas! We have some advice here on building themes from scratch: www.shopify.ie/partners/blog/78118150-4-essential-tips-for-building-your-first-shopify-theme
As you mentioned, Slate is no longer supported, but it's still possible to use Slate's starter themes as a blueprint for your own builds: github.com/Shopify/starter-theme
Which files or patterns would you recommend adding to git ignore when saving theme to a version control repository?
Great question Evaldas- the `settings_data.json` would be the most important file to ignore, but depending on how your client/team is working, there could be other files you want to ignore, like `settings_schema.json`, or files within the /assets directory.
@@liamgriffin6897 I see, thanks. If there's ever a video about such things, I'd definitely like to hear more about version control in theme development. For example, how to determine if any theme files managed by apps should be version controlled. Also, how to design any sections or snippets required by the app in such a way that it plays well with version controlled themes. :)
@@evaldasraisutis3058 Keep your eyes out for a forthcoming video on this :)
Hi, I am a Javascript full stack developer. Is there a workflow for guys who use react + node.js to build a Shopify theme or app? thanks
There sure is Gavin, we have a great guide here that runs through how to build an app with node & react: shopify.dev/tutorials/build-a-shopify-app-with-node-and-react Also, keep an eye out for an upcoming video in this series that looks at this workflow too.
Im running into a problem after the command theme watch. The development shows in red and im being instructed to add --allow-live flag which doesnt work for me. It returns zsh command not found
ANy fix for this?
The required flags is a feature of a new version of Theme Kit, to protect against making changes to live stores. However --allow-live should let you by pass this. Can you check which version of Theme Kit you are running with `theme version`?
thanks i figured out why it wasnt workking for me in the command line.
@@Aborichinal How did you get over this problem as i am experience the sam error. thank you.
Now the password isn't there for the API? They've changed the layout? What do we do now?
The links are outdated
My installation stuck on 96%. I have tried two times. Please check screenshot. prntscr.com/udwqxt Please suggest if you have solution for this problem