Cacher is the code snippet organizer for pro developers

    <div>
        <div id="orc-collection-control" style="display: none;">
            <div id="orc-collection-controls-label" class="orc-collectionControlsLabel">Select a product range</div>
            <div class="orc-collectionControls" role="radiogroup" aria-labelledby="orc-collection-controls-label">
              {% assign collection_number = 0 %}
              {% for collection in collections %}
                {% if collection.title contains 'okendo_reviewPageFilter' %}

                  {% assign collection_number = collection_number | plus: 1 %}
              	  {% if collection_number == 1 %}
              	    {% assign initial_collection_id = collection.id %}
              	  {% endif %}

                  <div class="orc-collectionControls-item">        
                    <input id="orc-reviews-control-{{ collection_number }}"
                           value="{{ collection.id }}" class="{% if collection_number == 1 %}orc-collectionControls-item-input--checked{% endif %} orc-collectionControls-item-input js-orc-collectionRadio"
                           type="radio"
                           name="orc-reviews-collection-control"
                           {% if collection_number == 1 %}checked{% endif %}/>
                    <label for="orc-reviews-control-{{ collection_number }}" class="orc-collectionControls-item-label">
                      {% if collection.image %}
                      	<img class="orc-collectionControls-item-label-image" src="{{ collection.image | img_url: '400x' }}"/>
                      {% endif %}
                      <span class="orc-collectionControls-item-label-heading">
                        {% assign display_title = collection.title | remove: "okendo_reviewPageFilter_" %}
                        {{ display_title }}
                      </span>
                    </label>
                  </div>

                {% endif %}
              {% endfor %}
          </div>
      </div>
      <div id="orc-widget-snippet" data-oke-reviews-widget="" data-oke-reviews-collection-id="{{ initial_collection_id }}"></div>
      <script>
        (function(){
          function okeWidgetControlInit() {
            var snippetEl = document.querySelector('#orc-widget-snippet');
            var controlEl = document.querySelector('#orc-collection-control');
            var collectionRadioElements = Array.prototype.slice.call(document.querySelectorAll('.js-orc-collectionRadio'));
            controlEl.style.display = 'block';
            collectionRadioElements.forEach(function(radioElement) {
              radioElement.addEventListener('change', function() {
                snippetEl.okeReviews.setCollection(radioElement.value);
                collectionRadioElements.forEach(function(element) {
                  element.classList.remove('orc-collectionControls-item-input--checked');
                });
                radioElement.classList.add('orc-collectionControls-item-input--checked');
              });
            });
          }
          window.okeReviewsWidgetOnInit = okeWidgetControlInit;
        })();
      </script>
    </div>

.orc-collectionControlsLabel {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.orc-collectionControls {
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
  align-items: stretch;
  justify-content: space-between;
}
.orc-collectionControls .orc-collectionControls-item-label {
  cursor: pointer;
  background-color: #f2f2f2;
  overflow: hidden;
  border-radius: 0;
  position: relative;
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  overflow: hidden;
  border: 3px solid transparent;
}
.orc-collectionControls-item-input:checked + .orc-collectionControls-item-label,
.orc-collectionControls-item-input--checked + .orc-collectionControls-item-label {
  border: 0;
  box-shadow: none;
  border: 3px solid #646804;
}
.orc-collectionControls-item {
  box-sizing: border-box;
  padding-bottom: 5px;
}
.orc-collectionControls-item-label-heading {
  display: block;
  font-size: 18px;
  font-weight: normal;
  text-align: left;
  flex-basis: 66.66%;
  background-color: transparent;
  line-height: 18px;
  margin-bottom: 0;
}
.orc-collectionControls-item-label-image {
  height: 100px;
}
.orc-collectionControls-item-input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.orc-collectionControls-item-label-background {
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center right;
  height: 50px;
  flex-basis: 33.33%;
  margin: 0;
}
@media only screen and (min-width: 480px) {
  .orc-collectionControls {
    flex-direction: row;
  }
  .orc-collectionControls-item {
    padding-right: 18px;
    padding-bottom: 0;
  }
  .orc-collectionControls-item:last-child {
    padding-right: 0;
  }
  .orc-collectionControls .orc-collectionControls-item-label {
    display: block;
    max-height: 250px;
    margin: 0;
    background-color: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
  }
  .orc-collectionControls-item-label-image {
    height: auto;
  }
  .orc-collectionControls-item-input:checked + .orc-collectionControls-item-label {
    border-width: 0 0 3px 0;
  }
  .orc-collectionControls-item-label-heading {
    text-align: center;
    padding: 16px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
  }
  .orc-collectionControls-item-label-background {
    background-position: center center;
    height: 100%;
    width: 100%;
    margin-top: auto;
    width: auto;
  }
}