{"id":51509,"date":"2020-01-13T01:31:53","date_gmt":"2020-01-13T06:31:53","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=51509"},"modified":"2020-01-13T03:12:34","modified_gmt":"2020-01-13T08:12:34","slug":"shopify-how-to-edit-htmlcss-files","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-how-to-edit-htmlcss-files.html","title":{"rendered":"Shopify. How to edit html\/css files"},"content":{"rendered":"

This tutorial will show you how to edit html\/css files in Shopify.<\/p>\r\n

Shopify. How to edit html\/css files<\/a><\/p>\r\n

In order to edit html\/css files<\/strong>, you should perform the following:<\/p>\r\n

    \r\n
  1. \r\n

    Log into the Shopify Admin<\/strong> with your login credentials.<\/p>\r\n<\/li>\r\n

  2. \r\n

    Navigate to Online Store -> Customize Theme:<\/strong><\/p>\r\n

    Shopify: <\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  3. \r\n

    Click \u2018Edit HTML\/CSS\u2019<\/strong>:<\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  4. \r\n

    Select the file from the left sidebar<\/strong> and click it.<\/p>\r\n<\/li>\r\n

  5. \r\n

    Edit the file and click \u2018Save\u2019<\/strong> at the top right:<\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  6. \r\n

    To add\/create a new file, access Assets<\/strong> and click Add new asset:<\/strong><\/p>\r\n

    \"Shopify.<\/a>\r\n<\/li>\r\n

  7. \r\n

    In pop-up window you’ll have two options – upload a file<\/strong> from your computer directly using Browse<\/strong> button:<\/p>\r\n

    \"Shopify.<\/a><\/p>\r\n

    or create a file in the admin panel directly, input its name and extension using Create a blank file<\/strong> button. After you’re done, it will be possible to add your custom code there:\r\n

    \"Shopify.<\/a>\r\n <\/p>\r\n<\/li>\r\n<\/ol>\r\n

    Theme Structure:<\/p>\r\n

      \r\n
    1. \r\n

      The layout directory<\/strong>: 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<\/strong>. All Liquid templates inside the templates folder are rendered inside the theme.liquid file.<\/p>\r\n<\/li>\r\n

    2. \r\n

      The templates directory<\/strong>: The templates directory is rendered as the Templates folder in the Admin. It contains template pages<\/strong> (categories, cart, etc.).<\/p>\r\n<\/li>\r\n

    3. \r\n

      The snippets directory<\/strong>: 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<\/a> to load a snippet into your theme.<\/p>\r\n<\/li>\r\n

    4. \r\n

      The assets directory<\/strong>: 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<\/a> to reference a theme asset in your templates.<\/p>\r\n<\/li>\r\n

    5. \r\n

      The configs directory<\/strong>: The config directory is rendered as the Configs folder in the Admin. It includes a settings_schema.json<\/a> file and a settings_data.json file. The settings_schema.json file can be used to render Theme Settings<\/a> 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.<\/p>\r\n<\/li>\r\n

    6. \r\n

      The locales directory<\/strong>: The locales directory is rendered as the Locales folder in the Admin. It contains the theme locale files<\/a> which are used to provide translated content for the theme.<\/p>\r\n<\/li>\r\n<\/ol>\r\n

      Feel free to check the detailed video tutorial below:<\/p>\r\n

      Shopify. How to edit html\/css files<\/a><\/p>\r\n

      Hopefully, this guideline was helpful and you got the idea. If you want me to be more helpful, I should certainly tell you about the new Shopify Business Startup Kit<\/a>.<\/p>\r\n

      \"\"<\/p>\r\n

      If you are a beginning retail entrepreneur planning to launch an online store but have no particular experience in website development, we have an option. And most importantly, this option is relatively inexpensive, simple and fast.<\/p>\r\n

      About Shopify Business Startup Kit<\/h3>\r\n

      The Kit is created for users who don\u2019t want to worry about website matters. You don\u2019t have to be an experienced web developer or spend time obtaining certain skills. Eventually, if you purchase the service, you\u2019ll spend NONE of your time – the entire job is on us.<\/p>\r\n\r\n

      After making a purchase, you\u2019ll be contacted by our team with a request to provide us with information about your online store. Once we have all the necessary data, we\u2019ll help you create a fully functional website based on one of our Shopify themes. The entire procedure takes up to 3 days.<\/p>\r\n

      3 Steps to Create a Website<\/h3>\r\nWe want you to know exactly what kind of service you obtain, so here is a brief overview. We divide the entire process into 3 main steps:\r\n
        \r\n \t
      1. Creation and Configuration.<\/strong> We register your online store, which may be transferred to your Shopify account if you need it. Although we are responsible for customizing your Shopify store, we do it based on your needs and preferences.<\/li>\r\n \t
      2. Content installation.<\/strong> We use the information about your products\/collections to create content on your website. We also insert images\/videos, create blog posts, etc.<\/li>\r\n \t
      3. Apps installation.<\/strong> You will find 5 Shopify apps in our kit, and those are Oberlo, Product Reviews, SEO Image Optimizer, GDPR Cookie Consent Banner, and Privy. All these apps will be handy for managing an online store on your own.<\/li>\r\n<\/ol>\r\n

        How Much Does It Cost?<\/h3>\r\nThe price for the Shopify Business Startup Kit is $359. The cost includes the following services:\r\n