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

Amine_Mobhatij
Tourist
17 0 3

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

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

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
Amine_Mobhatij
Tourist
17 0 3

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

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

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
Amine_Mobhatij
Tourist
17 0 3

Oh nice,

I'll tell you the result.

Thank you very much Sagar

0 Likes
Amine_Mobhatij
Tourist
17 0 3

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 

0 Likes

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

Have something to say? Or need to say Hi! just mail me at sagar.khadke03@gmail.com or visit https://sagarkhadke.myshopify.com
Amine_Mobhatij
Tourist
17 0 3

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

Thank you Sagar

0 Likes
Jason
Shopify Expert
10039 119 1876

theme.scss.liquid

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

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
AllGas
New Member
2 0 0

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. 

0 Likes