ziney Posted April 16, 2023 Share Posted April 16, 2023 Site URL: https://www.imanalias.com/store Hi, I would like to hide the All Category on top of my Page I tried some custom css code below but it did not work Thanks so much !! .ProductList-filter-list-item:first-child { display: none !important; } EarvinChong 1 Link to comment
paul2009 Posted April 16, 2023 Share Posted April 16, 2023 7 hours ago, ziney said: I would like to hide the All Category on top of my [Product List] Page It should be possible to hide it by adding the following to Design > Custom CSS: .ProductList-filter-list-item--all { display: none!important; } Did this help? Please give feedback by clicking an icon below ⬇️ EarvinChong and ziney 2 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
ziney Posted April 16, 2023 Author Share Posted April 16, 2023 @paul2009 Hello, thanks so much ! Not the text "ALL" is hidden but the products still appear. Do you know how to hide these so that the first products to appear are the digital singles please? 🙂 Link to comment
ziney Posted April 16, 2023 Author Share Posted April 16, 2023 @paul2009 FYI I don't have the option to change the top category in the page settings Link to comment
Solution paul2009 Posted April 16, 2023 Solution Share Posted April 16, 2023 57 minutes ago, ziney said: Not the text "ALL" is hidden but the products still appear. Do you know how to hide these so that the first products to appear are the digital singles please? I am not sure whether I understood your initial question. Did you want to hide the the word "ALL" from the product category filter, or did you want to display a different category of products? If you wanted to hide the "ALL" option from the the product category filter, the CSS that I provided will do this. If you would prefer the page to filter the products by a category when the page loads, you can do this by changing the link within the site navigation. To do this: Go to the PAGES panel. Drag the default 'Store' page to the NOT LINKED section. Click the "+" button beside the PRIMARY or MAIN NAVIGATION (depending on your template) and select 'Link' to create a new link. Give the new link the name "Store" and the URL "/store?category=Digital+Singles". After saving this new link, clicking on it should show the Digital Singles category. Let me know how you get on. Did this help? Please give feedback by clicking an icon below ⬇️ ziney and EarvinChong 2 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
ziney Posted April 16, 2023 Author Share Posted April 16, 2023 @paul2009 Thank you so much !!!!!!!! Last thing, do you happen to know how to change the order of the categories please? I'd like Marketing to be the last in the list please Link to comment
creedon Posted April 16, 2023 Share Posted April 16, 2023 What template is your site using? Go to Home > Help. Down at the bottom it will say. 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
ziney Posted April 16, 2023 Author Share Posted April 16, 2023 @creedon Hey Creedon ! Polaris template. thanks ! Link to comment
creedon Posted April 17, 2023 Share Posted April 17, 2023 Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection. <!-- begin reorder store categories Version : 0.3.6 SS Version : 7.0 Template : Polaris (Brine template family) Notes : the code is comprised of a number style tags. all of them are needed for the full effect to work code generated on 04/17/2023 12:28:00 AM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* DIGITAL SINGLES */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 3 ) { /* MARKETING */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 4 ) { /* MERCH */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } </style> <style> /* rulesets just for styling the store categories keep in mind the styling applies to categories before they are reordered so use their natural order number */ @media only screen and ( min-width : 641px ) { /* desktop */ /* by default the last category has no margin on the right. when you apply the reordering CSS then that no margin comes along for the ride. we need to get that margin back in there */ .ProductList-filter-list-item:last-child { margin-right : 25px; } /* by extension we now want to remove the right margin from whichever element is going to be last after reordering */ .ProductList-filter-list-item:nth-child( 3 ) { margin-right : 0; } } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .ProductList-filter-list { display : flex; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-list { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> Let us know how it goes. EarvinChong 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment