How to find the problem in your theme code in Shopify

Hailey April 09, 2019


Do you want to start? Get shopify free trial here!

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

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.


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


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


<p> ©, & Stuff </p>


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


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.

About Author: Hailey
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!
Recommend for you
Image Description
SEO Suite [FREE]

Auto-optimize website elements and structure in one-click.

Learn more
Proofo - Social Proof [FREE]

Use Social proof to boost sales

Learn more
Image Description
Size Chart [FREE]

Stunning size guide for great shopping experience

Learn more
Image Description
Free Shipping Bar [FREE]

Increase customers’ shopping cart size with free shipping offer

Learn more

Comments for Find the problem in your theme code


Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

go up