Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
ofgoodnature

Store Category Order Help

Question

8 answers to this question

Recommended Posts

  • 1
Posted (edited)

Try adding to Home > Design > custom CSS

@media screen and (min-width:641px) {
.ProductList-filter-list {
	display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
ul.ProductList-filter-list>:nth-child(8) {
    margin-right: 15px;
}
}
@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>:nth-child(1) {
    order: 1;
}
/* On Sale */
ul.ProductList-filter-list>:nth-child(2) {
    order: 2;
}
/* T Shirts */
ul.ProductList-filter-list>:nth-child(7) {
    order: 3;
}
/* Tank Tops */
ul.ProductList-filter-list>:nth-child(8) {
    order: 4;
}
/* Hoodies*/
ul.ProductList-filter-list>:nth-child(3) {
    order: 5;
}
/* Ladies */
ul.ProductList-filter-list>:nth-child(4) {
    order: 5;
}
/* Music */
ul.ProductList-filter-list>:nth-child(5) {
    order: 5;
}
/* Other */
ul.ProductList-filter-list>:nth-child(6) {
    order: 6;
}

 

Edited by tuanphan
add flex-wrap

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan I have a fix for this, but it might be overly complicated. Do you know of any quick tricks?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
Posted (edited)
5 minutes ago, rwp said:

@tuanphan I have a fix for this, but it might be overly complicated. Do you know of any quick tricks?

I usually use CSS Flex Order for these questions =]]

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Just now, tuanphan said:

CSS Flex Order =]]

I tried that, but the categories overflow off the screen. On narrow widths. The only fix I found was to use a grid, layed out for different widths. Seems cumbersome.

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
35 minutes ago, tuanphan said:

Try adding to Home > Design > custom CSS


@media screen and (min-width:641px) {
.ProductList-filter-list {
    display: flex;
    justify-content: center;
}
ul.ProductList-filter-list>:nth-child(8) {
    margin-right: 15px;
}
}
@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>:nth-child(1) {
    order: 1;
}
/* On Sale */
ul.ProductList-filter-list>:nth-child(2) {
    order: 2;
}
/* T Shirts */
ul.ProductList-filter-list>:nth-child(7) {
    order: 3;
}
/* Tank Tops */
ul.ProductList-filter-list>:nth-child(8) {
    order: 4;
}
/* Hoodies*/
ul.ProductList-filter-list>:nth-child(3) {
    order: 5;
}
/* Ladies */
ul.ProductList-filter-list>:nth-child(4) {
    order: 5;
}
/* Music */
ul.ProductList-filter-list>:nth-child(5) {
    order: 5;
}
/* Other */
ul.ProductList-filter-list>:nth-child(6) {
    order: 6;
}

 

This worked great, thank you!

Share this post


Link to post
  • 0

@ofgoodnature Did that give you an overflow issue on narrower screens? I couldn't get flex orders to work when I tried.

 

Screen Shot 2020-07-25 at 22.45.03.png


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
12 minutes ago, rwp said:

@ofgoodnature Did that give you an overflow issue on narrower screens? I couldn't get flex orders to work when I tried.

 

flex-wrap?

17 minutes ago, ofgoodnature said:

This worked great, thank you!

I just adjusted the code. You can insert again new code


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
5 minutes ago, tuanphan said:

flex-wrap?

I just adjusted the code. You can insert again new code

Taught me something again!

That looks like it works perfectly.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...