Ride Theme - Add Collection/Gender Filters to All Products Page

Store Design
, , ,
1

Hello! We are using the Ride theme for our Shopify store and would like to have a filter feature on the All Products page Parked Domain name on Hostinger DNS system. We managed to add some filters through the Shopify ‘Search and Discovery’ app for Color and Size, but it lacks the two additional filters we need: Collection and Gender. We’re hoping to find a code workaround for this issue.

It seems that the code we need to modify is in the main-collection-product-grid.liquid file. However, I’m not very familiar with coding and could use some assistance.

Could someone please guide me on how to add these filters by way of editing the code? If it’s a complex solution, even providing the code for adding just one filter (like Collection or Gender) or other possible workarounds would be great!

Thank you in advance!

Boldly Threaded

7ac63e.myshopify.com

Filter.png
Filter.png371×611 6.75 KB

Search and Discovery.png
Search and Discovery.png1028×544 19.1 KB

2

  1. Locate the main-collection-product-grid.liquid file: Look for the “Sections” folder in the left sidebar of the code editor. Within that folder, find and click on the “main-collection-product-grid.liquid” file. This file controls the display of products on the All Products page.

  2. Add filter options: Inside the “main-collection-product-grid.liquid” file, you’ll need to modify the code to add the additional filter options. Determine where you want the filter options to appear (e.g., above or beside the product grid). You can add HTML and liquid code to create the necessary filter elements.

  3. Filter by collection: To add a filter for the Collection, you’ll need to add a dropdown or checkbox list containing the available collections. Use the Shopify liquid code to retrieve the collections and display them as filter options. When a user selects a collection, you’ll need to modify the product query to filter products accordingly.

  4. Filter by gender: Similar to the Collection filter, you can add a dropdown or checkbox list for the Gender filter. You’ll need to create the filter options and modify the product query based on the selected gender.

  5. Modify the product query: In the code, find the section where the product query is defined. This is usually done using the {% for product in collection.products %} loop. You’ll need to modify this query to consider the selected filter options (collection and gender) and display the filtered products accordingly.

3

Hi @boldlythreaded

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

You can add filter using a shopify “Search & Discovery” app:

https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#edit-filters

Regards,

San