A space to discuss online store customization, theme development, and Liquid templating.
Currently in the process of updating to online store 2.0 and am shocked to see the block limit has been drastically reduced from 250 to 16. My store has a custom section which visually displays the ingredients of our product with a link to a collection for that product. Combined, we have over 70 ingredients for our teas with approximately 70 blocks in this section (each block came pre-built with the tea & link to collection).
When I built this section we saw up to 60% increase in conversion rates, and our customers found it to be extremely helpful. With the new limit we can no longer have this section (which prohibits us from ever upgrading). Is it possible to restore this limit, or at least allow a much higher ceiling?
If not, could I propose adding a new meta option similar to an excel table. Where you can define multiple data types per row (say a column for text, a column for images, and a column for links). This would be visual, with the ability to upload the file directly into it. This meta field would have a preset amount of columns that are first described when the meta is built, but an "unlimited" amount of rows. The closest thing to that is the JSON meta, which is a poor option for managing images. I'm also the only person in my office that understands JSON – so that's a major downside.
Solved! Go to the solution
This is an accepted solution.
So by stroke of luck, I've discovered a new app that might just cover what we need, without us having to spend $3k-$5k on a custom app.
Airfields, an app that allows you to define meta fields, and then create them within their respective Shopify editors, allows you to create fully custom metafields for products, collections, pages, blogs, and more. The major thing here is they have something called a repeater, which allows us to create groups of multiple values within one metafield. They even include example theme code on how to use said repeater when defined.
https://apps.shopify.com/airfields
@biron With this app, you could create a repeater for pages with an image field, title field, and URL, and craft what you need without the blocks.
I'm trying to understand this, but I'm not sure what you mean by blocks in this context. Are you talking about the maximum number of metafields that can be associated with each product?
Whatever it is, it sounds like you might be able to replicate the same functionality using tags, with a different tag for each ingredient?
Previously the block limit with legacy Shopify was 250 per section. With 2.0 this has been reduced to 16. We used these blocks in one of our sections to dynamically load a photo, a blurb, and a link to a collection of items with the same ingredient for each of our products.
The key challenge we had was how to load in ingredients for our large catalog of products with over a combined 70 ingredients. We needed something with an image picker, a way to link to a collection, and a text field about the ingredient. Products have a varying count of ingredients. Some have 2 ingredients, others could have 6.
Something like this is too complex for tags or meta fields, this is why we used blocks. The theme code would search the blocks and find blocks where the title of the ingredient was equal to an ingredient within the product. It would then render that into the section complete with its unique photo, link, and blurb.
My request was to restore the previous block limit or at least increase it to a more substantial level.
OR add a new meta field that is essentially the JSON meta field, but visual. Something that allows Shopify users to pre-define columns (say you define an image column and text column) and then add in as many rows per product as they need. In the front-end this is easy, visual, and any Shopify user can use it without the help of someone that knows JSON. In the back-end the end result is the same JSON that's currently available as a metafield.
I get most of what you're saying but the part I'm confused about is what you mean by the word "block". How are you inserting these blocks? Are they snippets that you include with the Liquid {% include %} directive? Or something else?
I'd love to see this in action, as it sounds like a really cool thing to present to your users. If you feel like sharing, PM me the store URL. No worries if you would rather not, though.
Shopify blocks: https://shopify.dev/api/liquid/objects/block
Previously these were limited to 250 per section. They've since been reduced to 16 per section on all themes using Shopify 2.0
You can view these in action by visiting our wellness teas and scrolling down to "This tea's ingredients include...": https://fullleafteacompany.com/collections/wellness-blends/health-benefit_sleep-stress-relief
this is so stupid !!!
There's been no communication from Shopify on why this was drastically changed or if this will be re-adjusted in the future. Rather upsetting.😕
Shopify, what the hell...
I've been moving one of my stores to online store 2.0 but this has become a complete deal breaker for me. I used to use sections where I'd frequently have more than 16 blocks in them at a time. With this gone, I have no idea how I can achieve what I need to.
16 is way too restrictive and I can't see any reason for the change?
It's a dealbreaker for our store too. Blocks are a component of one of the most essential sections in our store. Super frustrating. I've contacted Shopify+ Support and they've yet to provide a response other than "we'll take a look at it" 😕
This is very frustating for me too, did you have any other answer yet or did you manage to fix this in any other way?
Shopify dont allow this for more info simply find us at Youtube
We're looking into hiring an app developer for our use case. Unfortunately, that is likely too cost-prohibitive for many other businesses. Shopify is still AFK on the matter.
I received a response from Shopify, basically "we're not changing this, and you can either use our meta fields or hardcode your data", we used blocks because we had a complex solution, and both of these options are either too basic or too time-consuming. Thanks Shopify.
Chrissy here with the Plus Support Specialist Team, thanks for connecting with us today.
I understand you're looking for more information on the section blocks and the limit of 16 for Online Store 2.0. Thanks for the information and context on why this change is important to your business and workflow.
I've looped in our front end developers to gain more insight for you regarding your inquiry. In terms of increasing this limit, that is not a feature available at this time and cannot be changed. I advised our team of the situation of the ingredients listed in the sections, and a work around they recommend is using metafields to customize the product as there is no limit this way.Alternatively, you can hardcode all of their block data into sections or snippets and then bring them in that way— keep in mind that you'll just need to go into the theme files whenever you want to make changes instead of using the theme editor.
Using metafields is our front end developers most recommended workaround in this case.
I've gone ahead and made note of your feedback and will forward this to our developers to consider adding that functionality in a future update. Our priority is making sure Shopify is as user-friendly as possible and we're always looking for better ways to improve the systems, we appreciate your input.
This should get you on the right track for now. Feel free to reply to this email if you have further questions and we will be happy to help.
hmmm! so basically thats it! @maxrfinch
For me, I'm not using using this section on a product page, so metafields can't work.
I'm basically building a little image gallery which outputs a carousel of images. This carousel can be on any page and sometimes I need more than 16 images in this carousel.
I don't want to add some bloated app to do this as my implementation of a section works perfectly. It being restricted to just 16 items just makes no sense to me though. Why can't it have 20 or 30 or even 250 like it used to be? Why was this change made?
This is an accepted solution.
So by stroke of luck, I've discovered a new app that might just cover what we need, without us having to spend $3k-$5k on a custom app.
Airfields, an app that allows you to define meta fields, and then create them within their respective Shopify editors, allows you to create fully custom metafields for products, collections, pages, blogs, and more. The major thing here is they have something called a repeater, which allows us to create groups of multiple values within one metafield. They even include example theme code on how to use said repeater when defined.
https://apps.shopify.com/airfields
@biron With this app, you could create a repeater for pages with an image field, title field, and URL, and craft what you need without the blocks.
@maxrfinch that's really nice you found a possible solution. Can you maybe update me if it has worked with your case? I would appreciate that, since my client would like to have more than 16 images in their showcase. I don't want to immediately show them the app without knowing if it will work for sure.
It works. Definitely needed to make changes to my code, especially with displaying image data and lazy loading, as the image meta isn't like the image object you get in liquid, it's simply the main URL with versioning.
That being said, it's still very much possible to create an image carousel using this app. You would use a repeater for defining the meta, then edit each meta for the pages your client wants this tool. On the backend side, you get a nice visual tool for uploading images, adjusting text, etc. You have the ability to create as many objects as you want in the repeater meta. On the liquid side, it creates an object with key:value pairs that you can work with. They have some documentation you can follow.
Hey, @maxrfinch question,
When editing the actual content, is this something that could be done via the theme editor or is most of the workflow restricted to the app's admin pages? My main gripe with all of this is that I really wanted for us to be able to edit everything via the theme editor, not some 3rd party app.
I'd be interested in this too. I'm in the same boat where I'd love to keep it all under one interface.
A way around this is to copy the html from the blocks that you have already added, then copy and paste the html, in a custom html section in the theme customiser, to reach the desired number of blocks. Of course you would need to edit the wording/images etc. in the html itself to change them to what you need, but this would fix the issue. If you have no idea how html works then of course this is more of a challenge, thought it is not that complicated.
This still doesn't excuse Shopify treating us like a bunch kids who have been naughty in the playground however.
@Daniel_Whitehe2 lol!
This still doesn't excuse Shopify treating us like a bunch kids who have been naughty in the playground however.
Could not have said it better.
@eballeste1 @biron There's no theme editor editing. The app works by defining the meta field format with the app. On each resource page in admin (page, product, collection, customer, etc.), you click "More Actions" -> "Edit Metafields." This brings up a user-friendly editor, though it is a separate app. The app does come with a 30-day trial for you to play around with.
I agree; I'd prefer to do everything without an app as well, but Shopify thinks they know better – and unfortunately, after brainstorming for months, this is the best solution I've found. I'm just grateful to have this solution so we can push forward with 2.0 ahead of the holidays, those custom product pages are going to be nice.
Here's the process for a carousel for pages:
Step 1: Open the app from apps, click "pages"
Step 2: Create a new meta object with the REPEATER option.
Step 3: Create sub fields to your liking. Here's an example of what I did. Then click save.
Step 4: Open a page you want to edit, then click More Actions -> Edit Metafields
Step 5: This will open a new window. Add as many slides as you'd like, with whatever fields you need.
Here's some example liquid to work with the object in the theme. They have customer support you can reach out to if you need help. I can also give some brief pointers if need be:
{% assign scope = page.metafields.airf %}
{% assign carousel = scope.carousel %}
{% if carousel and carousel != blank %}
{% for row in carousel.rows %}
Row Data
{% for row_field in row %}
{% comment %} Show ech field in row {% endcomment %}
<div id="{{row_field.key}}">
<span>{{row_field.label}}: {{ scope[row_field.key] }}</span>
</div>
{% comment %} Conditional show items, for example you can decide which html tag to use {% endcomment %}
{% if row_field.key contains "XXX" %}
<h2 id="{{row_field.key}}">{{ scope[row_field.key] }}</h2>
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
When working with the carousel object, it's important to know that each key of an additional object is appended with a number, starting at 1. For example, image_1, image_2, etc.
@maxrfinch gotcha, thanks, yeah we've been doing this exact same workflow for years now, but with a different app (Advanced Custom Fields)... we thought that we would be able to get rid of it with the new Sections Everywhere. We thought wrong.
@maxrfinch thanks for the guide on how to do that. However, without an interface in the theme customiser, this would be much too difficult for my client to manage.
I have so many use cases where I'd build a custom section for my client where they can add blocks to it. For example: an image gallery, a carousel of different types of content, a featured reviews section, a simple FAQ, a features list etc etc. There's so many use cases that I'd use custom sections for and with storefront 2.0 these can be used on any page on the site. That's massively powerful and makes it so simple for my clients to manage it all themselves. However, there's so many use cases where they want to add more than 16 blocks inside these sections.
So right now, I can't actually use these sections at all. I can build them and they work perfectly for all my needs and are all manageable in the theme customiser - except for the 16 block limit that just kills this functionality. The only solution I have to build any of these sections now is to use external apps. Why Shopify? Why make me install an app (or multiple apps) which means I need to have a different interface to do all these things. This makes it impossible for my clients to understand and manage, and way way more work for us developers to integrate and customise to fit our needs (if they can at all).
You built an amazing tool which gives us so much freedom and flexibility. It's honestly perfect except for the 16 block limit, that just destroys its potential. Bring back the 250 limit or at the very least, explain why you've changed this.
@biron Just to clarify, I don't work for and am not associated with Shopify. I'm an independent seller who like you is frustrated with Shopify's change to the block limits, and in no way do I have anything to do with the change myself.
@maxrfinch ah yeah I know. You've been massively helpful and your solution will help a lot of people out! Thanks for doing all the research on it.
That message was directed at Shopify, not at you at all. Sorry if that came across wrong.
Something you can try, and something our developer did, was add multiple values within blocks. Theoretically, you can multiply the number of items you can do in the theme editor by 16*X. For example, if you're doing slides, you can try adding three slides per block, which would effectively make 48 slides available. You could attach an additional identifier to each slide, then check to see if the slide contains an image within your liquid code.
It's important to note this example was written in like 5 minutes as a quick brainstorm, and there's probably issues but hopefully it's a good visual idea.
Essentially, we loop over all the blocks added in the section, within each block we loop over the settings to see if we're at an image and it has an available source. If it does, we fetch the id #, and use a separate render to render the slide. Passing in the image and info text.
Example code could look like this:
{%- liquid
for block in section.blocks
for slide in block.settings
if slide.id contains "image" and slide.src
assign id = slide.id | split: "_" | last
assign info = "info_" | append: id
render 'snippet_for_slide', image: slide, info: block.settings[info]
endif
endfor
endfor
-%}
{% schema %}
{
"name": "Mega Carousel",
"settings": [],
"blocks":[
{
"type": "Slides",
"name": "Slides",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Slideshow Image"
},
{
"type": "richtext",
"id": "info_1",
"label": "Slide 1 Info",
"default": "<p>Info here</p>"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Slideshow Image"
},
{
"type": "richtext",
"id": "info_2",
"label": "Slide 1 Info",
"default": "<p>Info here</p>"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Slideshow Image"
},
{
"type": "richtext",
"id": "info_3",
"label": "Slide 1 Info",
"default": "<p>Info here</p>"
}
]
}
]
}
{% endschema %}
Yeah, that's a nice solution that I played with doing as well. It's just a little bit hacky though.
We need @Shopify to give us a response
@maxrfinch wrote:Something you can try, and something our developer did, was add multiple values within blocks.
This is the correct solution, consolidating the design logic into configurable sane components as a system and avoid endless granularity that always leads to a maintenance burden no one wants to pay for.
It's the proper approach that is not dependent on apps and doesn't care if shopify increases the limit from 16 to 25 to 250, or decreases it to 8.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is a great great work around. Im still extremely frustrated that they implemented this max blocks 16 in, it's so stupid but this is a great idea.
Im so onboard with everything you have said here. The new max 16 blocks on pages has absolutely destroyed my ability to customize the back-end for clients. I can build the sections everything works then BAM. They customer can't fill out everything they need because someone at @Shopify coded in a max blocks to 16.
Shopify can you please just have someone go into that piece of code and wrap it in a comment tag. Just get rid of max blocks 16, or type in a new number like 250...what it used to be. This one tiny thing has made what was a fantastic custom theme editor into a far less superior one.
Another vote here to increase the limit. Really annoying that they've brought in some a miserably small limit, especially considering the section data is now saved in seperate template.json files rather than the settings_data.json file — so it wont be affecting overall site/theme editor speed as much as it did previously with the 250 limit.
Even a limit of 50 would've been more acceptable.
Yes,
this is so confusing!
Regards
Ahsan Ali
ecommpremium
In related news, not for blocks but JSON templates , Shopify's rolled out an increase in JSON template limits for more theme flexibility. Which the insightful will notice translates to 16,000 blocks per theme. Even if you only care about per template layout block limit , this is part of the "why ".
JSON template limit has been raised to 1,000 from 50
https://shopify.dev/changelog/json-templates-now-have-limit-of-1000-per-theme
Remember this is a limit, not a goal , architect theme layouts properly to avoid increasing maintenance burdens for short term convenience.
Such as restricting blocks to be used for dynamic repositioned content, for static positioned content use simpler boolean settings/flags.
Use metafields as per resource flags,data to dynamically display content elements.
Don't use themes to store resource based data that could be on an object itself i.e. a variant description, product specs list, etc.
Make sections smarter for specific uses freeing up blocks within them
Make alternative layouts with preset elements freeing up blocks.
etc
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
So I don't see how this really answers the question at all. Correct me if I'm missing something but im still seeing max blocks 16/16 on the back-end.
What the people really would love to see is max blocks 16/100 etc.
We used to have no limit, then for no reason we got a limit of 16.
Thanks
You are correct. The limit is still 16 blocks per section, and templates are limited to 20 sections per template. There was a limit, but it was around 250 or so – which is far more reasonable.
@thedesignersdev wrote:Correct me if I'm missing something but im still seeing max blocks 16/16 on the back-end.
Yes I bolded and redlined that was about the containing template limits
@thedesignersdev wrote:So I don't see how this really answers the question at all.
The template limit change means there's 16,000+ blocks per theme from just 1 section 1 block each template.
Infer from that the complications shopify faces that they wont discuss.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Is there any update on this case? I've got the same problem. This is an absolutely NO GO! Why does shopify not fix it? Is there any reason to limit blocks to 16? I dont get it. So many are struggling with this limit. PLEASE FIX THIS BUG!
The only feedback so far is from my clients complaining about how bad the back-end system is now for some sections where I need more than 16 blocks.
Shopify seem to just be ignoring this which honestly makes no sense to me.
My workaround has been to create a larger block and allow for 16 of those.
So say you need to be able to repeat a title but it needs to repeat a total of 20 times. Then wrap 2x titles in the block which would give you a total of 32 titles over 16 sections and just apply if statements to check if the second field is there. It makes the back-end gross and the code is gross too but it works.
We've designed / developed multiple themes with a handful of sections that need more than 16 blocks. A simple example would be the FAQs section that's on all of our sites. We were feeling good about the 2.0 updates, but this has created a huge issue for all of or themes. If this limitation sticks it would be enough for us to go headless / migrate to a new platform in the future. Any idea if Shopify is working on increasing the limit to something reasonable?
Hello
I would just like to add our voice to this.
16 blocks .. way to few to cover Frequently Asked Questions.
Our Theme developer explained what they could, but suggested we contact Shopify support. For the group here is their reply. Feb 2022.
".. I can totally understand that having this limitation adjusted can have a negative effect on your store in being unable to create an effective FAQ page. At this stage, this is something our developers are looking to increase, but currently, it is a universal part of the platform which means many merchants are dealing with it also. What I am going to do though is pass on your feedback to our developers so they can continue to see that this is an ongoing issue, ... "
Went on to suggest we look at the App store ... another App is not what we are looking for. PageFly and Layout Hub (who we use) at the time of writing this do not have FAQ pages - possible "solutions" but not FAQ templates.
Come on Shopify get this one sorted. Love the platform and the community but this was an error I feel.
Gareth AJ
This is indeed a downgrade and unfortunately I rarely see Shopify answer in the forum, so I would not expect anything from this thread except discussing the topic.
I can imagine Shopify wants us to use metafields with dynamic sources, but to be honest, the metafields interface is unconvenient to use, and in my opinion this feature is uncomplete and frustrating to use. I'll take product metafields as an example, since I suppose it's the most popular. Let's imagine a merchant wants to customize a section's content for each product pages (texts, images, section layout, colors etc.) :
• What I used to do before / still do:
I assign each section blocks to a uniq product ID. This way, every block settings will only apply to the product page we are visiting. The schema looks like this:
"blocks": [
{
"type": "new-product",
"name": "New product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product page"
},
{
"type": "text",
"id": "product_id",
"label": "Product ID* (required)"
},
{
"type": "header",
"content": "Product settings bellow..."
},
{
"type": "text",
"id": "text",
"label": "Custom text"
}
]
}
]
Note: The product attribute is optional, this is just to generate an image + product title on the block (better UX), and also because of Shopify's limit of 50 products per page, we'll use product id instead.
Then, at the very begining of the section, I'll loop over all blocks and use the one that matches current product page (retrieving its index). Something like that:
{%- comment -%}PRODUCT INDEX CAPTURE{%- endcomment -%}
{%- for block in section.blocks -%}
{%- assign block_product_id = block.settings.product_id | plus: 0 -%}
{%- if block_product_id == product.id -%}
{%- assign index = forloop.index0 -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
Product text: {{ section.blocks[index].settings.text }}
I don't know much about the downside of this method as far as performances goes, but from my testings, it's very hard to notice any difference at all, and it's very easy and satisfying to use.
• What I need to do now:
Now, since I'm limited to 16 blocks, this method is not as reliable. So I have to create metafields definition for every store (repetitive & annoying process). And here's the deal breaker: the merchant can't customize the section in the editor. He has to go constantly between product backoffice and Shopify editor. Thus, he can't really edit in real time and change content on the fly... this sucks to say the least.
• What can also be done:
There's also a third way to work with metafields that is sometimes better than metafield definitions. The idea is to make metafields accessible directly from the Shopify editor, without using the definition feature, but going through a custom link instead. The schema looks like this:
{
"type": "paragraph",
"content": "[Access metafields](/admin/bulk?resource_name=Product&edit=metafields.global.test%3Aboolean%2Cmetafields.global.test_xyz%3Astring)"
}
Note: the link will redirect to metafields bulk editor
In this case, the merchant will be able to add / modify the given metafields (1st is a boolean, 2nd is string) and this can be accessed like any metafields:
Boolean: {{ product.metafields.global.test }}
String: {{ product.metafields.global.test_xyz }}
This allows to modify all product metafields in bulk, and access the metafield editor directly from the Shopify editor (thanks to the custom link) - which is on its own better than creating definitions and then going to each product in the backoffice.
The downside is that it takes some effort to customize the url, it is not documented and the bulk editor UX is poor. That being said, there are a bunch of options like select, boolean, numbers, money, strings (there's some info here: https://medium.com/@dev.madeforcode/shopify-metafield-bulk-editor-991d900404dc)
• Suggestion:
I guess, when a merchant is on a product page / collection page / blog page etc., Shopify should allow the merchant to update the matching metafields directly within the editor. I don't know how, but that's the idea. Just like there is a "Theme settings" option at the bottom of every section (that generates only the settings that are used in the section), I think there should be a way to generate metafields based on the page we are on. This would make metafields and dynamic sources actually usable for this use case, and many more. Actually, it would make metafields extraordinary. I'll be waiting for this day for the rest of my life 😉
Totally, agree, if they want us to use metafields, then make them easy to use.
Pleasantly surprised that we can now add up to 50 blocks. Not sure when that happens, but it's good to have this back, 16 was really a hard limit easily reached even in some simple use case I came across.
Thank you for updating - I'll take a look. Our Theme developers created a work around, but its great if this has been resolved by Shopify. They are aware of these discussions, I'd of thought it would one of the 1st places to update. Not seen it mentioned in Changelog either. Thank you Max