how to go from developer tools to shopify

15 0 3

hey so i can edit css in chrome developer tools but i have a hard time finding where the css file is located in the shopify code code editor. is there a way to see what file the css i'm wanting to edit is located? once i have that file i should be able to command find the css code and edit from there

Replies 3 (3)
Shopify Staff (Retired)
468 58 156

Hey, Criesner!

I'm Lizzy, a Guru from the Shopify support team.

When you use Chrome Developer tools, there should be a link to the right of the CSS that states which file it is pulling from. Typically it will be something like the theme.scss.css file, but can vary depending on your theme.

Once you have identified which file the code is coming from, you will be able to find it in the Assets folder of your theme code. To get to this area you can go to Online Store>Themes>Actions>Edit Code>Assets.

Did that help you to find the are you're looking to edit? If you have any other questions about it let me know. 

Thank you, 

Lizzy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Shopify Partner
2247 339 900

Usually I go to theme.scss.liquid right away and ctrl + f what I need. The trouble is that what you see in the inspector is the compiled css from the scss. So when I see something that's like 

.container .main_menu .li{ 

display: block;

Yadda yadda yadda


I always just look for the oldest parent like .container, since scss keeps everything relative to the parent. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
13 0 2

Is there a similar solution for finding the html?

For example, in the image below I want to change the class of the highlighted <div> - however I am unable to find where the <div> is being generated...