remove line on shop page and reduce category type size

Hi there,

Looking for help with some custom CSS for an ecommerce site. 

I’m looking to remove the grey horizontal line and reduce the font size of the category titles.

🙃

Please post the URL to the page with the grey horizontal lines.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Thanks

On 11/5/2020 at 10:26 AM, CASKATE said:

I’m looking to remove the grey horizontal line

Please add the following Design > Custom CSS.

@media screen and ( min-width: 576px ) {

  .products.collection-content-wrapper .nested-category-children::after {
  
    all: unset;
    
    }
  }

On 11/5/2020 at 10:26 AM, CASKATE said:

reduce the font size of the category titles

I was unable to find the page with category titles on it. The URL posted is for the backend and we need access to the front end. To post the front end URL please take your site into Full Preview when you are on the page with categories. Then copy that URL from the address bar and post it here.

Great!!

Thanks for the help.

https://viola-seahorse-l65k.squarespace.com/shop

I don't not see the gray lines or categories shown in the image of the original post.

Sorry for the delayed response Thomas!

The grey line isn’t visible anymore the suggested code ^^ worked perfectly! Thanks fro that!!

The categories are still there, I have just been changing titles. 

https://viola-seahorse-l65k.squarespace.com/shop

Add the following to your Custom CSS.

.products-list .nested-category-children {

  font-size: 0.75rem;
  
  }

Let us know how it goes.

Worked perfectly!! ☺️   Thank you!

One final question, is it possible to change the colour of the vertical bar between categories or even remove it entirely? Ideally remove entirely.

Thank you so much for your help!

Add the following to your Custom CSS.

.products.collection-content-wrapper .breadcrumb-separator {

  display: none;
  
  }

Let us know how it goes.

Worked perfectly!!

👌

Just wondering if the spacing between categories and the shop can be reduced on desktop only?

@creedon

I have another question in relation to the categories titles, currently they are just visible on the general shop page is there a way to have them appear at the top of each category page also?

Thanks for all of your help to date!! Really appreciate it.

16 hours ago, CASKATE said:

Just wondering if the spacing between categories and the shop can be reduced on desktop only?

Please post your site-wide password and we can take a look at your issues.

On 11/20/2020 at 9:47 AM, CASKATE said:

I have another question in relation to the categories titles, currently they are just visible on the general shop page is there a way to have them appear at the top of each category page also?

I think you would need custom Javascript code to basically replicate the category titles down to the category pages. Not impossible but not an insignificant task. Every time you made a change to categories you would need to update the custom code with new categories.

Okay, I see what you mean, seems strange having a category nav, that isn’t accessible from each page. 

I was looking at something like this: 
https://kordalstudio.com/collections/fw20-1st-release

Thanks for all of your time on the above. 

Hello ! I tried the code above and didn't work. If someone is willing to help, I will unlock my shop page.

25 minutes ago, BANKRUPTLOVE said:

Hello ! I tried the code above and didn't work.

Please post the URL to your shop page.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

I actually got it figured out! But thank you for responding.

I do have another question but unrelated to this issue. (Matching navigation with the text blocks Im using as a "footer navigation")

1 minute ago, BANKRUPTLOVE said:

I do have another question but unrelated to this issue. (Matching navigation with the text blocks Im using as a "footer navigation")

I suggest starting a new thread with your question.

Figured so! Thank you

On 11/6/2020 at 6:44 PM, creedon said:

Please add the following Design > Custom CSS.

@media screen and ( min-width: 576px ) {

  .products.collection-content-wrapper .nested-category-children::after {
  
    all: unset;
    
    }
  }

 

I was unable to find the page with category titles on it. The URL posted is for the backend and we need access to the front end. To post the front end URL please take your site into Full Preview when you are on the page with categories. Then copy that URL from the address bar and post it here.

Great, thanks!

Hello, is there a possibility to remove the product titels on the store page completely.

Thank you in advance!

On 4/27/2022 at 4:28 AM, JensVDD said:

Hello, is there a possibility to remove the product titels on the store page completely.

 

Thank you in advance!

Can you share link to store page?

Thank you for this code below to remove the horizontal line on the store page provided above which worked great for me, my question is can I remove the same line from store category pages like this one?: https://chriscoombes.cc/collect/park (Interestingly the line doesn't show on category pages when I have subcategories like here: https://chriscoombes.cc/collect/barbican )

@media screen and ( min-width: 576px ) {

  .products.collection-content-wrapper .nested-category-children::after {
  
    all: unset;
    
    }
  }

On 7/8/2024 at 11:18 PM, Anon7856874 said:

Thank you for this code below to remove the horizontal line on the store page provided above which worked great for me, my question is can I remove the same line from store category pages like this one?: https://chriscoombes.cc/collect/park (Interestingly the line doesn't show on category pages when I have subcategories like here: https://chriscoombes.cc/collect/barbican )

@media screen and ( min-width: 576px ) {

  .products.collection-content-wrapper .nested-category-children::after {
  
    all: unset;
    
    }
  }

 

You can use this CSS code to remove line

.products.collection-content-wrapper .nested-category-title-padding::after {
    display: none;
}