Shopify is a powerful e-commerce platform that allows users to create and manage their online stores with ease. One of the key features that make Shopify so popular is its flexibility and customization options. In order to create a unique and personalized online store, users can add custom CSS classes to various sections of their website. In this guide, we will explore how to add CSS classes to a section in Shopify and customize your online store’s design to make it stand out from the crowd.

CSS helps us to make the website more professional. Using CSS Classes we can make a different styles and design any section.

In this tutorial, I am going to show you the easy process of How to Add CSS Classes 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 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 }}">

Contact me for any services or hire me on Upwork