How to remove the "all" category on the store

Site URL: https://www.straight-leg.com/shop

Hi everybody,

I have been able thanking your help in previous questions to remove the "all" word from my online store.

But the problem remain because actually I don't have the "all" word anymore but effectively I still have everything together.

 is that a way to avoid this? I actually would like that you clic in the online store and you go in one of the product lists i created. Let say "unique pieces" underlined. I think these summary when all the products are together is really ugly especially if i update different products with the same picture like i show in the attached image.

Thank for your help

Daniele

someone can help?

On 5/5/2021 at 8:30 PM, straight-leg said:

someone can help?

Add to Shop Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("document").ready(function() {
  $('li.category-item [href*="unique-pieces"]').ready(function() {
    $(this).click();
  });    
});
</script>

On 5/7/2021 at 12:38 PM, tuanphan said:

Add to Shop Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("document").ready(function() {
  $('li.category-item [href*="unique-pieces"]').ready(function() {
    $(this).click();
  });    
});
</script>

 

Hi Tuanphan,

Thanks for your help. When i put that coding it gives this Syntax error. (I attach picture)

I put it on the CSS custom page, am I wrong?

Thanks

16 hours ago, straight-leg said:

Hi Tuanphan,

Thanks for your help. When i put that coding it gives this Syntax error. (I attach picture)

I put it on the CSS custom page, am I wrong?

Thanks

Yes. You wrong. Your screenshot is Custom CSS, not Shop Page Header

Add to Shop Page Header

Also, do you want to fix these?

Site URL – https://www.straight-leg.com/

1. (Tablet-Shop Art) Change to 2-3 items/row?

2. (Products) Keep “Added” after clicking add to cart?

3. (Tablet-Drops) Center vertical text under announcement bar?

On 5/12/2021 at 5:09 AM, tuanphan said:

Yes. You wrong. Your screenshot is Custom CSS, not Shop Page Header

Add to Shop Page Header

 

Also, do you want to fix these?

Site URL – https://www.straight-leg.com/

1. (Tablet-Shop Art) Change to 2-3 items/row?

2. (Products) Keep “Added” after clicking add to cart?

3. (Tablet-Drops) Center vertical text under announcement bar?

I did the way you told me but actually nothing changed, i still have all the last items added all together in what it seems a "all category summary" that I don't want. i would like that you clic SHOP ART and you are let say in the first category UNIQUE PIECE maybe underlined and then you change clicking on let say canvas prints. (image attached)

To answer your questions:

1. (Tablet-Shop Art) Change to 2-3 items/row? I should already have 2 items on the mobile view

2. (Products) Keep “Added” after clicking add to cart? Yes could be absolutely good, because after 5 second it switches again to "add to cart"

3. (Tablet-Drops) Center vertical text under announcement bar? could be a good!

of course if you have any other tips would be greatly appreciated.

Thanks for your help

On 5/12/2021 at 5:09 AM, tuanphan said:

Yes. You wrong. Your screenshot is Custom CSS, not Shop Page Header

Add to Shop Page Header

 

Also, do you want to fix these?

Site URL – https://www.straight-leg.com/

1. (Tablet-Shop Art) Change to 2-3 items/row?

2. (Products) Keep “Added” after clicking add to cart?

3. (Tablet-Drops) Center vertical text under announcement bar?

just a remind! Thank you

I answered above

ah, my code missing some symbols. Use this new code. 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.category-item [href*="unique-pieces"]').ready(function() {
    $(this).click();
  });    
});
</script>

On 5/21/2021 at 4:24 PM, tuanphan said:

ah, my code missing some symbols. Use this new code. 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.category-item [href*="unique-pieces"]').ready(function() {
    $(this).click();
  });    
});
</script>

 

No actually didn't work, still show everything in the order i update the website and not going on a certain category (unique pieces in our case) when you clic on "shop art"

do you think we can still make it??

Thanks

On 5/21/2021 at 4:24 PM, tuanphan said:

ah, my code missing some symbols. Use this new code. 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.category-item [href*="unique-pieces"]').ready(function() {
    $(this).click();
  });    
});
</script>

 

any news? still doesnt work! Thank you

On 6/4/2021 at 11:31 AM, paul2009 said:

This is very easy to achieve. You do not need code.

Go to the PAGES panel and click the + icon beside MAIN NAVIGATION.

Choose Link.

In the Link box, add the following details and click SAVE:

The LINK TITLE is the name that you chose for the item in your navigation. The link /shop/unique-pieces is for the first category in your shop.

Now, move your original Shop Art store page (the one with the cart icon) from the MAIN NAVIGATION section into the NOT LINKED section. 

You should now have the functionality that you wanted. Clicking Shop Art should take you straight to the Unique Pieces section, with this highlighted in the category list on the left.

Hi paul,

Thanks for your precise help! It worked perfectly!!

On 6/4/2021 at 11:31 AM, paul2009 said:

This is very easy to achieve. You do not need code.

Go to the PAGES panel and click the + icon beside MAIN NAVIGATION.

Choose Link.

In the Link box, add the following details and click SAVE:

The LINK TITLE is the name that you chose for the item in your navigation. The link /shop/unique-pieces is for the first category in your shop.

Now, move your original Shop Art store page (the one with the cart icon) from the MAIN NAVIGATION section into the NOT LINKED section. 

You should now have the functionality that you wanted. Clicking Shop Art should take you straight to the Unique Pieces section, with this highlighted in the category list on the left.

Hi paul, i just realized now that though it's working perfectly on desktop, on mobile doesn't show the categories anymore.

To explain myself if you click on shop fashion, it will bring you on the first category (sweatshirts in my case) but I don't see anymore all the categories above to switch from one to another.

I attach image of before (images showed in order of adding despite categories) after (working perfectly as as i want on desktop but on mobile as you see all the categories disappear) . Can you help? 

Thanks in advance

23 minutes ago, straight-leg said:

If you click on shop fashion, it will bring you on the first category (sweatshirts in my case) but I don't see anymore all the categories above to switch from one to another.

This is the way that Squarespace Commerce works. 🙂

They completely remove the mobile category navigator when you click "into" a category. It only appears if you are at the top level of the store, like this:

If you still want to show the list of categories when you are viewing one of them, you could show them with something like this (add to Design > Custom CSS😞

@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-tree-wrapper {
    display: block; 
    float: none;
    text-align: center;
    max-width: 100%;
    margin-right: 0;
  }
}
.products.collection-content-wrapper .nested-category-children {
    display: none!important;
}

On 6/25/2021 at 6:52 PM, paul2009 said:

This is the way that Squarespace Commerce works. 🙂

They completely remove the mobile category navigator when you click "into" a category. It only appears if you are at the top level of the store, like this:

If you still want to show the list of categories when you are viewing one of them, you could show them with something like this (add to Design > Custom CSS😞

@media screen and (max-width: 575px) {
  .products.collection-content-wrapper .nested-category-tree-wrapper {
    display: block; 
    float: none;
    text-align: center;
    max-width: 100%;
    margin-right: 0;
  }
}
.products.collection-content-wrapper .nested-category-children {
    display: none!important;
}

 

Works perfectly!! Thank you! You are a saver!