kaspersart Posted January 13, 2022 Share Posted January 13, 2022 Site URL: https://www.lukaskasper.com/shop Heya, I'm looking to change the sequence of my websites shop categories from alphabetic to a specific order, could someone help me with this? My website is: https://www.lukaskasper.com/shop I want to change the order to: Skateboards Prints Canvas & Framed Skateboard minis Enamel Pins A3 paper paintings A4 paper paintings A5 paper paintings Thanks in advance Link to comment
creedon Posted January 13, 2022 Share Posted January 13, 2022 There several posts that cover this effect pretty well. Here is one. 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.3d2 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 01/12/2022 05:21:13 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 ) { /* A3 Paper Paintings */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 3 ) { /* A4 Paper Paintings */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 4 ) { /* A5 Paper Paintings */ -webkit-box-ordinal-group : 7; -ms-flex-order : 6; order : 6; } .ProductList-filter-list-item:nth-child( 5 ) { /* Canvas & Framed */ -webkit-box-ordinal-group : 4; -ms-flex-order : 3; order : 3; } .ProductList-filter-list-item:nth-child( 6 ) { /* Enamel Pins */ -webkit-box-ordinal-group : 6; -ms-flex-order : 5; order : 5; } .ProductList-filter-list-item:nth-child( 7 ) { /* Prints */ -webkit-box-ordinal-group : 3; -ms-flex-order : 2; order : 2; } .ProductList-filter-list-item:nth-child( 8 ) { /* Skateboard Minis */ -webkit-box-ordinal-group : 5; -ms-flex-order : 4; order : 4; } .ProductList-filter-list-item:nth-child( 9 ) { /* Skateboards */ -webkit-box-ordinal-group : 2; -ms-flex-order : 1; order : 1; } </style> <style> /* rulesets to define the base of this effect no user serviceable parts below */ .ProductList-filter-list { display : flex; flex-direction : column; } /* mobile */ @media only screen and ( max-width : 640px ) { .ProductList-filter-list { 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 best , and see my profile. Thanks for your support! 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