In this article we discuss about How to edit Shopify themes & templates using HTML, CSS & JavaScript. This tutorials at Ecommerce platform require you to edit the CSS, HTML & Javascript from your Shopify theme. If you’re not a  developer,you cannot not be sure how to edit this, so this post will show you how to edit this.  Many themes use SCSS, so it look like as “style.scss.liquid” or “theme.scss.liquid.”

It’s worth noting that,when you start customization’s, to consider that making these types of changes. When you consider to accomplish for  adjustment to theme’s built-in settings  a way doesn’t require code. Modifying themes using methods discussed the require at least knowledge of CSS, HTML, JavaScript & coding principles, so be sure you comfortable with before attempting any. In addition, these techniques added advantage that,you run into compatibility with customization’s, you can remove include tags,as well as isolate the issue.

• Access the themes area of admin panel click the icon in upper right ( looks like three dots). After select Edit HTML/CSS from the flyout menu that appears.

• You’ll see Shopify’s theme file manager, it has a narrow white bar to the right of the Shopify admin bar.Scroll down this toolbar until you see the folder & click on expand to necessary.

• Click the Add new asset link. Select Create blank file tab and give your file a name. You can usually like to use custom-styles.

• From  drop down menu, select the .css.liquid extension.

• Now see a blank file on the larger, right hand panel of the theme file manager.  where you can start typing CSS declarations. Be sure to save your work as you go.

• To integrate you to new stylesheet theme, scroll up on the list of folders and find Layouts folder.  click to expand and select theme.liquid.

• locate closing </head> tag. An way to do this click the code you see on, right side and then hit Ctrl  and  F key your keyboard. A  search box will appear  the upper  of the code view.Type or paste in </head> and  code editor will “jump” to this tag appears.

• you’ve located the </head> tag, and hit enter to add a new line. Then type or paste in this code on its own line.

• If your custom CSS file like as custom-styles.css.liquid, you can replace “custom-styles” in this line you can use code. Note that ,liquid should not included in this code.

• Save your work. any styles you can add to the custom-styles, including overrides, should overwrite of any  themes built-in styles.

Shopify Themes  already come packed with tons & great features that easy to configure to using the built-in configuration panel.

These types of customizations aren’t  the faint at heart. They do require knowledge of HTML , CSS as well as Shopify’s templating language.

Shopify’s excellent documentation to suggests these types of changes and even sometimes, provide the code needed. So this is a good concept for  Shopify store owner. The biggest pitfalls for making updates to code of  Shopify theme, however,  that you likely get overwritten.If you can update your theme in the future.