Need to change default product view in collection pages ( Curswine theme)

[mhassan2021]

Store URL: https://bringmenz.myshopify.com/

Pass: geeray

Theme: Curswine

It may call "collection callout" (i am not sure sorry)

I have tried a lot from the theme setting. But failed to solve.When entering any collection page by default its showing 3 column view. I want the view in 4 columns as per the indication mark of below image. Thank you

[KetanKumar]

@mhassan2021 

yes, please share collection page code so i will check and update

[mhassan2021]

@KetanKumar Where to find the Collection page code?

is it JSON file?

[mhassan2021]

@KetanKumar 

<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{% render 'facets', results: collection, enable_sorting: section.settings.enable_sorting %}

<div id="ProductGridContainer">

{%- if collection.products.size == 0 -%}
<div class="collection collection--empty" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>

<div class="title-wrapper center">
<div class="title alert-danger alert">
{{ 'sections.facets.empty' | t }}
</div>
<a class="btn" href="{{ collection.url }}">{{ 'sections.facets.clear_all' | t }}</a>
</div>
</div>
{%- else -%}
<div class="collection">
<div class="loading-overlay">
<div class="loading-overlay__spinner">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>

<p class="collection-product-count light" role="status" style="display: none;">
{{ 'sections.facets.product_count' | t: product_count: collection.products_count, count: collection.all_products_count }}
</p>

<ul id="product-grid" data-id="{{ section.id }}" class="row">
{% assign i = 1 %}
{%- for product in collection.products -%}
<li>
{% render 'product-card-grid', product_card_product: product, media_size: settings.image_ratio, product_count: {{i}}, show_secondary_image: settings.show_secondary_image, show_vendor: settings.show_vendor%}
{% assign i = i | plus: 1 %}
</li>
{%- endfor -%}
</ul>

</div>
{%- endif -%}

</div>

{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"class": "collection-grid-section",
"settings": [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 24,
"step": 4,
"default": 16,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "header",
"content": "Sorting"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
}
]
}
{% endschema %}