If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Shopify. How to edit html/css files

This tutorial will show you how to edit html/css files in Shopify.

Shopify. How to edit html/css files

In order to edit html/css files, you should perform the following:

  1. Log into the Shopify Admin with your login credentials.

  2. Navigate to Online Store -> Customize Theme:

    Shopify:

    Shopify. How to edit htmlcss files1.jpg

  3. Click ‘Edit HTML/CSS’:

    Shopify. How to edit htmlcss files2.jpg

  4. Select the file from the left sidebar and click it.

  5. Edit the file and click ‘Save’ at the top right:

    Shopify. How to edit htmlcss files3.jpg

  6. To add/create a new file, access Assets and click Add new asset:

    Shopify. How to edit htmlcss files4.jpg

  7. In pop-up window you’ll have two options – upload a file from your computer directly using Browse button:

    Shopify. How to edit htmlcss files5.jpg

    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:

    Shopify. How to edit htmlcss files6.jpg

Theme Structure:

  1. 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.

  2. The templates directory: The templates directory is rendered as the Templates folder in the Admin. It contains template pages (categories, cart, etc.).

  3. 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.

  4. The assets directory: The assets directory is rendered as the Assets folder in the Admin. It contains all the assets used in the theme, including images, stylesheets, and javascript files. Use the asset_url filter to reference a theme asset in your templates.

  5. 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.

  6. 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:

Shopify. How to edit html/css files

 
Live Chat
We help you to choose the right product.
Start chat