0

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:

enter image description here

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?

3
  • Please show the markup. Does shopify really have elements with class="body" and class="h1" (only such elements would be affected by the CSS you've shown)?
    – connexo
    Commented Feb 18, 2022 at 13:37
  • Maybe it is something wrong with the css. I just want to change the background color of the section. Commented Feb 18, 2022 at 13:53
  • I don't think the link you have posted has anything to do with CSS classes.
    – connexo
    Commented Feb 18, 2022 at 15:47

1 Answer 1

1

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 }}">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.