CamilleOG Posted November 20, 2022 Share Posted November 20, 2022 1 hour ago, creedon said: This is what I see when I use my code. My code order on the left, your order on the right. I believe I have addressed this issue. Thanks for the bug report. I have updated my code again. Both issues fixed, many thanks @creedon , very helpful! creedon 1 Link to comment
CamilleOG Posted February 2, 2023 Share Posted February 2, 2023 On 11/20/2022 at 8:20 PM, creedon said: This is what I see when I use my code. My code order on the left, your order on the right. I believe I have addressed this issue. Thanks for the bug report. I have updated my code again. Hello, I would now need to fix the category order on another similar website : https://olive-groves.sg/shopoliveoils I have tried to adapt the code provided by @creedon above, but with no success! The category order would need to be: DELICATE FRUITY MEDIUM FRUITY ROBUST FRUITY FRANCE ITALY SPAIN GIFT SETS Would you be able to help adapting the code for this page? Link to comment
creedon Posted February 2, 2023 Share Posted February 2, 2023 9 hours ago, CamilleOG said: Would you be able to help adapting the code for this page? 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 02/02/2023 02:38:58 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* DELICATE FRUITY */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 3 ) { /* FRANCE */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .ProductList-filter-list-item:nth-child( 4 ) { /* GIFT SETS */ -webkit-box-ordinal-group : 9; -ms-flex-order : 8; order : 8; } .ProductList-filter-list-item:nth-child( 5 ) { /* ITALY */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 6 ) { /* MEDIUM FRUITY */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .ProductList-filter-list-item:nth-child( 7 ) { /* ROBUST FRUITY */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 8 ) { /* SPAIN */ -webkit-box-ordinal-group : 8; -ms-flex-order : 7; order : 7; } </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; flex-direction : column; } } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> 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 February 3, 2023 Share Posted February 3, 2023 14 hours ago, creedon said: 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 02/02/2023 02:38:58 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .ProductList-filter-list-item:nth-child( 2 ) { /* DELICATE FRUITY */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 3 ) { /* FRANCE */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .ProductList-filter-list-item:nth-child( 4 ) { /* GIFT SETS */ -webkit-box-ordinal-group : 9; -ms-flex-order : 8; order : 8; } .ProductList-filter-list-item:nth-child( 5 ) { /* ITALY */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 6 ) { /* MEDIUM FRUITY */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .ProductList-filter-list-item:nth-child( 7 ) { /* ROBUST FRUITY */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 8 ) { /* SPAIN */ -webkit-box-ordinal-group : 8; -ms-flex-order : 7; order : 7; } </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; flex-direction : column; } } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-dropdownToggle-checkbox:checked ~ .ProductList-filter-list { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> Let us know how it goes. Many thanks @creedon, it worked perfectly! creedon 1 Link to comment
Maqu Posted July 17, 2023 Share Posted July 17, 2023 can someone help me with this? How to change the order of the categories on the shop page? Thank you so much. Link to comment
Maqu Posted July 17, 2023 Share Posted July 17, 2023 Could someone please help me with the same? Thank you in advance https://www.bymaqu.com/shop In this order: _SALE DRESSES TOPS T-SHIRTS ALPACA JUMPERS JUMPERS BLOUSES PANTS SHORTS SKIRTS LEGGINGS COATS JACKETS SHOES JEWELLRY ACCESSORIES FUNGISION COLLECTION VOUCHER Link to comment
tuanphan Posted July 19, 2023 Share Posted July 19, 2023 On 7/17/2023 at 10:25 PM, Maqu said: Could someone please help me with the same? Thank you in advance https://www.bymaqu.com/shop In this order: _SALE DRESSES TOPS T-SHIRTS ALPACA JUMPERS JUMPERS BLOUSES PANTS SHORTS SKIRTS LEGGINGS COATS JACKETS SHOES JEWELLRY ACCESSORIES FUNGISION COLLECTION VOUCHER How about "All", above _SALE or? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
creedon Posted July 19, 2023 Share Posted July 19, 2023 On 7/17/2023 at 8:25 AM, Maqu said: help me with the same? One thing I noticed as I was trying to come up with some code was that there seems to be an empty category. Can you check that and get rid of it or give it a name? Let me know if you fix that and I can take another run at it. tuanphan 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
angela0anderson Posted August 21, 2023 Share Posted August 21, 2023 Can anybody please help me change the order of my categories? 😪 I'd like them in order by grade, starting with Kindergarten and going up to 12th Grade, (picture below). Please don't tell me to switch to 7.1, I've tried and I've decided to wait till the next upgrade. Here is the link to the product page I'm stuck on: https://www.befa.com/social-emotional-learning Link to comment
creedon Posted August 21, 2023 Share Posted August 21, 2023 43 minutes ago, angela0anderson said: Can anybody please help me change the order of my categories? 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 : Bedford (Bedford 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 08/20/2023 08:47:52 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 4 ) { /* 10th Grade */ -webkit-box-ordinal-group : 13; -ms-flex-order : 12; order : 12; } .category-nav-links li:nth-child( 5 ) { /* 11th Grade */ -webkit-box-ordinal-group : 14; -ms-flex-order : 13; order : 13; } .category-nav-links li:nth-child( 6 ) { /* 12th Grade */ -webkit-box-ordinal-group : 15; -ms-flex-order : 14; order : 14; } .category-nav-links li:nth-child( 7 ) { /* 1st Grade */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 8 ) { /* 2nd Grade */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .category-nav-links li:nth-child( 9 ) { /* 3rd Grade */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .category-nav-links li:nth-child( 10 ) { /* 4th Grade */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .category-nav-links li:nth-child( 11 ) { /* 5th Grade */ -webkit-box-ordinal-group : 8; -ms-flex-order : 7; order : 7; } .category-nav-links li:nth-child( 12 ) { /* 6th Grade */ -webkit-box-ordinal-group : 9; -ms-flex-order : 8; order : 8; } .category-nav-links li:nth-child( 13 ) { /* 7th Grade */ -webkit-box-ordinal-group : 10; -ms-flex-order : 9; order : 9; } .category-nav-links li:nth-child( 14 ) { /* 8th Grade */ -webkit-box-ordinal-group : 11; -ms-flex-order : 10; order : 10; } .category-nav-links li:nth-child( 15 ) { /* 9th Grade */ -webkit-box-ordinal-group : 12; -ms-flex-order : 11; order : 11; } .category-nav-links li:nth-child( 16 ) { /* Kindergarten */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .category-nav-links { display : flex; flex-direction : column; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> 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
angela0anderson Posted August 21, 2023 Share Posted August 21, 2023 35 minutes ago, creedon said: 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 : Bedford (Bedford 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 08/20/2023 08:47:52 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 4 ) { /* 10th Grade */ -webkit-box-ordinal-group : 13; -ms-flex-order : 12; order : 12; } .category-nav-links li:nth-child( 5 ) { /* 11th Grade */ -webkit-box-ordinal-group : 14; -ms-flex-order : 13; order : 13; } .category-nav-links li:nth-child( 6 ) { /* 12th Grade */ -webkit-box-ordinal-group : 15; -ms-flex-order : 14; order : 14; } .category-nav-links li:nth-child( 7 ) { /* 1st Grade */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 8 ) { /* 2nd Grade */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .category-nav-links li:nth-child( 9 ) { /* 3rd Grade */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .category-nav-links li:nth-child( 10 ) { /* 4th Grade */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .category-nav-links li:nth-child( 11 ) { /* 5th Grade */ -webkit-box-ordinal-group : 8; -ms-flex-order : 7; order : 7; } .category-nav-links li:nth-child( 12 ) { /* 6th Grade */ -webkit-box-ordinal-group : 9; -ms-flex-order : 8; order : 8; } .category-nav-links li:nth-child( 13 ) { /* 7th Grade */ -webkit-box-ordinal-group : 10; -ms-flex-order : 9; order : 9; } .category-nav-links li:nth-child( 14 ) { /* 8th Grade */ -webkit-box-ordinal-group : 11; -ms-flex-order : 10; order : 10; } .category-nav-links li:nth-child( 15 ) { /* 9th Grade */ -webkit-box-ordinal-group : 12; -ms-flex-order : 11; order : 11; } .category-nav-links li:nth-child( 16 ) { /* Kindergarten */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .category-nav-links { display : flex; flex-direction : column; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> Let us know how it goes. Thank you! I have been busting my butt for hours with ChatGPT and could not figure it out for the life of me! Thank you so much! creedon and tuanphan 1 1 Link to comment
C-bear Posted September 29, 2023 Share Posted September 29, 2023 Hi @tuanphan & @creedon I would love some help with the same issue too please 🙏 https://dinner-with-friends.com/prints New order: All / New / Digital downloads / Dinner with friends / Dinner at home / Dinner al fresco Thanks so much in advance! Link to comment
creedon Posted September 29, 2023 Share Posted September 29, 2023 10 hours ago, C-bear said: I would love some help with the same issue too please 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.7 SS Version : 7.0 Template : Skye (Skye 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 09/29/2023 03:06:17 PM 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 Downloads */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .ProductList-filter-list-item:nth-child( 3 ) { /* Dinner Al Fresco */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 4 ) { /* Dinner at Home */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .ProductList-filter-list-item:nth-child( 5 ) { /* Dinner With Friends */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 6 ) { /* New */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </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 { /* the value of this declaration needs to be updated manually on v7.0 sites */ margin-right : 10px; } /* 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. 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
angela0anderson Posted October 17, 2023 Share Posted October 17, 2023 (edited) Hi again! The following code worked on most of my product pages thus far, but for some reason not anymore? I don't know why! Is it because I used it on too many pages already? Is that a thing? The code worked great on my other pages, (like befa.com/art-crafts and befa.com/science and befa.com/social-studies), but it won't work on other pages I'm trying to use, like befa.com/writing. This is the code and TYIA: <!-- begin reorder store categories --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child(4) { /* 10th Grade */ -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .category-nav-links li:nth-child(5) { /* 11th Grade */ -webkit-box-ordinal-group: 14; -ms-flex-order: 13; order: 13; } .category-nav-links li:nth-child(6) { /* 12th Grade */ -webkit-box-ordinal-group: 15; -ms-flex-order: 14; order: 14; } .category-nav-links li:nth-child(7) { /* 1st Grade */ -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .category-nav-links li:nth-child(8) { /* 2nd Grade */ -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .category-nav-links li:nth-child(9) { /* 3rd Grade */ -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .category-nav-links li:nth-child(10) { /* 4th Grade */ -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .category-nav-links li:nth-child(11) { /* 5th Grade */ -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .category-nav-links li:nth-child(12) { /* 6th Grade */ -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .category-nav-links li:nth-child(13) { /* 7th Grade */ -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .category-nav-links li:nth-child(14) { /* 8th Grade */ -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .category-nav-links li:nth-child(15) { /* 9th Grade */ -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .category-nav-links li:nth-child(16) { /* Kindergarten */ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and (min-width: 641px) { .category-nav-links { display: flex; flex-direction: column; justify-content: center; } } /* mobile */ @media only screen and (max-width: 640px) { .category-nav-links { display: flex; flex-direction: column; } } </style> <!-- end reorder store categories --> Edited October 17, 2023 by angela0anderson Link to comment
creedon Posted October 17, 2023 Share Posted October 17, 2023 2 hours ago, angela0anderson said: The following code worked on most of my product pages thus far, but for some reason not anymore? I don't know why! When I look at your page it looks good to me. 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
angela0anderson Posted October 18, 2023 Share Posted October 18, 2023 21 hours ago, creedon said: When I look at your page it looks good to me. That is one of the pages that the code is working on, but it is not working on the writing page for some reason? (befa.com/writing) Link to comment
creedon Posted October 18, 2023 Share Posted October 18, 2023 17 hours ago, angela0anderson said: but it is not working on the writing page for some reason? If the categories where exactly the same then my original code might work on different pages. But with a different set of categories new code is needed. <!-- begin reorder store categories Version : 0.3.7 SS Version : 7.0 Template : Bedford (Bedford 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 10/18/2023 11:49:09 AM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 4 ) { /* 1st Grade */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 5 ) { /* 2nd Grade */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .category-nav-links li:nth-child( 6 ) { /* Kindergarten */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .category-nav-links { display : flex; flex-direction : column; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> 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
angela0anderson Posted October 20, 2023 Share Posted October 20, 2023 On 10/18/2023 at 2:51 PM, creedon said: If the categories where exactly the same then my original code might work on different pages. But with a different set of categories new code is needed. <!-- begin reorder store categories Version : 0.3.7 SS Version : 7.0 Template : Bedford (Bedford 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 10/18/2023 11:49:09 AM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 4 ) { /* 1st Grade */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 5 ) { /* 2nd Grade */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .category-nav-links li:nth-child( 6 ) { /* Kindergarten */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .category-nav-links { display : flex; flex-direction : column; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> Let us know how it goes. This code works on the page! But it is the same categories, K-12. For some reason the old code just isn't working on this page, but the new code is! Now it's only missing categories for grades 3-12. I tried writing the rest of it myself, but I really have no idea what I'm doing. It seems like the versions of the pages may be different (0.3.6 vs 0.3.7) and that may be making a difference in the code working? Idk though, just guessing. Link to comment
creedon Posted October 20, 2023 Share Posted October 20, 2023 25 minutes ago, angela0anderson said: Now it's only missing categories for grades 3-12 All the categories have to be on the writing page before code can be made to reorder them. It currently only shows K - 2. If you don't have products in writing that cover all the categories, you can make a hidden product and add all the categories to it so that you'll have all the categories displayed. Then you could use the social-emotional-learning code on the writing page. Quote It seems like the versions of the pages may be different (0.3.6 vs 0.3.7) and that may be making a difference in the code working? The difference between the v0.3.6 and 0.3.7 generator are minor and the ordering part of the generator code didn't change. 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
angela0anderson Posted October 25, 2023 Share Posted October 25, 2023 On 10/19/2023 at 10:14 PM, creedon said: All the categories have to be on the writing page before code can be made to reorder them. It currently only shows K - 2. If you don't have products in writing that cover all the categories, you can make a hidden product and add all the categories to it so that you'll have all the categories displayed. Then you could use the social-emotional-learning code on the writing page. The difference between the v0.3.6 and 0.3.7 generator are minor and the ordering part of the generator code didn't change. Thank you! I figured it out with your help. I had to add the K-12 categories and then remove them from the one product that is up on that page, and you were right that the old code worked just the same once I did that! I gotta learn this coding stuff more for sure! creedon 1 Link to comment
Liviaaaa Posted November 29, 2023 Share Posted November 29, 2023 Same issue here. Site URL: http://liviazoestudio.com Is there a way to re-order the product categories on the Shop page? I need them to be: All / Mugs & Cups / Bowls & Plates / Planters & Vases / Kitchen / Prints Thanks in advance! Link to comment
creedon Posted November 29, 2023 Share Posted November 29, 2023 28 minutes ago, Liviaaaa said: Is there a way to re-order the product categories on the Shop page? I need them to be: All / Mugs & Cups / Bowls & Plates / Planters & Vases / Kitchen / Prints Yes. Note the code won't work if there is no Prints category. Also that if the categories change, the code breaks. 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.7 SS Version : 7.0 Template : Native 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/29/2023 12:31:20 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 3 ) { /* Cups & Mugs */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .category-nav-links li:nth-child( 4 ) { /* Kitchen */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .category-nav-links li:nth-child( 5 ) { /* Plates & Bowls */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 6 ) { /* Prints */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .category-nav-links li:nth-child( 7 ) { /* Vases & Planters */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } </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 */ .category-nav-links li:last-child { /* the value of this declaration needs to be updated manually on v7.0 sites */ margin-right : ; } /* by extension we now want to remove the right margin from whichever element is going to be last after reordering */ .category-nav-links li:nth-child( 4 ) { 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 ) { .category-nav-links { display : flex; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> This is for v7.0 using the Native template. 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
Liviaaaa Posted November 29, 2023 Share Posted November 29, 2023 Thank you so much. I ended up changing the names of the categories so that they would appear how I want them in alphabetical order, but I am going to copy this in case I need it in the future! Many thanks for your help. creedon 1 Link to comment
mdelamen Posted February 23 Share Posted February 23 Hi- I want to rearrange the categories in my shop to what is below. Can someone help with code for that? https://delamenardiere.com/shop ALL CANVAS PAPER TINY WOOD PRINTS Link to comment
creedon Posted February 23 Share Posted February 23 19 hours ago, mdelamen said: Can someone help with code for that? 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.7 SS Version : 7.0 Template : Avenue Notes : the code is comprised of a number style tags. all of them are needed for the full effect to work code generated on 02/23/2024 12:38:53 PM by my magic table < ? > By : Thomas Creedon < http://www.tomsWeb.consulting/ > --> <style> /* rulesets just for reordering categories */ .category-nav-links li:nth-child( 3 ) { /* Canvas */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .category-nav-links li:nth-child( 4 ) { /* Paper */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .category-nav-links li:nth-child( 5 ) { /* Prints */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .category-nav-links li:nth-child( 6 ) { /* Tiny */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .category-nav-links li:nth-child( 7 ) { /* Wood */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ /* desktop */ @media only screen and ( min-width : 641px ) { .category-nav-links { display : flex; justify-content : center; } } /* mobile */ @media only screen and ( max-width : 640px ) { .category-nav-links { display : flex; flex-direction : column; } } </style> <!-- end reorder store categories --> This is for v7.0 using the Avenue template. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment