zip the theme and upload it, you’ll find that the styles/ directory isn’t included. In Shopify Themes, any additional top level directories are ignored by both Theme Kit and Shopify servers. Your styles folder is ignored automatically Note: when importing partials, there’s no need to include the _ in your statement. Then the stylesheet into the top of theme.scss. If the stylesheet doesn’t have any Liquid objects, you can simply copy the stylesheet file into vendor/, and rename into a partial with a preceding _, such as _name-of-file.scss. Prepros can’t compile Liquid, thus the compiler will error-out if you try to use a file containing Liquid objects with a. You can do this provided that the existing file doesn’t include any Liquid objects. Importing an existing stylesheet into your SCSS structureĪdditionally, you might want to import an existing stylesheet into your fancy new SCSS folder structure. In the of your markup, add in the following code, after the original stylesheet: To add an additional custom CSS file, simply go into the layout directory, and locate the theme.liquid file. For small tweaks to the existing theme, I suggest adding an additional stylesheet for your changes, or appending changes to the CSS at the bottom of the original CSS file. To customize an existing theme, you’ll need to either add in a new stylesheet or amend an existing one. Link your styles to theme.liquid Using CSS in an existing theme
This ensures that the changes you make directly to a CSS file, whether through Prepros SCSS compilation or direct editing, are tracked and then synced to Shopify’s servers and your store.
The final step with Theme Kit is to run the theme watch command. I’m going to cover two ways of using live reloading with Shopify Themes with regular old CSS files, and with Sass (SCSS) compilation. To do this you can follow the instructions provided through the Theme Kit tutorial.
#Prepros change sass version media install
Install and connect Theme Kitīefore we get into hooking up live reloading with Prepros, you’ll need to have already set up Theme Kit with the theme you will be working on.
#Prepros change sass version media for free
Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.
Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Grow your business with the Shopify Partner Program
0 kommentar(er)
