Custom field as a filter in Tickets list page on Portal

Hi, I need some help pointers on how to achieve something,
We use freshdesk, we’ve created a custom ticket field called Products so that we can register which product the query is relating to, this is a drop down field.
What we are trying to do is to enable the users of the portal to filter their tickets based on this custom field, so currently they can filter their tickets by Status or by the name of the person that created the ticket, we would like to have another filter next to that to filter on the Product custom field we created.

According to freshdesk support team this is possible by customizing the Portal Tickets List page and I can see how this is done, but I cannot get the correct syntax for the code to link to the correct custom field, has someone done something before and share the solution maybe?
Or any pointers has to where to get info on this?

Thank you

If I inspect the ticket page, I can this is the code about filtering (open/pending, closed etc).
Is it actually possible to get different data on the tickets page by editing the code in the customize portal page?
Everytime I try and edit one of the href it seems to break the filtering.

Open or Pending
<div class="dropdown" id="ticket-filters">  
  	<a href="#" class="list-lead dropdown-toggle" data-toggle="dropdown">
  	Open or Pending <i class="caret"></i>
  	</a>
    <ul class="dropdown-menu " role="menu" aria-labelledby="dropdownMenu"><li><a href="*/support/tickets/filter?requested_by=0&amp;wf_filter=all*" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">All Tickets</a></li><li class="selected" ><span class='icon ticksymbol'></span><a href="/support/tickets/filter?requested_by=0&amp;wf_filter=open_or_pending" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Open or Pending</a></li><li><a href="/support/tickets/filter?requested_by=0&amp;wf_filter=resolved_or_closed" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Resolved or Closed</a></li><li class="divider"></li><li><a href="/support/archive_tickets/filter?requested_by=0&amp;wf_filter=archived" data-loading-box="#ticket-list" data-method="get" data-remote="true" data-response-type="script">Archive</a></li></ul>
  </div>