![]() Your theme will usually have a (or style.css) file that controls the styles for the theme. When the site loads fine, you know the bug is in the commented section, so you can check there instead of reading the whole CSS file. Debug by commenting out sections of code then save and preview.Use CSS lint to paste your CSS and test for errors.If you can’t locate the error, you have a couple options: If you you made recent change that triggered the jumble, just go back and reread to make sure there are no typos, like if you forgot a semicolon. ![]() If there are errors in your CSS, the minified file could break your layout so you’ll have to fix those. This technique works great if your CSS files are clean. Typically CSS files are pretty small, so you won’t notice a significant change in load speed, but with each incremental improvement to performance optimization, you collectively make your site faster, and Google likes that. The output after – you have compressed code like this: The output before – you have organized code how it looks in your editor: Now that CSS file will get served up as a smaller file and save page weight.įile name change in the load command (in theme.liquid):.Like magic, Shopify will compress your file on their server before serving it up.Using the same example, you’d change “ebay-styles.css” to “”.This command is usually in theme.liquid, most likely in the “head” section. In this example, you would click ebay-styles.css, then rename it to.scss.liquid files are already minified.įilename. If they’re 3rd party, you don’t have control over them and will have to ask the app developer to minify (more on that later).įilename. If you see a suggestion with a file that has the file is usually coming from your theme (in the Assets folder). You can do a quick analysis with GTmetrix to spot any unminified files. I usually mark mine with a version number, date, and summary of the change. From there you can Duplicate, Preview, etc. If you haven’t done that work flow before, all you need to do is go to Online Stores > Themes, then next to your theme there’s an Action button. Work on the duplicate theme, then when you’re done editing Preview it, then if all is good you can publish that. If you’re not comfortable working with code and prefer to use an app instead, our app File Optimizer is the easiest way to minify CSS, JavaScript, and Liquid files.įirst, any time you make a change to your theme you should duplicate it just to be safe. No worries, Shopify has a technique that compresses your human readable CSS files into minified files on the server. ![]() You want to compress your files, but you also want them to be readable so you can edit and make updates. When your files are lighter they transfer faster, which helps your site load faster. Minification compresses the text by removing extra characters like spaces and comments, and combining common styles. In Shopify, you’ll find CSS files in your theme Assets folder. CSS (Cascade Styling Sheets) are files that control the style of your website by connecting style properties to html elements.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |