Streaming live at 10am (PST)

CMS Problem with an A-Z Page


Hi there,

I do have a CMS solution that provides about 220 shop partner names.
Now there is a requirement to display all shops, sorted by letter (from A to Z) each visible under the correspondend index letter.

Like this:

Right now, there is no solution to display this kind of information on one page because of the "only 10 dynamic list" restriction, right?
I only thought about having different dynamic lists, each with a filter "index letter" but I can only display 10 letters, not all of them.

Any ideas?
Thanks in advance,


Display all in a single list, then use JavaScript to add headers.


Thx. But I cant use one single list, because its limited to 100 data entries. Also how should I separate entries between the different indexes?


In that case you may split into two lists, A-M and N-Z. The answer for any unsupported functionality is always JavaScript - but I can't tell you how to do that without knowing how your website looks.


Having three dynamic collections under each other I can display (most) of all shop links.

I have the layout as a fake (because there are not all shops and index letters shown) page, what it finally should look like this:
(dynamic collections filtered by a reference letter that is within the shop template collection).


Try contacting to see if they can extend your limit


For your first link, this is the JavaScript you need (try pasting this in the console and hit enter):

var curr = '';
$('.w-dyn-items').children().each(function() {
  var f = $(this).text().charAt(0);
  if(!isNaN(f) || f == curr) return;
  curr = f;
    'clear': 'both',
    'padding-left': '10px'

How to install this? Wrap the above in script tags and ready code like this:

var Webflow = Webflow || [];
Webflow.push(function() {
  var curr = '';
  $('.w-dyn-items').children().each(function() {
    var f = $(this).text().charAt(0);
    if(!isNaN(f) || f == curr) return;
    curr = f;
      'clear': 'both',
      'padding-left': '10px'

Then paste it into your page settings, in the field called "Custom Code before body tag".


Awesome man, thank you very much!!!!


I see that it works for you, have you tried it with the three collections?


Not yet, trying it now :stuck_out_tongue_winking_eye:

Its okay because its just for demoing purpose - in the final version there should be a possibility to have a "a to z" inpage navigation menu, click one of the letters and page scroll to the correspondend anchor ...


It works perfect !!! :).
Only thing is that I also have non letters in my database for shops that begin with 1 or another number. The script cant handle that yet. The index letter for that is the number 1.



You could add a static h1 title for the first few items, before the list. Would that work?

Also, I just noticed my script automatically skips over non-existent alphabets like Q :smile:


You can amend this part of the script to add an ID for each of the category titles:


change to:

$('<h1 id="'+curr+'">'+curr+'</h1>')

Then, you can add this to the link of your testlink menu item. Example for link "A":



Works like a charm :).

p.s. yea but thank god i do not have a shop item starting with "Q......" :stuck_out_tongue: