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

Shop Navigation: Slider to Drop Down


Recommended Posts

Site URL: https://www.shopmaisaguam.com/shop

Any workarounds or code to change the default navigation on my shop page from it being laid out on top to a drop-down style on mobile view? On desktop it looks fine because the screen is wide an all product categories are laid out nicely but on mobile you have to swipe left to see the other categories and a lot of people don't know this feature leaving them to have to scroll through the entire product page to find the items they're looking for. 

IMG_4351.PNG

Link to post
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS. It will improve a bit

@media screen and (max-width:767px) {
.products.collection-content-wrapper .category-filter-list {
    flex-wrap: wrap;
}
.products.collection-content-wrapper .category-filter-container {
    height: auto;
}
}

 

Link to post
On 5/28/2020 at 5:34 PM, maisaguam said:

@tuanphan You are a godsend to every novice Squarespace site owner!

I attached a screenshot of how it looks below with the code. Anyway to get it to look... cleaner and less scattered? 

Can you describe your desired layout?

Link to post
  • 5 months later...

Hi! I am looking to make my shop categories on mobile a dropdown menu instead of a horizontal left scrolling list. This is only for Mobile not desktop view. Let me know if theres a custom CSS for this. 

Thank you!

Screen Shot 2020-10-30 at 10.26.22 AM.png

Link to post
24 minutes ago, hboss22 said:

Hi! I am looking to make my shop categories on mobile a dropdown menu instead of a horizontal left scrolling list. This is only for Mobile not desktop view. Let me know if theres a custom CSS for this. 

Thank you!

 

Try adding to Home > Settings > Advanced > Code Injection > Header

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".com/")[1];
    if (urlCat == "store") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/store/";
        } else {
          window.location = "/store/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .collection-5f36dfec3a07a2182b139d23 .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

Codey by @rwp

If it doesn't work, can you share link to shop page, we can check easier.

Link to post
3 minutes ago, tuanphan said:

Try adding to Home > Settings > Advanced > Code Injection > Header


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var urlCat = window.location.href.split(".com/")[1];
    if (urlCat == "store") {
      var catItem = $('a.nested-category-breadcrumb-link');
      var itemTag = $(catItem).html();
      var catDrop = "<select name='Categories' id='categories' class='catDrop'><option value='All'>All</option>";
      if (itemTag !== undefined) {
        catItem.each(function(i) {
          var fixLoc = $(this).html().trim().replace(/\s+/g, '-').replace(/&/g, '').replace('amp;', '').replace('--', '-').replace(/'/g,'').toLowerCase();
          catDrop = catDrop + '<option value=' + fixLoc + '>' + $(this).html() + '</option>';
          i++;
        });
        catDrop = catDrop + "</select>";
        $(catDrop).insertAfter($('.nested-category-title'));
      }
      if (urlCat !== undefined) {
        var fixCat = urlCat.replace(/\%27/g, "'")
        $(".catDrop").val("All");
      }
      $(".catDrop").change(function() {
        if ($(this).val() == "All") {
          window.location = "/store/";
        } else {
          window.location = "/store/" + $(this).val();
        }
      });
    }
  });
</script>
<style>
  .collection-5f36dfec3a07a2182b139d23 .nested-category-children {
    display: none !important;
  }

  .catDrop {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>

Codey by @rwp

If it doesn't work, can you share link to shop page, we can check easier.

It didn't appear to work! Here's the link to the Shop Design page. Id like the category drop down to appear for all three of my shop pages. Wellness, design & beauty. https://www.fromyourmuse.com/designshop

Link to post
7 minutes ago, hboss22 said:

It didn't appear to work! Here's the link to the Shop Design page. Id like the category drop down to appear for all three of my shop pages. Wellness, design & beauty. https://www.fromyourmuse.com/designshop

Can you insert above code? Then we can check easier.

Link to post

@hboss22 Please email me from the link that is in my signature. I have been doing a bunch of these lately for people. Squarespace seems to have different variations depending on the theme, I can custom tailor the code to your page.

Give me a few days to respond though, it takes a fair amount of work. It will also need to be changed if you add categories or change the names of them, so easiest thing is to make sure you have the categories the way you want them.

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...