Categories

Featured templates

Shopify. How to edit html css files

Roger Cunningham February 9, 2017
Rating: 5.0. From 2 votes.
Please wait...

The following instructions will show you how to access HTML/CSS files in Shopify based templates.

Editing the existing files

  1. Log into Shopify backend and tap Online Store under the Sales Channels;

    shopify_how_to_edit_htmlcss_files
  2. Under the Online Store option select ‘themes’. On the right click on a (...) link and choose Edit HTML/CSS;

    shopify_how_to_edit_htmlcss_files_1
  3. Select the file you would like to edit on the left, apply modifications to the file using the Shopify inbuilt editor and click Save in top right corner;

    shopify_how_to_edit_htmlcss_files_2

Creating files

  1. You will see the template file structure under the Edit HTML/CSS menu;

    • Template 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;

    • Templates directory is rendered as the Templates folder in the Admin. It contains template pages (categories, cart, etc.);

    • 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;

    • 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.;

    • configs 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;

    • 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;

  2. To create a new instance of the asset file, for example, tap Add new asset link;

    shopify_how_to_edit_htmlcss_files_3
  3. Shopify provides both upload file function and create a blank file function in the admin area;

  4. Select, for example, create a blank file, give your file a name and select extension.

    shopify_how_to_edit_htmlcss_files_4

Feel free to check the detailed video tutorial below:

Shopify. How to edit html/css files
Responsive Shopify Themes
This entry was posted in Shopify Tutorials and tagged css, edit, files, HTML, Shopify. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.