In Mobile View On Collection Pages, Shorten Text of Selected Filtered Item (Dawn 10.0 Theme)

[bet]

On mobile only, is there a way to remove the main filter category and just keep the filtered item in the button text of the filtered item selected?  I am trying to shorten the text on mobile. For example in the image I attached, I would like to only keep "Checkbook Software" and not "Spreadsheet Type: Checkbook Software" in the text of the button.

What css / html code changes are needed to make this work on the Shopify Dawn 10.0 theme at my website:

BuyExcelTemplates.com

Thank you.

[Dan-From-Ryviu]

Hi @bet 

You will need to custom code in Online store > Themes > Edit code > facets.liquid file to do that 

[bet]

Thank you, I was hoping for a simple fix but I can understand that this would would take some extra code. Thank you for your answer.

[Dan-From-Ryviu]

Most welcome

[bet · Accepted solution]

After looking into the facets.liquid that @Dan-From-Ryviu  noted, I found a solution that shortens the length of the filtered item button text for Dawn 10 theme on both mobile and desktop.

In the facets.liquid file, there are 4 separate lines of code that contain only:

{{ filter.label }}: {{ value.label | escape }}

In those 4 lines of code, delete

{{ filter.label }}:

See example filter from my website in the link below:

Budget Spreadsheet

So instead of:

"Spreadsheet Type: Budget Spreadsheet with Checkbook"

the filtered item button text is now shortened to:

"Budget Spreadsheet with Checkbook"