Resolve error: “Template content exceeds 256KB limit”?

When saving or publishing your page, you may see a message “Template content exceeds 256KB limit” like the image below.

While EComposer is super flexible, we still need to abide by Shopify’s rules regarding themes and templates to make sure they do not affect your site’s performance. One of those requirements is that template files in themes are less than 256KB in size. When building a page, you might exceed that limit in a few ways. But in general, it is probably because there are too many elements on the page, or you are using big chunks of code in custom code blocks.

1. Identify the root cause of the issue

1.1. The upload icons on your page

The biggest problem is with the upload icons on your page. If you are using the uploaded icons, there might be so much HTML code behind each icon, as you can see in the image below, as shown in the example below. To solve the issue, you can convert the icons to images to use, or you can use this tool to resize the icons and then upload them to the app again to use.

1.2. Your page has so many Product grid or Product box elements

For example, you added so many Product grid or Product box elements on your page, and this section contains so much HTML code. You should use 2 to 3 Product grid elements on a page only. To solve the issue, please try to remove them one by one until you can save the page successfully.

1.3. Your page contains too many sections, rows, columns, or elements

One possible reason is that your page structure contains too many sections, rows, columns, or elements. Each element in EComposer generates a certain amount of HTML code. Shopify calculates the page size based on the total HTML content of the page. As a result, the more sections and elements you add, the larger the page size becomes.

For example:

• A page with 10 sections, where each section contains only 1 inner row and 1 element, will have a smaller page size.
• However, a page with 10 sections, where each section contains multiple rows, many columns, and numerous elements, will generate significantly more HTML code and result in a much larger page size.

Normally, we recommend keeping the page structure simple and limiting the number of sections whenever possible. To check the number of sections on your page, open the Navigator tab in the builder.

For example, on the above page, I have more than 15 sections. To solve the issue, you can try to check and delete the sections if you see that they are duplicated. When you insert a template into your page, you might tick the Insert under current layout in the editor option (see the image below). If you tick that option, the sections in the new template will be inserted below the existing sections on your page. So the number of sections can increase a lot without you knowing.

1.4. Some other reasons

Also, when you copy content from somewhere else and paste it into our app, you accidentally copy the HTML code of that content. The way to solve this problem is when pasting content, please use the key combination ⌘ + shift + v to paste text only instead of using ⌘ + v

2. Solve the issue using Global Blocks

Instead of adding many sections directly to a single page, you can group multiple sections into Global Blocks and then insert those Global Blocks into the page.

For example: Your page contains 20 sections. Instead of keeping all sections on the page, you can: Create several Global Blocks, add multiple sections into each Global Block, then insert the Global Blocks back into the page layout. To learn more, please check here.

Notice: Global Blocks are available only on Pro and Premium plans. If you prefer not to use Global Blocks, please follow the alternative solutions listed above to reduce page size.

If you can not solve it yourself, don’t hesitate to get in touch with us via live chat, and we will help you check and solve the problem.

Still stuck? How can we help?

Was this page helpful? Yes 1 No 1

How can we help?

Send