How can I use Inspect Tool from Chrome to customize my store?

Difficulty Level: Advanced Tutorial     Tools Needed: Control Panel

If you browse with Chrome and want to make changes to design then you can use Inspect Tool to see the source code of your store and the CSS rules applied to it.  

To enable it just use CTRL+SHIFT+I (on MAC -> COMMAND+SHIFT+I) or right click and from the pop-up menu select Inspect Element :

chrome-inspect-element.png

Once you have clicked on that option you will see two windows for HTML code and for the corresponding CSS rules that apply to each html element. 

inspect-tool-at-work.png
(Click to view larger)


As we can see in the image above we can find out a lot of information about the element or page:

1.) On the left part is the windows which shows the HTML code: here you can easily identify what tags where used and what are the surrounding elements

2.) Hovering with the mouse pointer over the highlighted element in HTML windows will show on the main page the tag used and width and height

3.) The right windows is for all the CSS styels used for that particulat element

4.) On the far right in the CSS window you will see a text like style.css:462 - this means that the CSS rule can be found in styles.css file and on line 462

 

Another interesting usage of this tool is that you can make live changes and see how they would fit into the overall design without even modifying the actual code from the templates.

Do not worry if you delete some elements or styling in this editor.  This happens only in the browser and you can see again the site as it is by doing a refresh (F5).

To edit a particular part of an element in the HTML window simply double click it and change the text or tag in it. You can delete entire blocks of code in this HTML window by right-clicking and selecting Delete Node. This will help troubleshooting some issues related to modifications done to the layout. If you do not like what you see, simply refresh the page.

edit-html-part-element.png

If you want to see how the site will look with a changed text color for the top menu, simply hover with the mouse over an item, click Inspect Element, and then look the CSS rules window. The color of text can be changed by modifying the value for attribute COLOR.

css-edit-element.png 

After testing a few times how this tool works you will be able to find out what and where to change without having to ask around.

Chrome's Inspect Tools has many other options that you can use it for, but explaining their usage is not the scope of this tutorial. Please check further documentation about it here.  Also, please check documentation on W3Schools about HTML and about CSS.

Attachments

No attachments were found.

9 votes 88% thumbs up 11% thumbs down

Did this article resolve the issue?

Was this article helpful?

Continue