Jump to content

How to have the main landing page of of a store show images of categories instead of all products within the categories.

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://www.wingandwool.com/shop-the-farm

Hi,

When someone clicks on the "Shop" link from my homepage, I'd like that first store landing page to show pictures/links of the individual categories within the store which will take them to the individual category pages, rather than show pictures of all of the products within all of the categories in the entire store.  Is this possible?

Thank you so much!

Link to comment
  • Solution

I think it is possible.

Please see the following post and install the code cited there. The original poster also describes the difficulty in targeting CSS to the main store page vs category pages.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /*
  
    this ruleset is not active in SS Preview. to test it use private browsing
    < https://tinyurl.com/mrx6rs47 >
    
    */
    
  html:not( .squarespace-damask ) body:not( [data-store-category] ) .products.collection-content-wrapper .list-grid {
  
    display : none;
    
    }
    
  </style>

This is for v7.1.

Add a page section to your store page and use blocks to make the section look the way you want.

Let us know how it goes.

Edited by creedon
updated with better method

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 9 months later...

Hi @creedon for some reason it didn't work for me? All ended up being hidden and i can't have any product show up. Ideally i would like to be able to create a box for each category and sub-category and for that to lead me to the list of product within those categories. Can you please assist?

lukewildart.com

psw: Test123

Edited by FMLK
Link to comment

@creedon I've followed the above again and the outcome is not there yet. In the main shop page I have my two boxes that are linked to the categories but i still see the categories below. I would like to remove those in the initial view. Also, when i click on the box to go to a specific category i still see the boxes on top is there a way to hide them and only show the category? So to summarise, there are two issues:

1. I still see the categories below my category boxes on the top, would like to hide that on the main shop page.

2. once i click on the box i go to the specific category but i still see all the boxes. Is there a way to hide those once you enter into a category?

 

Thank you for your help!

FM

Link to comment
  • 1 year later...
  • 1 month later...
8 hours ago, ElleR said:

did you have an update for this please

I have not updated my code since I last updated my code.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 2/20/2024 at 4:24 AM, ElleR said:

I think we are all having the same issue that all products are being hidden.

It is the case that if you install the <style> code at the end of my post without installing the Target shop category pages with css cited previous to that, you will hide the products because the code installation is incomplete.

Also note that the intent of this code is to hide all products on the main store page and only show them on pages that are categories.

I just tested my code on my test site and it still works a treat!

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

Hi @creedon, I have a quick question. I am unable to open the url to install the twcsl? Could you please check it if there is any error with it or its on my side?

Im trying to do the same thing as was quoted originally in the post, after clicking on the store to have pictures representing each category, and after clicking on one, to be directed to a separate page with the products in that category/or can be a section under the pictures of categories. 

Any help would be appreciated!

 

Link to comment
  • 2 weeks later...

Hello there! 
I also have the same problem with my shop and I would like to show all my products in categories instead of showing them in the Shop, that's why I used the code I found on this page and after using the code of all my products It has been hidden. I would appreciate it if you could help me So that I can show my products by category on my site

Link to comment
On 4/1/2024 at 1:06 PM, FannyD said:

I am unable to open the url to install the twcsl? Could you please check it if there is any error with it or its on my side?

Sorry I missed this post. I believe I have address the issue. Please try the install process again.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
9 minutes ago, Pooneh said:

I would appreciate it if you could help me So that I can show my products by category on my site

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
1 hour ago, creedon said:

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Thank you so much.
I'm not sure, do you need the URL like this? My page is public.

https://www.poonjeestore.com/shop 

Link to comment
33 minutes ago, Pooneh said:

I'm not sure, do you need the URL like this? My page is public.

The URL is what we needed.

If you used the CSS in the solution post without installing the cited code ( JavaScript ) above it that would hide all your products on all pages because the code would be incomplete.

When the code is fully installed it is intended that the main store page or the All category is devoid of products so that you can build your own custom sections with text and images to link into your categories.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.