Changing tag filter from menu to radio

Shopify Partner
1 0 0

Hi,

 

I was hoping someone could help me as I'm a bit lost as to how I can change the following tag filter on my collection page? At the moment it is shown as a select dropdown, though I would like to change it to a radio button. If anyone could point me in the right direction I'd appreciate it.

 

  {% if section.settings.show_tag_group_3 %}
      {% assign custom_tag_arr3 = section.settings.tag_group_3_tags | replace: ', ',',' | downcase | split: ',' %}
      {% capture filter3_html %}
        <div class="grid__item one-quarter large-down--one-third">
          <div class="filter styled-dropdown styled-dropdown--label-inside">
            <label for="tag_group_3">{{ section.settings.tag_group_3_name | escape }}</label>
            <select id="tag_group_3" name="tag_group_3" data-filter-root="/collections/{{ collection.handle }}/" {% if settings.swatch_enabled and section.settings.tag_group_3_name == settings.swatch_option_name %}data-colour-swatch="true"{% endif %}>
              <option value="">{{ 'collections.filtering.all' | t }}</option>
              {%- for tag in collection.all_tags -%}
                {%- assign tag_lower = tag | downcase -%}
                {%- if custom_tag_arr3 contains tag_lower -%}
                  {%- assign show_tags = true -%}
                  <option value="{{ tag | handle }}" data-tag {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
                {%- endif -%}
              {%- endfor -%}
            </select>
          </div>
        </div>
        {%- if settings.swatch_enabled and settings.swatch_method == 'images' and section.settings.tag_group_3_name == settings.swatch_option_name -%}
        <style>
          {%- for colour in custom_tag_arr3 -%}
            .bg-{{ colour | handle }} {
              background-image: url({{ colour | handle | append: '.png' | asset_img_url: '40x40', crop: 'center' }});
              background-clip: padding-box;
            }
          {%- endfor -%}
        </style>
        {%- endif -%}
      {% endcapture %}
    {% endif %}
0 Likes