[FIXED] How to add custom css to section in shopify

Issue

I am trying to add a custom css to my shopify section. I have created a css file in asset folder called test2.css:

.body {
  background-color: lightgrey;
  color: blue;
}

.h1 {
  color: white;
}

And on top of my liquid file I have added this code:

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

And below in the liquid file:

{

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

In my section I got this input box:

I have followed this guide:

https://www.ecommercethesis.com/how-to-add-css-class-to-a-section-in-shopify/

But it doesn’t work. What am I doing wrong?

Solution

To add a custom CSS file to the section in shopify simply just add this at the very top of the section

<link rel="stylesheet" href="{{ 'test2.css' | asset_url }}">

Answered By - Adnan

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)