Jump to content

Categories to different pages on side of store page

Go to solution Solved by tuanphan,

Recommended Posts

Hi,

I was looking to see if there was a way, I could place my other store pages on the side next to the other categories displayed. For example, you could have categories like all, special, etc. I would like to keep this but next to it, it would have other categories that would take a person to a different page.

Link to comment
  • Solution
On 3/11/2022 at 11:35 PM, Guest_41 said:

Shop — Test Website (squarespace.com)
Password is 1234
I have also provided a picture of what may look like the end result. This was only done with a blank page template, but I would like to do this within the store.

Picture.jpg

I think we can use jQuery code to add other links into current side category nav links

Add to settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li><li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li>').appendTo('.nested-category-tree-wrapper>ul');
	});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
2 hours ago, tuanphan said:

I think we can use jQuery code to add other links into current side category nav links

Add to settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li><li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li>').appendTo('.nested-category-tree-wrapper>ul');
	});
</script>

 

Thanks! This was exactly what I was looking for. How would I change this to work for my shop?

Link to comment
7 hours ago, Guest_41 said:

Thanks! This was exactly what I was looking for. How would I change this to work for my shop?

In the code, you will see this

<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li><li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li>

It contains 2 category links

Quote

<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li>

and

Quote

<li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li>

If you need to add link 3, 4,...just add to current code

Quote

<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li><li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li><li class="category-item"><a href="/shop/apple" class="category-link root">Apple</a></li><li class="category-item"><a href="/shop/instagram" class="category-link root">Instagram</a></li>

/shop/instagram is category link

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 hours ago, tuanphan said:

In the code, you will see this

<li class="category-item"><a href="/shop/amazon" class="category-link root">Amazon</a></li><li class="category-item"><a href="/shop/fb" class="category-link root">FB</a></li>

It contains 2 category links

and

If you need to add link 3, 4,...just add to current code

/shop/instagram is category link

Thank you so much for your help I got this to work with the entire store.

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.