Jump to content

Hi

Recommended Posts

Site URL: https://www.studiobullinachinashop.com/paintings1

Hi I was wondering if there was any way to reorganize the categories on the paintings page 

This is the order I would like: bulls, people, ekla cholo re, still life, & others, all

I was also wondering if there was anyway I can make the 'All' category lower case and at the end of the categories (the last category as seen above) 

Here is the website: https://www.studiobullinachinashop.com/paintings1

 

Link to comment
  • Replies 4
  • Views 699
  • Created
  • Last Reply

Using my famous Magic Table we come up with the following.

Category        Natural Order   New Order   Group Order

All             01              06          1

& others        02              05          1

bulls           03              01          1

ekla cholo re   04              03          1

people          05              02          1

still life      06              04          1

Remove any previous attempts at this effect.

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  /*
  
    Store Categories Reorder
    
    */
  
  .ProductList-filter-list {
  
    /* natural order 01 */ --scr-new-01: 6; --scr-new-group-01: 1;
    /* natural order 02 */ --scr-new-02: 5; --scr-new-group-02: 1;
    /* natural order 03 */ --scr-new-03: 1; --scr-new-group-03: 1;
    /* natural order 04 */ --scr-new-04: 3; --scr-new-group-04: 1;
    /* natural order 05 */ --scr-new-05: 2; --scr-new-group-05: 1;
    /* natural order 06 */ --scr-new-06: 4; --scr-new-group-06: 1;
    
    }
    
  /* desktop */
  
  @media only screen and ( min-width: 641px ) {
  
    .ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  /* mobile */
  
  @media only screen and ( max-width: 640px ) {
  
    .ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      
      }
    }
    
  /*
  
    begin reordering
    
    [natural order] is the natural order that elements display on the page
                    without any intervention
    
    repeat one of the following structures for as many categories you want to
    reorder
    
    new order
    
      .ProductList-filter-list-item:nth-child( [natural order] ) {
      
        -webkit-box-ordinal-group: calc( var( --scr-new-[natural order] ) + 1 );
        -ms-flex-order: var( --scr-new-[natural order] );
        order: var( --scr-new-[natural order] );
        
        }
        
    new order group
    
      .ProductList-filter-list-item:nth-child( [natural order] ) {
      
        -webkit-box-ordinal-group: calc( var( --new-group-[natural order] ) + 1 );
        -ms-flex-order: var( --new-group-[natural order] );
        order: var( --new-group-[natural order] );
        
        }
        
    */
    
  .ProductList-filter-list-item:nth-child( 1 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-01 ) + 1 );
    -ms-flex-order: var( --scr-new-01 );
    order: var( --scr-new-01 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 2 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-02 ) + 1 );
    -ms-flex-order: var( --scr-new-02 );
    order: var( --scr-new-02 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 3 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-03 ) + 1 );
    -ms-flex-order: var( --scr-new-03 );
    order: var( --scr-new-03 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 4 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-04 ) + 1 );
    -ms-flex-order: var( --scr-new-04 );
    order: var( --scr-new-04 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 5 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-05 ) + 1 );
    -ms-flex-order: var( --scr-new-05 );
    order: var( --scr-new-05 );
    
    }
    
  .ProductList-filter-list-item:nth-child( 6 ) {
  
    -webkit-box-ordinal-group: calc( var( --scr-new-06 ) + 1 );
    -ms-flex-order: var( --scr-new-06 );
    order: var( --scr-new-06 );
    
    }
    
  /* end reordering */
  
  /*
  
    style categories, keep in mind the styling applies to categories before they
    are reordered so use their natural order number
    
    */
    
  .ProductList-filter-list-item:first-child {
  
    text-transform: lowercase;
    
    }
    
  @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: 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:first-child {
    
      margin-right: 0;
      
      }
    }
    
  </style>

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

I'm quite impressed by all this code @creedon. Here's how I was thinking about it.
 

.ProductList-filter-list-item:nth-child(1) {
    /* All */
    order: 6;
    text-transform: lowercase;
}
.ProductList-filter-list-item:nth-child(2) {
    /* people */
    order: 2;
}
.ProductList-filter-list-item:nth-child(3) {
    /* still life */
    order: 4;
}
.ProductList-filter-list-item:nth-child(4) {
    /* others */
    order: 5;
}
.ProductList-filter-list-item:nth-child(5) {
    /* ekla */
    order: 3;
}
.ProductList-filter-list-item:nth-child(6) {
    /* bulls */
    order: 1;
}

 

Link to comment
11 hours ago, taratsarkar said:

Is there any way i can fix that!

Yes. Remove any previous attempts at this effect, as stated before. Remove the following from Design > Custom CSS.

li.ProductList-filter-list-item:nth-child(2) {
    order: 3
}

li.ProductList-filter-list-item:nth-child(3) {
    order: 5
}

li.ProductList-filter-list-item:nth-child(4) {
    order: 4
}

li.ProductList-filter-list-item:last-child {
    order: 2
}

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.