CONFLICT with Sorting and Filtering products on Mobile! HELP

Store Design
, , ,
1

Hi everyone,

My website is www.cphagen.com (Cascade theme).

Seems like there is a conflict when both sorting and filtering options are active on my website, only for mobile devices.

When sorting is active, the filtering button is unresponsive and unreliable.

When sorting is not active, filtering is working fine.

Maybe I should move sorting on the right and leave filtering on the left?

How can I do it?

Can anyone help me?

Thanks.

2

To move the sorting options to the right and keep the filtering options on the left, you can modify the HTML and CSS of your website. Here’s an example of how you can do it:

Open the “theme.liquid” file in your Shopify admin.

Find the section of code that generates the sorting and filtering options. This may vary depending on your theme, but it’s usually located in a file called “collection-template.liquid”.

Wrap the sorting options in a new div with the class “sorting-container”. Add a class of “filtering-container” to the existing div that contains the filtering options.

Add the following CSS to your stylesheet:

.filtering-container {
  float: left;
  width: 50%;
}

.sorting-container {
  float: right;
  width: 50%;
}
3

Hi @EcomGraduates ! Thank you for your answer.

This below is the code found in “collection-template.liquid”.

{% render ‘collection-template’ %}

{% schema %}
{
“name”: “Collection pages”,
“class”: “collection-template”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“label”: “Color scheme”,
“options”: [
{ “value”: “primary”, “label”: “Primary”},
{ “value”: “secondary”, “label”: “Secondary”},
{ “value”: “tertiary”, “label”: “Tertiary”}
]
},
{
“type”: “range”,
“id”: “no_posts”,
“min”: 2,
“max”: 24,
“step”: 2,
“label”: “No of products per page”,
“default”: 16
},
{
“type”: “checkbox”,
“id”: “show_collection_image”,
“label”: “Show collection image”
},
{
“type”: “checkbox”,
“id”: “enable_tag_filter”,
“label”: “Enable filtering by product tag”
},
{
“type”: “checkbox”,
“id”: “capitalize_tags”,
“label”: “Capitalize tags”
},
{
“type”: “checkbox”,
“id”: “enable_sort_filter”,
“label”: “Enable collection sorting”
}
]
}
{% endschema %}

Would you help me going through what to do.
I am really not an expert.

Thanks !!! :slightly_smiling_face: