Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How to Keep store navigation on category pages and not just main store page?


Witn

Recommended Posts

Site URL: https://impala-nectarine-4s9h.squarespace.com/config/design

Hi, 

 

I have created multiple stores within my site for different styles of product and then put categories within each store. When I go onto the main page of my store, there is a menu linking to all the different categories of products, but when you go onto the page of a category, the navigation to all the other categories dissappears, is it possible to keep this navigation on all category pages and not just the main store page?

Link to post
  • Replies 41
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Can you share site url?

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

Add to Last Line in Code Injection Footer <script> $(document).ready(function() { $('div#block-3994033c75bb9362abb4').insertBefore('.ProductItem'); }); </script>  

Posted Images

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Link to post

Password1 is the password! If you go onto one of the subsections and navigate to each part of that specific store, you will be able to see that the navigation is lost and you would have to go back to the main store page to navigate to other sections. 

 

Thanks!

Link to post

 

14 hours ago, Witn said:

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
}

 

Link to post
On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS


.nested-category-tree-wrapper {
    display: flex !important;
}

 

I am very interested in this also. I have four store pages, I call them "Collections:" they all have unique products listed which are different in design to the other pages or "Collections:" the issue I am having is that when you are on one store "Collection: Attack-the-Block" for example. There is no navigation in the side bar to access the other store pages "Collection: Park Brewing". I Have created images at the bottom of the page, and top of the page previously to provide links to access the other store pages "collections:" and all the store pages are accessible in the drop down menu in the navigation.

I would like the store pages to be included above my categories in the side navigation. so that it would be structured like this. 

The active Collection page would have to be bold. It would be ideal to have the categories in a drop down menu from the collection pages. But not necessary. I would just like to have all the store pages be accessible from every page in the side bar. And always remain in the order as above. 
 
 
access: "password"

 

Link to post
On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS


.nested-category-tree-wrapper {
    display: flex !important;
}

 

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

Link to post
Just now, Park_Brewing_Company said:

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

NVM mind, changed float to inherit in this code.

.nested-category-tree-wrapper {
    display: flex !important;
}
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
    margin-right: 40px;
      margin-bottom: 15px;
}

Link to post

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

Edited by CASKATE
Link to post
34 minutes ago, CASKATE said:

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

This sets it to the top for mobile only. this is what I have. sorry, never copied this part of the code.

 

@media screen and (max-width: 640px) {

.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {

    display: none !important;

  } }

 

.products.collection-content-wrapper .nested-category-tree-wrapper>ul {

    display: none !important;

}

 

Link to post

redirects me to this url, https://viola-seahorse-l65k.squarespace.com/config/?frameUrl=%2Fshop

not sure what the issue is, but the code I posted will nest the sidebar on mobile, and you can get it to position at top only on mobile. 

 

this is the full code and how I have mine structured.

 

//NEST-CATEGORY-MOBILE-HIDE-CATEGORY///
@media screen and (max-width: 640px) {
.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {
    display: none !important;
  } }
  
.nested-category-tree-wrapper {
    display: flex !important;
}
@media screen and (max-width: 640px) {
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
      margin-top: 30px;  
     margin-right: 40px;
      margin-bottom: 15px;
  } }

.products.collection-content-wrapper .nested-category-tree-wrapper { 
     margin-right: 20px;
  }
 

Link to post

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 

.nested-category-tree-wrapper {
    display: flex !important;
}

 

 

Edited by CASKATE
Link to post
On 11/23/2020 at 1:31 AM, CASKATE said:

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 


.nested-category-tree-wrapper {
    display: flex !important;
}

 

 

Can you share site url?

Link to post

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}
section.products.collection-content-wrapper.products-list {
    display: flex;
    flex-direction: column;
}
.products.collection-content-wrapper .nested-category-tree-wrapper>ul {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto;
}

 

Link to post

I have the same problem: need the whole list of categories to appear on category pages not just the main shop page. Despite copying the CSS code nothing seems to have changed?

Website is: https://www.theartisanstudio.uk/onlineshop

Category page example: https://www.theartisanstudio.uk/onlineshop/bags-non-leather

Instead of:

All Products /

Bags non-leather

I would like to display the enclosed partial screenshot (like the main shop page).

 

Screenshot 2020-12-07 at 15.12.04.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...