How to find the problem in your theme code in Shopify

If an HTML error found warning shows up after you made a change to your theme, there is must be some error that you need to fix. It would be extremely hard for you to find the HTML errors in the theme editor because there are so many different codes with tags and characters. This post provides you with the way to find the problem in your theme code fastly and accurately. Below is the detail.

Find the problem in your theme code

• Step 1: Press on the.liquid file
• Step 2: Look for the error
• Step 3: Fix the error
• Step 4: Tap on Save
• Step 5: Select Customize

Step 1: Press on the .liquid file

The warning message comes up to notify you that there is some error in your theme setting. Press on the .liquid file which is linked in that message to go directly to the incorrect file.

Step 2: Look for the error

This is a list I’ve prepared for you about errors you might have. Take an overview and see what exactly the error is.

• The code is without a closing tag or an opening tag: For example, it needs to have both of the opening <div> tag and closing </div> tag.

• Malformed HTML tags: For example, the code <div class=”my-class” without a >

• Use the same id: On a web page, the class can be used multiple times but you can only use the id for a particular element. This is especially important when applying javascript, ajax.

For example, this is the wrong use:

<div id = "idabc"> Information </div> <div id = "idabc"> Other information </div>

It need to be correct like this:

<div id = "infomation"> Information </div> <div id = "otherinfo"> Other information </div>

• The closing tag in the wrong order: It is really important that the closing tag in the right location, for example, the div tag is only closed after all the tags in it are closed.

Wrong:

<div><strong>Information</div> </strong>

Correct:

<div><strong>Information</strong> </div>

• Capitalize tags: You will not validate your HTML code if you write the following:

<DIV> </DIV>

• Use special characters: Make sure that you use special characters correctly in HTML code because the browser can not always understand and handle them. For example:

Wrong:

<p> ©, & Stuff </p>

Correct:

<p> & copy ;, & amp; Stuff </p>

Step 3: Fix the error

You must have found your problem. In this step, make sure to correct the code by fixing the error.

Step 4: Tap on Save

Finally, tap on Save to save your change.

Step 5: Select Customize{#select-customize}

If you want to confirm there is not any error exist, select Customize to return to the theme editor. If the message is still shown, there must be some error need to be fixed. If it’s not, you’ve corrected all the error.

Summary

With this tutorial about how to find the problem in your theme code, hope that you can correct all of your theme codes. These themes will be shown accurately as what you expect.