Shopify themes, liquid, logos, and UX
I'm using a custom metaobject to display location pins on a google map. There are 140+ entries, but doing the following, I am only getting the first 50 returned.
var specialLocations = [];
{% for location in shop.metaobjects.find_special_locations.values %}
specialLocations[{{ forloop.index0 }}] = {
"name" : "{{location.name}}",
"address" : "{{location.address}}",
"city" : "{{location.city}}",
"state" : "{{location.state}}",
"postal_code" : "{{location.postal_code}}",
"country" : "{{location.country}}"
}
{% endfor %}
I have not been able to find any documentation about this. Is there some kind of pagination or limits on how many metaobjects one could access in a theme?
How can you use the ".offset()" and limit method in liquid code?
-> shop.metaobjects.find_special_locations.offset(offset).limit(limit)
I get liquid syntax errors ("Expected end_of_string but found open_round")
You can paginate the metaobject definition values.
var specialLocations = [];
{% paginate shop.metaobjects.find_special_locations.values by 150 %}
{% for location in shop.metaobjects.find_special_locations.values %}
specialLocations[{{ forloop.index0 }}] = {
"name" : "{{location.name}}",
"address" : "{{location.address}}",
"city" : "{{location.city}}",
"state" : "{{location.state}}",
"postal_code" : "{{location.postal_code}}",
"country" : "{{location.country}}"
}
{% endfor %}
{% endpaginate %}
Are you certain this actually works? Like .. you actually tried it and observed a page with more than 50 metaobjects on it?
Asking because: I tried paginating mataobjects when the feature was first released and it definitely did not work. The liquid interpreter only ever gets 50 values no matter what pagination/filters are applied in the liquid code itself. Had to resort to hacky workarounds like back-end cron scripts making graphql calls to retrieve all metaobjects and save them in a separate place (postgres or json file) to paginate manually.
So it's possible you've discovered a newly added feature that isn't yet documented? At the time of this writing, the docs for the liquid paginate operator make no mentions of metaobjects in the list of 11 other supported entity types like products, blogs, etc..
I would love to know if that's the case, as this would make metaobjects actually usable for me, and let me get rid of those hacky workarounds.
Yes, I believe so.
I'm currently using this without issue:
{% paginate shop.metaobjects.colors.values by 250 %}
{% assign colors = shop.metaobjects.colors.values %}
{% if colors %}
{% style %}
:root {
{%- for color_entry in colors %}
--{{ color_entry.system.handle }}-color: {{ color_entry.color.value }};
{%- endfor -%}
}
{% endstyle %}
{% endif %}
{% endpaginate %}
DM me your PayPal, and I'll buy you lunch.
Thank you! 🙂
★ Did my post help? If yes, then please like and accept solution. ★
https://stephens.world
support@stephensworld.ca
You are my hero. Thank you!
Does this only work in custom sections or is there a way to it to work with the standard multicolumn section? If so, do I simply add this to the multicolumn.liquid? I am trying to output a metaobject list of company distributors to a page.
Thanks for any direction you can offer this newbie!
😃
Hi Trevor, hoping you can help us with this too, we tried your example code and still got back only 50 results:
{% section 'listallcounties_index' %}
{% paginate shop.metaobjects.gymnastics_clubs_by_county.values by 250 %}
{% assign gymnastics_clubs_by_county = shop.metaobjects.gymnastics_clubs_by_county.values %}
{% if gymnastics_clubs_by_county %}
{% style %}
:root {
{%- for gymnastics_clubs_by_county_entry in gymnastics_clubs_by_county %}
--{{ gymnastics_clubs_by_county_entry.system.handle }}-gymnastics_clubs_by_county: {{ gymnastics_clubs_by_county_entry.gymnastics_clubs_by_county.value }};
{%- endfor -%}
}
{% endstyle %}
{% endif %}
{% endpaginate %}
i reached out to Shopify, their response was that the paginate object is not supported by metaobjects.
https://shopify.dev/docs/api/liquid/tags/paginate
Tested this method and it works. Thank you for posting this solution.
Tested👍 it and its working
I'm was really struggling with getting my custom-coded reviews section to work.
Just tried what @trevorkerr posted, and somehow it's working now! 🙂
The trick was to do the {% assign %} part, after the pagination, instead of before it.
<ul class="list">
{% paginate shop.metaobjects.review.values by 1000 %}
{% assign review = shop.metaobjects.review.values | sort_natural: 'date' | reverse %}
{% for review in review %}
<li><p class="name">
<hr><div class="custom-reviews-first">
{% if review.rating == 5 %}
<img class="star" style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/1742/8221/files/Smile-240.png" width="40px" height="40px" alt="smile">
{% endif %}
{% if review.rating == 4 %}
<img class="star" style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/1742/8221/files/Smile-240.png" width="40px" height="40px" alt="smile">
{% endif %}
{% if review.rating == 3 %}
<img class="star" style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/1742/8221/files/Neutral-240.png" width="40px" height="40px" alt="neutral">
{% endif %}
{% if review.rating == 2 %}
<img class="star" style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/1742/8221/files/Neutral-240.png" width="40px" height="40px" alt="neutral">
{% endif %}
{% if review.rating == 1 %}
<img class="star" style="vertical-align:middle" src="https://cdn.shopify.com/s/files/1/1742/8221/files/Frown-240.png" width="40px" height="40px" alt="frown">
{% endif %}
<span class="custom-reviews-date">{{ review.date | date: '%B %d, %Y' }}</span>
</div>
<span class="custom-reviews-testimonial">{{ review.testimonial }}</span>
</p></li>
{% endfor %}
{% endpaginate %}
</ul>
You can see the section with metaobjects in action here: https://stephens.world/#testimonials
... took around 20 hours to code from scratch (first full section I've ever made) + $50 USD (for Matrixify to import past reviews as metaobjects), and now I don't need to purchase a paid reviews app when Shopify sunsets the old-school free review app.
#SUCCESS
★ Did my post help? If yes, then please like and accept solution. ★
https://stephens.world
support@stephensworld.ca
Hi! Could you share the code snippet for the pagination links below all of your reviews? I visited your page and am struggling to understand how the pagination is actually working without adding any parameters in the URL. Are you using javascript for this?
Thank you for any help you might be able to offer!
I'm using a large amount of Javascript to make this work (different coding snippets that I found from various tutorials/help-docs). Honestly, it's probably not the most efficient way to do things, but I'm just happy that it works.
I'm not fluent in Javascript, so I don't know exactly how it's working (and I probably wouldn't be able to troubleshoot something custom that you're working on), but here's the link to the primary resource that I referenced for it:
https://codepen.io/gregh/pen/dJvNqb
If you wanted the full set of coding that I'm using for my reviews section (so that you could try to reverse engineer it, or else just copy it completely), then you could make me an offer privately (my contact details are in the description of this post). The 'reviews' section as a whole (html + css + javascript) is over 125k characters ... again, I just played around with things until it started to work.
★ Did my post help? If yes, then please like and accept solution. ★
https://stephens.world
support@stephensworld.ca
no worries, i can repurpose the link you sent over, thanks!
my main issue is that i am using a shopify liquid snippet for the pagination of a metaobject and for some reason when i click on any of the links, shopify will cache the pagination object and only load the contents of the first page.
i know it's some weird caching issue because the pagination temporarily works every time i update the liquid file. as soon as i click any of the pagination links again or hit the refresh button, it stops working.
my thought process was that if i implemented this through javascript, like in your example, i can somehow bypass this weird caching issue.
every time i echo out the raw `paginate` object, it either spits out `PaginateDrop` or `#` when it's cached.
actually i just fixed it, apparently i can't reuse my pagination bar snippet when it's used for a metaboject because shopify will cache it. i hardcoded the snippet directly into the same section file where the paginate object is created and now it stopped caching the output, i won't need to use javascript for this anymore
just coming back to say that this actually was not resolved. Shopify does not support pagination for metaobjects so anything that currently works, even if partially, would be a hack.
The following link has documentation on which objects do support pagination:
https://shopify.dev/docs/api/liquid/tags/paginate
@eballeste_hero I found this docs too hence I did not try it at first. However, after finding this discussion I tried it, and it resolved my issue - thanks a lot @trevorkerr !
In my case I have a metaobject with 88 entries (each has 3 values, one of it are referenced products) and over 350 products spread across them.
I just wrapped my original for-loops in paginate by 250 & endpaginate so I could access the metaobjects.values after the first 50 iterations and it worked perfectly fine.
Thank you. I can confirm that this hack works, although there is no explanation why. It is definitely a hack, as the editor draws a yellow line under the "250" and notes "Pagination size must be a positive integer between 1 and 50."
It is absurd that there is no other way to access values by index over 50. Shopify, please fix this.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025