Using Liquid to Create a New Table Row Each Time a New Product is Added

Technical Q&A

Topic summary

A developer needs to automatically generate table rows for collection pages displaying 800+ products, similar to Uline.com’s layout. They want to avoid manually coding each row and instead use a loop that dynamically creates rows as products are added.

Proposed Solution:

  • Use Liquid’s {% for product in collection.products %} loop within a <table> structure
  • Place the code in the collection.liquid template file
  • Each iteration creates table cells (<td>) populated with product data like {{ product.title }}

Current Status:

  • Basic code example provided showing the loop structure
  • Implementation location clarified (collection.liquid template)
  • Another user expressed interest in the same functionality
  • No confirmation yet on whether the solution was successfully implemented
Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I have a client would will have over 800+ products and would like to have table in their collection pages like Uline.com or this image here:

Screen Shot 2019-11-19 at 5.44.08 PM.png
Screen Shot 2019-11-19 at 5.44.08 PM.png2874×1172 263 KB

I would like to have rows be automagically created each time a new product is added to the collection. The actual data within the rows shouldn’t be an issue, but I’m not 100% sure about the rows.

I’ve created smaller if else statements that had a limit, but I’m hoping to create some sort of a loop so we can create a few lines of code for one row once instead of manually adding more code each time we add a new product.

Any advice is appreciated. Thanks so much in advance!

2

Hi corroadesigns,

if you want to list all products of your collection on your page, use this:

<table>
  <tr>
          {% for product in collection.products %}
        <td>{{ product.title }}</td>
                  <td>...</td>
          {% endfor %}
   </tr>
</table>

Regards,

Daniel

1 Like
3

Where do you add this code?

4

@adventmedia

Add this code in the template ‘collection.liquid’. This way it appears on your collection page.

5

Did you ever get this working? I need the exact same thing, Uline has the closest version of what I need.