Can I use the Google DevTools (inspector) to change the presentation of my shopify ?

[Amine_Mobhatij]

Hello, 

I would like to know if it's possible to edit the CSS by using Chrome DevTools, and if yes I would like to know exactly how to do it. I already tried to change some things but at the end it doesn't save itself on my shopify.

Thank you very much

[Sagar_Khadke]

Hello Amine,

When you try to change CSS using Chrome's DevTools, it just changes the css till the time we refresh the page, those are temprory changes. If you want to make those changes permenant you have to edit the code in the backend. There is no way you can make permenant changes on DevTools of any browser.

Thanks,

Sagar Khadke

[Amine_Mobhatij]

Hello Sagar,

Thanks for your answer.

So how can I change the CSS of my shopify ? I don't find any solution to do it easily.

Do you have any solutions ?

Thanks

[Sagar_Khadke]

Hello Amine,

Please follow these steps to edit CSS in shopify:-

1. Login to you store in backend.
2. Click Online Store > Actions > Edit HTML CSS
3. Open a file with name theme.scss.css
4. In the bottom of the file you can make your required changes.

I suggest using comments to easily identify your changes so you can always undo just in case you do something wrong. You can use css comments like:-

/* This is my css */

And below that you can add your code.

Let me know if you need any more help.

Thanks,

Sagar Khadke

[Amine_Mobhatij]

Oh nice,

I'll tell you the result.

Thank you very much Sagar

[Amine_Mobhatij]

Sorry Sagar, but I don't find the file named theme.scss.css !! There is only a theme.scss.liquid.

What is the difference ? 

Thanks 

[Sagar_Khadke]

Hello Amine,

In this case you can search for any file with .css extension and in that file you can make your changes in the bottom, you can use theme.scss.liquid too. If you don't want to use that file than you can add new .css file in Assets folder.

Thanks,

Sagar Khadke

[Amine_Mobhatij]

Well, I'm not sure to understand everything but I will try. 

Thank you Sagar

[Jason]

theme.scss.liquid

That is a css file. (It's a sass file that's rendered into CSS on the storefront).

[AllGas]

Is there anyway to see what I am adjusting on the dev tools page and then what i correct to look good, how do i reference what i did into shopify and where i can go into shopify and correct it.  For example i have a large blank space on one of my collections pages.  in DevTools I can delete the two <br> <br> to look how i want it. i want to know how i can use that to search in shopify and edit it in the code.