How To Install Shopify Theme Kit
No ane likes refreshing their browser every time you lot make a change to HTML, CSS, and JS during development. It takes time, and time is something we all wish we had more of.
In this tutorial we volition accept y'all through integrating Prepros into a Theme Kit development workflow, step-by-step, then you no longer demand to manually reload your browser to see changes. For this tutorial, we'll utilize a few unlike tools: Theme Kit, the command line, a text editor of your selection, and Prepros.
Grow your business concern with the Shopify Partner Program
Whether you offer marketing, customization, or spider web pattern and development services, the Shopify Partner Program will set up you up for success. Bring together for gratuitous and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Sign up
ane. Install and connect Theme Kit
Before we get into hooking up alive reloading with Prepros, yous'll need to have already set upward Theme Kit with the theme you volition be working on. To practice this you can follow the instructions provided through the Theme Kit tutorial. I'm going to cover two ways of using live reloading with Shopify Themes; with regular erstwhile CSS files, and with Sass (SCSS) compilation.
Run theme watch
The final stride with Theme Kit is to run the theme lookout man command. This ensures that the changes yous make directly to a CSS file, whether through Prepros SCSS compilation or direct editing, are tracked and so synced to Shopify's servers and your store.
ii. Link your styles to theme.liquid
Using CSS in an existing theme
To customize an existing theme, you'll need to either add together in a new stylesheet or amend an existing 1. For small tweaks to the existing theme, I advise calculation an boosted stylesheet for your changes, or appending changes to the CSS at the bottom of the original CSS file.
To add an additional custom CSS file, merely go into the layout directory, and locate the theme.liquid file. In the <head> of your markup, add in the following code, afterward the original stylesheet:
{{ 'custom.css' | asset_url | stylesheet_tag }} In the case above, custom.css is the name of the new CSS file you wish to link into your existing theme.
Setting up brand new SCSS files and directories in a theme
For those already familiar with SCSS, this should make some sense. If you lot've never set up a SCSS project before you might want to learn virtually SCSS first.
In the case where you want to ready your ain SCSS structure for a theme with live reloading, I suggest using a similar approach to how we build themes at Shopify. Nosotros use a combination of SMACSS guidelines, and BEM CSS naming conventions. If you're unfamiliar with these concepts, I urge to you read more nigh them; they are bang-up best practices for building scalable systems.
When setting up the SCSS folder structure (the case below is just showing styles), it might look something like this:
|-assets |-theme.css // this is the final compiled CSS consumed by your theme template |-styles |-global |-modules |-settings |-tools |-vendor |-theme.scss // this file compiles into assets/theme.css Where styles/theme.scss compiles to assets/theme.css.
You tin place SCSS partials in the subdirectories of styles/, and @import all the partials into theme.scss. Using the @import directive follows a basic SCSS project setup, and then that yous can easily run across and command the order of all modular styles in a project.
For this tutorial, I've created a _header.scss partial inside the modules directory, and and then used an @import statement in my theme.scss, to link everything together.
We can then adhere the styles past linking to theme.css inside our theme.liquid file, in the <caput>:
{{ 'theme.css' | asset_url | stylesheet_tag }} Importing an existing stylesheet into your SCSS construction
Additionally, you might want to import an existing stylesheet into your fancy new SCSS folder structure. Yous can practise this provided that the existing file doesn't include any Liquid objects. Prepros can't compile Liquid, thus the compiler will error-out if you try to use a file containing Liquid objects with a .liquid extension.
If the stylesheet doesn't have any Liquid objects, you can simply re-create the stylesheet file into vendor/, and rename into a partial with a preceding _, such as _name-of-file.scss. Then @import the stylesheet into the pinnacle of theme.scss.
Notation: when importing partials, at that place's no need to include the _ in your @import statement.
Your styles folder is ignored automatically
In Shopify Themes, whatever additional summit level directories are ignored by both Theme Kit and Shopify servers. Even if you .zip the theme and upload information technology, y'all'll notice that the styles/ directory isn't included.
This is totally fine — merely note that you should make sure to salve the whole theme, with all the working files (ie. your styles/ directory) on Github, or some other course of version control.
iii. Link Prepros to your development shop
Now that we've figured out which files nosotros want to edit (CSS or SCSS), and fix those up, we can now dig into Prepros!
Add your theme as a projection
First, add your theme as a project to Prepros, past just dragging the entire directory into the Prepros app. Alternatively, you lot can click on the + at the bottom left of the Prepros app, to add a projection.
Prepros will create a prepros.config file in your projection directory. This file contains the configuration settings for your project, such as where certain assets become compiled, whether you lot've enabled various settings, and and so on. If you're using Git, y'all may desire to add a rule to your .gitignore, so that yous don't track or commit changes for your Prepros configuration (unless you want to).
Cull which files to watch, and what you want to compile where
By default, Prepros will be watching for changes to any files inside your projection.If you just want to get live reloading working with your CSS file, you lot don't need to do much more configuration.
Nonetheless, if yous've gear up the SCSS folder structure outlined above, you lot'll want to make sure that Prepros knows where to output the compiled styles/theme.scss file.
To alter where the theme.scss file gets output, but click on the file you want to change the output path for, and then select the directory you wish it to output to. By default, it will exist in the aforementioned directory, but for building Shopify Themes we want it to output into the assets/ directory.
Watching Liquid files
Additionally, consider adding .liquid files to the list of file types Prepros will watch. They aren't watched by default, since Prepros doesn't compile Liquid. Even so, because Shopify will render the .liquid files accordingly, we simply need to trigger a live reload when there'due south a change to a Liquid file.
To add together .liquid files to the spotter list, right click on any .liquid file, and select Watch All .liquid Files.
You might also like: An Overview of Liquid: Shopify's Templating Language.
Link live preview to your store url
The side by side step is to fix the url for the alive preview of your shop. This is what links Prepros with your live Shopify store, and gets the live reloading to work. Y'all'll need to do this if y'all want to employ alive reloading with CSS or SCSS.
To do this, become to Settings > Live Preview and prepare Custom Server. Now, simply fill up in the Server Url with your myshopify store url.
Set a delay for alive reloading
Finally, you'll need to set up a delay in Prepros for the live reloading. The reason for the delay is to permit Theme Kit the fourth dimension it needs to notice a change, and sync the changes with Shopify'south servers.
In Settings > Alive Reload you lot accept the choice to ready a delay. I've constitute that when using SCSS, the filibuster needs to be longer than if y'all're reloading directly from changes in the CSS file. The reason for this with SCSS, is that nosotros need ane extra step, the compilation of the SCSS files, so it takes a bit longer.
If you're working directly in a CSS file, the filibuster can probably be effectually 1000ms. If y'all're using SCSS compilation inside Prepros, the filibuster should be at least 1500ms. If y'all notice alive reloading isn't working, increase the delay, it'south most likely that the reload is happening earlier the updated CSS makes it to the Shopify servers.
5. Live preview and make a change!🙌
Now that you've prepare Alive Preview, click on the 
icon to launch it in your default browser. This will be the tab or window that volition automatically reload when a alter is made to your theme.
What's happening nether the hood
So how is all this working together? Allow me explain.
When y'all make a change in your text editor, permit's say in a SCSS partial like _header.scss, the theme.scss file that uses @import as a directive to import the partial, gets compiled past Prepros into theme.css. The compiled theme.css is then updated in the assets folder, again past Prepros.
Once Prepros is finished compiling, it does a alive reload of your browser on the port that it has control over, and you encounter port in the url bar of the live preview provided by Prepros. Simply wait! Nosotros've prepare a delay, so this pauses the triggering of live reload for 1500ms.
Meanwhile, Theme Kit detects the modify to the updated CSS file, and syncs information technology with the Shopify servers.
Our 1500ms filibuster is over now, and the updated CSS is on our Shopify store. Prepros triggers the live reload in the Live Preview, and voila! You have alive reloading with Prepros and Theme Kit!
You lot're on your fashion to faster evolution 🎉
That's it! Live reloading should be working at present. Simply make a way alter or update a template, and look for Prepros to alive reload your browser for you.
Some limitations of Prepros with Shopify
Liquid objects tin can't be rendered inside SCSS files with Prepros
Similar I mentioned earlier, because Prepros doesn't compile Liquid we don't have access to our theme'south settings object. And then you won't exist able to do something similar:
h2 { color: {{ settings.color_primary }} } Source maps
From my explorations, the source maps in Prepros don't seem to work consistently, so debugging can exist a flake hard, especially if y'all have a lot of files. But Prepros volition still tell you when at that place are compilation errors in the log, with a file, or line number error bulletin, all while you piece of work. So I don't think information technology'southward a huge trouble.
Additional benefits of Prepros
At that place are a ton of slap-up tools that come broiled-in with Prepros—feel gratis to read the full listing if you want to learn virtually them all. I want to mention a few that I call back are the most useful for theme developers below:
File Minification
Y'all configure Prepros to automagically minify your compiled CSS for yous, or set a minified version. This is awesome considering it means that you tin improve the operation of your site, only by checking a box.
Prefix Free
Hate writing prefixes? Plough on the Prefix Free pick for compiled files, and never worry well-nigh which CSS properties demand prefixes.
Sass, Less, and Stylus compilation
Shopify doesn't natively back up Less or Stylus, but with Prepros you tin can utilize your favorite CSS preprocessor. Just replace the SCSS files with Less or Stylus extensions and syntax, Prepros will do the compilation, and Theme Kit will alter the updated compiled CSS file to Shopify's servers.
What preprocessors do you lot use?Let u.s.a. know in the comments beneath!
Source: https://www.shopify.com.sg/partners/blog/live-reload-shopify-sass
Posted by: crosslenst1948.blogspot.com
0 Response to "How To Install Shopify Theme Kit"
Post a Comment