This tutorial will show you how to edit html/css files in Shopify.
In order to edit html/css files, you should perform the following:
Log into the Shopify Admin with your login credentials.
Navigate to Online Store -> Customize Theme:
Click ‘Edit HTML/CSS’:
Select the file from the left sidebar and click it.
Edit the file and click ‘Save’ at the top right:
To add/create a new file, access Assets and click Add new asset:
In pop-up window you’ll have two options – upload a file from your computer directly using Browse button:
or create a file in the admin panel directly, input its name and extension using Create a blank file button. After you’re done, it will be possible to add your custom code there:
The layout directory: The layout directory is rendered as the Layouts folder in the Admin. It contains theme layout templates which by default is the theme.liquid file. All Liquid templates inside the templates folder are rendered inside the theme.liquid file.
The templates directory: The templates directory is rendered as the Templates folder in the Admin. It contains template pages (categories, cart, etc.).
The snippets directory: The snippets directory is rendered as the Snippets folder in the Admin. It contains all the theme’s Liquid snippet files which are bits of code that can be referenced in other templates of a theme. Use the include tag to load a snippet into your theme.
The configs directory: The config directory is rendered as the Configs folder in the Admin. It includes a settings_schema.json file and a settings_data.json file. The settings_schema.json file can be used to render Theme Settings form when changing the look and feel of a store.
This directory also contains the settings_data.json file, which stores the merchant’s Theme Settings preferences.
The locales directory: The locales directory is rendered as the Locales folder in the Admin. It contains the theme locale files which are used to provide translated content for the theme.
Feel free to check the detailed video tutorial below: