Jump to content

Make product categories act like filters without loading the page again and again

Recommended Posts

Site URL: https://www.elgalgorestaurante.com/es/para-llevar


I would like to make my website more user friendly but the product page is a big headache.

To help my customers find the best meal I use the category option as a filter but when using it, it loads the age again and again.


The filter works but every time you choose a type of meal, you have to scroll down.

How can I change that?

I suppose that I have to use anchors links but I don't know where to put then and make then work.

Someone has an idea ?



Link to comment
  • 4 weeks later...

@Yoline, I am having the same problem.
I agree, it's annoying to have the page reload to the top each time a category is chosen. 
I want my customers to easily switch between categories without having to scroll down from the top of the page each time. 

Have you found an answer by contacting Squarespace support? Or have you privately emailed/messaged any of the community developers? 
I'm surprised this question hasn't been asked and answered before.

I will contact Squarespace support when they are available. But I will directly ask some of the community developers... 
@tuanphan @rwp @paul2009


I agree with you that anchor links are part of the solution. 
I know how to add an anchor link using a code block right above the categories, but I don't know how to change where the categories link to. 



I've even tried looking at the Inspector, but I don't have any experience coding.


Here's my website: www.BrendanAlexPhoenix.com
Version 7.0– York family (Jones template)
And here's the product page with categories: www.BrendanAlexPhoenix.com/prints
(I have three product pages: Cards/Prints/Free)

I wonder if this has to be done via the 'Code Injection' under 'Advance' for each product page. 

Hopefully we can get this solved sooner than later this time. 🙂

Solving this problem would greatly help my customers. 


Edited by CptFeeny
Link to comment

It should work. Is the site 7.1?

Click the link in my signature. Click the codepen link on my page.

There should be a pen called Scroll to products on cat change.

See if that works.

Don't forget to follow the instructions in my signature for setting up jQuery.

Edited by rwp
Link to comment
  • 3 weeks later...

Hi @rwp,

I'm trying to do the same thing but failed.

I'm on 7.1 and used the following code on Code Injection / Header:



$(document).ready(function() {
  var catLink = $('a.category-filter-link.category-filter-link-all');
  var _href = $(catLink).attr("href");
  $(catLink).attr("href", _href + '?');

  var urlCat = window.location.href.split("?")[1];
  if (urlCat !== undefined) {
    var prodTop = $('section:nth-of-type(2)')
      scrollTop: $(prodTop).offset().top
    }, 0);


I'm not familiar with coding. Could you help me?


Link to comment
  • 1 year later...
On 11/1/2021 at 9:03 PM, Cozen said:

Hello, I am having similar issue i tried this code on this page but didn't work for me. can somebody help please. i am on 7.1. @rwp @tuanphan

Can you share link to your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
  • 2 weeks later...
On 2/23/2023 at 2:01 AM, DreamrW said:

I need help with the same! 

Haven't tried the code yet as I expect it needs to change....



Can you share link to shop page? I don't see any products on this link

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
2 minutes ago, lottydotty said:

What "filter plugin" was used

@lottydotty It is the Universal Filter plugin.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.