how to go from developer tools to shopify

14 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

Shopify Staff
Shopify Staff
356 40 70

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

1011 131 240

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