kodacurrie Posted July 13, 2020 Share Posted July 13, 2020 Site URL: http://mattretzlaff.com Is there a way to re-order the product categories on the Shop page? I need them to be: All / Large Scale / Tabletop and Wall / Garden right now my site is password protected because it's not yet live pw: retzlaff Link to comment
rwp Posted July 13, 2020 Share Posted July 13, 2020 #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(1) { order: 1; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(2) { order: 2; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(3) { order: 7; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(4) { order: 4; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(5) { order: 3; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list span:nth-child(6) { order: 6; } #collection-5ee795ccc2a2f40b8c32d7d7 .category-filter-list li:nth-child(7) { order: 5; } Link to comment
kodacurrie Posted July 16, 2020 Author Share Posted July 16, 2020 Thank you! Worked perfectly. Link to comment
brandjarrett Posted August 1, 2020 Share Posted August 1, 2020 Hello! I'm looking to do the same thing: site: http://www.alycefayeoriginals.com/all password: tempshop7851 order: All Wire Sculpture Jewelry Other Thanks in advance for the help! Link to comment
tuanphan Posted August 1, 2020 Share Posted August 1, 2020 4 hours ago, brandjarrett said: Hello! I'm looking to do the same thing: site: http://www.alycefayeoriginals.com/all password: tempshop7851 order: All Wire Sculpture Jewelry Other Thanks in advance for the help! The link doesn't exist. Can you check? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
rwp Posted August 1, 2020 Share Posted August 1, 2020 7 hours ago, brandjarrett said: Hello! I'm looking to do the same thing: site: http://www.alycefayeoriginals.com/all password: tempshop7851 order: All Wire Sculpture Jewelry Other Thanks in advance for the help! .ProductList-filter-list { display: flex; flex-wrap: wrap; justify-content: center; } .ProductList-filter-list-item.ProductList-filter-list-item--all { order: 1; } .ProductList-filter-list-item:nth-child(2) { order: 3; } .ProductList-filter-list-item:nth-child(3) { order: 4; margin: 0; } .ProductList-filter-list-item:nth-child(4) { order: 2; margin-right: 15px; } brandjarrett 1 Link to comment
brandjarrett Posted August 1, 2020 Share Posted August 1, 2020 (edited) @rwp That worked brilliantly, thank you so much! @tuanphan my apologies, the ending url "/all" should have been removed. I'm all set now though, thank you. Edited August 1, 2020 by brandjarrett Link to comment
brandjarrett Posted August 1, 2020 Share Posted August 1, 2020 @rwp I'm actually seeing a slight issue on mobile; some categories are back-to-back now Also is there a way to hide the category dropdown menu on mobile? Link to comment
rwp Posted August 1, 2020 Share Posted August 1, 2020 I'll send updated code when I get to a computer Link to comment
rwp Posted August 1, 2020 Share Posted August 1, 2020 Change the code I sent to this: .ProductList-filter-list { display: flex; flex-wrap: wrap; justify-content: center; } .ProductList-filter-list-item.ProductList-filter-list-item--all { order: 1; } .ProductList-filter-list-item:nth-child(2) { order: 3; } .ProductList-filter-list-item:nth-child(3) { order: 4; } .ProductList-filter-list-item:nth-child(4) { order: 2; } .ProductList-filter-list-item { margin-left: 8px !important; margin-right: 8px !important; } Link to comment
brandjarrett Posted August 1, 2020 Share Posted August 1, 2020 That did it, thanks again! rwp 1 Link to comment
Solution paul2009 Posted August 30, 2020 Solution Share Posted August 30, 2020 If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps. If this helps you, please click "Like" below ⬇️ tuanphan, sophiaojha, hannahferrao57 and 2 others 3 1 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
brandjarrett Posted August 31, 2020 Share Posted August 31, 2020 On 8/30/2020 at 4:26 AM, paul2009 said: If you are using Squarespace 7.1, you can change the category order without code! There's a built-in panel where you can drag and drop the categories into the order that you prefer. For more information, see my post below. It includes a video sequence showing the steps. If this helps you, please click "Like" below ⬇️ I'm guessing for 7.0 you still use CSS, which I need more of now since I changed the category display from horizontal to left stacked. Can you help me amend the pervious CSS? http://www.alycefayeoriginals.com/wiresculpture pw: tempshop7851 Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 16 hours ago, brandjarrett said: I'm guessing for 7.0 you still use CSS, which I need more of now since I changed the category display from horizontal to left stacked. Can you help me amend the pervious CSS? http://www.alycefayeoriginals.com/wiresculpture pw: tempshop7851 Which order you want? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
brandjarrett Posted September 3, 2020 Share Posted September 3, 2020 On 9/1/2020 at 5:35 AM, tuanphan said: Which order you want? I know enough CSS to rearrange the order once it's set up, so let's say reverse alphabetical for now. Link to comment
tuanphan Posted September 3, 2020 Share Posted September 3, 2020 8 hours ago, brandjarrett said: I know enough CSS to rearrange the order once it's set up, so let's say reverse alphabetical for now. Hi. I see you solved? If no, which order what you want? All Black Copper Silver Tan White or..? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
camille Posted July 13, 2022 Share Posted July 13, 2022 Hi, I'm trying to do the same here, but I'm having some trouble... site url : https://www.fornogusto.com/boutique New order : Streetwear / Sacs / Goodies / Toutes Thanks in advance for your help ! Link to comment
tuanphan Posted July 13, 2022 Share Posted July 13, 2022 1 hour ago, camille said: Hi, I'm trying to do the same here, but I'm having some trouble... site url : https://www.fornogusto.com/boutique New order : Streetwear / Sacs / Goodies / Toutes Thanks in advance for your help ! Add to Design > Custom CSS @media screen and (min-width:641px) { ul.ProductList-filter-list { display: flex; flex-direction: column; } ul.ProductList-filter-list>li:nth-child(1) { order: 4; } ul.ProductList-filter-list>li:nth-child(2) { order: 3; } ul.ProductList-filter-list>li:nth-child(3) { order: 2; } } camille 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
camille Posted July 20, 2022 Share Posted July 20, 2022 Thank you again @tuanphan ! It works perfectly : ) Link to comment
CamilleOG Posted November 19, 2022 Share Posted November 19, 2022 Hello, I would also like to change the category order on this page : https://www.olive-groves.fr/huilesolive-bio-exception I'd like the new order to be : Tous / Fruité Délicat / Fruité Moyen / Fruité Intense / Andalousie / Ardèche / Campanie / Ligurie / Ombrie / Pouilles / Sicile / Toscane CSS or code would be fine. Anyone would be able to tell me what to do? Link to comment
creedon Posted November 19, 2022 Share Posted November 19, 2022 (edited) 22 hours ago, CamilleOG said: Anyone would be able to tell me what to do? 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.3 SS Version : 7.0 Template : Brine (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 11/20/2022 10:52:42 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 ) { /* Andalousie */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .ProductList-filter-list-item:nth-child( 3 ) { /* Ardèche */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 4 ) { /* Campanie */ -webkit-box-ordinal-group : 8; -ms-flex-order : 7; order : 7; } .ProductList-filter-list-item:nth-child( 5 ) { /* Fruité Délicat */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 6 ) { /* Fruité Intense */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 7 ) { /* Fruité Moyen */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .ProductList-filter-list-item:nth-child( 8 ) { /* Ligurie */ -webkit-box-ordinal-group : 9; -ms-flex-order : 8; order : 8; } .ProductList-filter-list-item:nth-child( 9 ) { /* Ombrie */ -webkit-box-ordinal-group : 10; -ms-flex-order : 9; order : 9; } .ProductList-filter-list-item:nth-child( 10 ) { /* Pouilles */ -webkit-box-ordinal-group : 11; -ms-flex-order : 10; order : 10; } .ProductList-filter-list-item:nth-child( 11 ) { /* Sicile */ -webkit-box-ordinal-group : 12; -ms-flex-order : 11; order : 11; } .ProductList-filter-list-item:nth-child( 12 ) { /* Toscane */ -webkit-box-ordinal-group : 13; -ms-flex-order : 12; order : 12; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ .ProductList-filter-list { flex-direction : column; } /* desktop */ @media only screen and ( min-width : 641px ) { .ProductList-filter-list { display : flex; } } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list { display : flex; } } </style> <!-- end reorder store categories --> Let us know how it goes. Edited November 20, 2022 by creedon version 3 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
CamilleOG Posted November 19, 2022 Share Posted November 19, 2022 Thanks @creedon, this did change the category order. However, not quite in the order I intended. Maybe I can tweak the code to adjust the order? Here is the desired order: TousFruité Délicat Fruité MoyenFruité IntenseAndalousieArdècheCampanieLigurieOmbriePouillesSicileToscane Link to comment
creedon Posted November 19, 2022 Share Posted November 19, 2022 47 minutes ago, CamilleOG said: this did change the category order. However, not quite in the order I intended. I have updated my code. There were some issues. Let us know how it goes. 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
CamilleOG Posted November 20, 2022 Share Posted November 20, 2022 10 hours ago, creedon said: I have updated my code. There were some issues. Let us know how it goes. Thanks for this. Ordering is almost good, the only item that is not in order is "Andalousie". Another issue is that on mobile the categories always show up, the accordeon no longer works. Any idea how to fix? Link to comment
creedon Posted November 20, 2022 Share Posted November 20, 2022 10 hours ago, CamilleOG said: Ordering is almost good, the only item that is not in order is "Andalousie". This is what I see when I use my code. My code order on the left, your order on the right. Quote Another issue is that on mobile the categories always show up, the accordeon no longer works. I believe I have addressed this issue. Thanks for the bug report. I have updated my code 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment