Re-Ordering tags in drop down filters

[abrusenhan]

Hello! I have been able to add drop down filters on my site but one of the dropdowns is a filter by price range and it will not let me put the tags in the order i want. It is ordering based off just the first number rather than the whole so $1500+ is first, $250-$750 is second and $750-$1500 is last. Obviously I'd like for $1500+ to be last! Here is the coding for the dropdown (I only need this on the price dropdown but it's fine if the others are changed as well):

  <div class="page-width">
<div class="clearfix filter">
      <p>Refine Your Search:</p>
      <div class="four-columns">
        <p>Price:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'pri-' and 'pri0-'%}
             {% assign tagName = tag | remove: 'pri-'| remove: 'pri0-' %}  
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
          
        </select>
      </div>
      <div class="four-columns">
        <p>Material:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.all_tags %}
            {% if tag contains 'mat-' %}
             {% assign tagName = tag | remove: 'mat-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>      
  <div class="four-columns">
       <p>Sort By:<p>
    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                    >
      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected>"selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                  </div>
<!-- Multiple Dropdown Sorting Boxes - Collections END -->
        <script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
    }
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>

[CANDISOFT]

- i have a solution for this issue which i have solved in one project.
- when add tag make a string starting from a digit in ascending order.

example:  1_$0-$150  , 2_$150-$300 , 3_$300-$450 ,4_$450-$600 ,......................

- using this way your tag will be fetched in above order. 
- now to remove appended prefix, split the tag with '_' .
- and now you have price without 1_, 2_, 3_ , ........

-now you can have your ordered select menu for price.

-i hope you understood. if not then comment again.  Happy to Help.
- give me like and mark my answer as accepted solution
Thank You

[umair91]

Hi @CANDISOFT 

I have a similar issue and don't know how to do it. I am using Debut Theme and want to reorder the tag filters as I want. I know it is now in alphabetical order.

Can you please tell me according to my website which code to edit, and where exactly to put that code?
Here is the screen shot of the website

[CANDISOFT]

@umair91 ,that is the thing that i can not explain, that is the coding thing, if you want i can do that for you.

[umair91]

Thank you @CANDISOFT for your reply

Fortunately, few other experts helped me to achieve it