Welcome to CodeCrew Infotech
How To Add Custom CSS In Shopify
One of the most strengths of the Shopify platform is the large variety of store themes some are free and some are paid. But sometimes you may need to slightly change the layout or change the colors and many more. For some advanced changes, you will need to edit the CSS file of the theme. You can also use custom CSS to edit the design of the third-party apps installed on your store.
Sometimes you don't need to change CSS provided by themes just used the built-in theme, but changing or editing CSS is one of the best skills for any developer. as an experienced developer you can change CSS directly in the theme file but if you don't have detailed knowledge about CSS then try to create the first custom CSS and call it in the theme section.
The general way of editing the CSS is editing it inside the existing CSS file located in the theme code. It’s usually called theme.scss.liquid or base.css in the new Shopify 2.0 themes.
You can find it by going to your store admin > Online Store > Themes > Actions > Edit code > Assets folder.
but sometimes you don't have deep knowledge it then creates custom CSS and calls in the theme. liquid file
in this blog will teach you to how to create custom CSS in Shopify.
Step 1: Check the login in Shopify admin then click on the theme in the left sidebar. then after selecting the actions button in your installed theme, there are various options in the drop-down menu to select the Edit code of them.
Themes>Actions>Edit code
Step 2: Here edit code section is open where different sections are there like Layouts, templets, Sections, Assets, and many more we will discuss all the sections one by one in the next blog.
Step 3: Click on Add a new asset where you can create a custom CSS file.
Step 4: Your custom.css file is created.
Step 5: Click on the search bar menu and find a theme.liquid file also finds through the Layout folder where theme.liquid file is selected.
Step 6: Once you have the new CSS file created, you can add your custom CSS. The important part is to "call" from your theme, so it's used, so it's used To do so go to the Layout folder and open a file called theme.liquid. Add the following liquid code to the <head> section where "custom.css" is the file name of your custom CSS file.
( {{ 'custom.css' | asset_url | stylesheet_tag }} )
Once you update or change your theme, you need to copy this code to the theme.liquid again. But the custom CSS file will always stay in your assets folder.
You may also like
