Css help us to make website more professional. Using CSS Classes we can make different style and design any section.

In this tutorial, I am going to show you easy process How to Add CSS Class to a Section in Shopify?

The way I added a dynamic css class is by creating a new setting in the schema.

For example in my case, I wanted to add a CSS class to the rich-text section. So, in rich-text.liquid I added the following under the ‘settings’ section of the schema:

{

"type": "text",
    "id": "section_css_class",
    "label": {
      "en": "Section CSS Class"
    },
    "default": {
      "en": "Type your own CSS class"
    }
  },

Then in at the beginning of the same liquid file, add the following to the existing div element:

<div class="page-width {{ section.settings.section_css_class }}">