Why aren't my CSS changes reflecting on my website?

Technical Q&A
1

Hi, I am not sure if changing CSS in shopify is different from something like wordpress but, when I add simple css changes like this

.hero__text-shadow {
margin-bottom: 250px !important;
}

to change the positioning of a section of my website, the changes never update. Would anyone know why these changes won’t update? Would it have anything to do with me being on a free trial? I know my code is correct as I tried the changes first in the style editor to make sure they worked but when I added this to the theme css code, it never actually updated on my website.

2

Hi @sebastian1617

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please go to Theme > Actions > Preview > Click the Share Preview Button at the bottom of the page.

  • On this bar, click on the button Share Preview > Copy Link.
    Note: Make sure you click on this button, do not share the URL on the top of your page because it won’t work.

When I have this I’ll be able to best help you. You can also send me a DM if that is easier. This can be due to the css stylesheet not being referenced correctly in the theme file.

Kind regards,

Jake

3

Thank you Jake.

171632

home page, specifically the content at the top which contains a heading, subheading, and a button.

4

Hi @sebastian1617

Great, I’ll DM you now to discuss more.

5

thank you

6

Hi @sebastian1617

Sorry but due to Shopifys DM there are still time limits on my account with messaging as the same would be for yours. (To stop sending spam content)

Yeah great, from what I can see you are adding the CSS to the page directly instead of using the style sheet.

You would add this into your theme file to refference a stylesheet.

{{ ‘theme.css’ | asset_url | stylesheet_tag }}

The theme.css file would located inside of your assets file as well.

Is this what you mean?

From a background colour perspective I have see you used the

.hero__text-wrap {

position: relative;

height: 100%;

color: #fff;

color: var(–colorHeroText);

}

When i add background-color: #white; This seems to make the whole background go white and works for me. Is this what you are after?

I also made a change inside of the div group adding your css. Please see the image attached.

Screen Shot 2022-04-21 at 12.03.44 pm.png
Screen Shot 2022-04-21 at 12.03.44 pm.png2398×1036 478 KB

7

So I understand I am doing something wrong when inputing the CSS. So I should not be directly typing this:

.hero__text-shadow {
margin-bottom: 250px !important;
}

into the theme.css.liquid file.

I am a little confused on how I add the CSS, do I have to write this first:

{{ ‘theme.css’ | asset_url | stylesheet_tag }}

and below that add this:

.hero__text-shadow {
margin-bottom: 250px !important;
}

or am i misunderstanding?

8

This should be inside of the theme.css file correct and if it is inside of the file you should be able to reference that css inside of the div as a class.

As i can see on line: 6965 of your theme.css you have a different css that the above.

Screen Shot 2022-04-21 at 12.11.59 pm.png
Screen Shot 2022-04-21 at 12.11.59 pm.png478×144 14 KB

If you want to change that I would change the css inside of the theme.liquid or make a new css name.

9

Thank you so much!!!

10

Glad I could be of help!