Suddenly Layout Change on Some Product's Product Page

Shopify Discussion
1

On my store ~1000+ products. when i open some products then there layout are differnet. so when i open all product page then their design are correct. only 3-4 pages design are different what is the issue. All product page content are come from product.liquid if any design issue occur then if do on all pages. why it only on 3-4 pages.

Correct Page : Correct

Uncorrect Page : Uncorrect

i don’t know what happened because all product page code are same. product page are rendered from product.liquid

2

The problem comes from the description excerpt you have right below review stars.

I can’t see your theme code, but I guess there is somewhere a piece of code which looks similar to


  {{ product.description | truncatewords: 20 }} 
  
    Read More

The issue with this code is that your product descriptions contain some HTML formatting and it’s being split in the middle so that on your bad looking page it outputs the opening

tag, but no closing tag.

Browser tries to fix this invalid HTML and sometimes it works ok (your good-looking product), but may fail for another product because it has more complex formatting.

There is a simple fix – when you find the piece of code above, change the second line to look like:

{{ product.description | strip_html | truncatewords: 20 }}

This will add a filter to strip HTML code from your description (and leave only text) so it is safe to truncate.