Jump to content

Category Shop Order

Recommended Posts

Site URL: https://www.shewolfhair.com/shewolf-shop

Hi, 

I was wondering if someone could help me, please

I need to change the order of the Category list. 

From: All, Best Sellers, Hair Conditioners, Hair Shampoos

To:  All, Best Sellers, Hair Shampoos, Hair Conditioners

Please advise

Many thanks,

Oliver

<nav class="ProductList-filter ProductList-filter--categories" id="yui_3_17_2_1_1590511474709_951">

      <input class="ProductList-filter-dropdownToggle-checkbox" id="dropdown--categories" type="checkbox">
      <label class="ProductList-filter-dropdownToggle-label" for="dropdown--categories">
        <span class="ProductList-filter-dropdownToggle-label-title">Category</span>
        <span class="ProductList-filter-dropdownToggle-label-icon"></span>
      </label>

      <ul class="ProductList-filter-list" id="yui_3_17_2_1_1590511474709_950">
        <li class="ProductList-filter-list-item  ProductList-filter-list-item--all">
          <a class="ProductList-filter-list-item-link" href="/shewolf-shop">All</a>
        </li>
        
          <li class="ProductList-filter-list-item ">
            <a class="ProductList-filter-list-item-link" href="/shewolf-shop?category=Best+Sellers">
              Best Sellers
            </a>
          </li>
        
          <li class="ProductList-filter-list-item " id="yui_3_17_2_1_1590511474709_949">
            <a class="ProductList-filter-list-item-link" href="/shewolf-shop?category=Hair+Conditioners" id="yui_3_17_2_1_1590511474709_948">
              Hair Conditioners
            </a>
          </li>
        
          <li class="ProductList-filter-list-item ">
            <a class="ProductList-filter-list-item-link" href="/shewolf-shop?category=Hair+Shampoos">
              Hair Shampoos
            </a>
          </li>
        
      </ul>
    </nav>

 

Screenshot 2020-05-26 at 17.48.26.png

Link to comment
  • Replies 4
  • Created
  • Last Reply
22 hours ago, obourne1016 said:

Hey! I've just DM you. 🙂

Many thanks, 

Oliver

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}
@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}
}
/* All */
ul.ProductList-filter-list>li:nth-child(1) {
    order: 1;
}
/* Best Sellers */
ul.ProductList-filter-list>li:nth-child(2) {
    order: 2;
}
/* Hair Shampoos */
ul.ProductList-filter-list>li:nth-child(4) {
    order: 3;
}
/* Hair Conditioner*/
ul.ProductList-filter-list>li:nth-child(3) {
    order: 4;
}

 

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

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.