How to show size and colors separately in shoplify? - shopify

Question

I want to display colors and sizes separately on frontend to filter the collection in shopify. But when I do, it shows color and size in same variable with slash in it.
Here is the image
Here is the code that i try
<div class="size-filter clearfix mt-4">
<h4>SIZE</h4>
<hr>
{% assign available_sizes = '' %}
{% for product in collections.frontpage.products limit: limit %}
{% for variant in product.variants %}
{% if variant.title != 'Default Title' %}
{% unless available_sizes contains variant.title %}
{% if variant.available %}
{% capture available_sizes %}{{ available_sizes }}, {{ variant.title }}{% endcapture %}
<div class="form-check">
<input class="form-check-input coll-filter" type="checkbox" value="{{variant.title}}" id=""
{% if current_tags contains tag %} checked {%endif%}>
<label class="form-check-label" for="">
{{variant.title}}
</label>
</div>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
Please help me to fix this error, i stuck here from last 3 days.
Error Solved but got this output:

Answer 1

You can do use the options_with_values object:
{% for product_option in product.options_with_values %}
<h5>{{ product_option.name }}</h5>
{% for value in product_option.values %}
<input id="{{product_option|handle}}-{{value|handle}}" type="checkbox" value="{{ value }}" />
<label for="{{product_option|handle}}-{{value|handle}}"></label>
{% endfor %}
{% endfor %}
But you will need to write some Javascript in order to tie it to the main select which holds the variants ids.