I want to increase columns in collection grid in impulse

I want to increase columns in collection grid in impulse

Niteshchhabria
Visitor
3 0 0
 
It's 5 by default i want 6 columns

https://alclifestyles.com/

Screenshot 2021-07-20 at 10.29.31 AM.png


 

 

Collection-template.liquid file 

{%- assign per_row = section.settings.per_row -%}
{%- assign paginate_by = per_row | times: section.settings.rows_per_page -%}

{% paginate collection.products by paginate_by %}

<div
id="CollectionSection"
data-section-id="{{ section.id }}"
data-section-type="collection-template">

{%- if collection.description != blank -%}
<div class="rte">
{{ collection.description }}
</div>
<hr class="hr--clear hr--small">
{%- endif -%}

{%- if section.settings.subcollection_style == 'above' -%}
{%- include 'subcollections', per_row: section.settings.subcollections_per_row -%}
{%- endif -%}

<div class="collection-filter">
{%- assign current_filter_size = current_tags | size -%}
<div class="collection-filter__item collection-filter__item--drawer">
<button
type="button"
class="js-drawer-open-collection-filters btn btn--tertiary{% unless current_filter_size == 0 %} btn--tertiary-active{% endunless %}"
aria-controls="FilterDrawer">
{%- include 'icon-filter' -%}
{{ 'collections.filters.title_tags' | t }}
{%- if current_filter_size > 0 -%}
({{ current_filter_size }})
{%- endif -%}
</button>
</div>

<div class="collection-filter__item collection-filter__item--count small--hide">
{%- if section.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
</div>

<div class="collection-filter__item collection-filter__item--sort">
<div class="collection-filter__sort-container">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- assign default_sorted = false -%}
{%- if sort_by == collection.default_sort_by -%}
{%- assign default_sorted = true -%}
{%- endif -%}
<label for="SortBy" class="hidden-label">{{ 'collections.sorting.title' | t }}</label>
<select name="SortBy" id="SortBy">
<option value="title-ascending"{% if sort_by == collection.default_sort_by %} selected="selected"{% endif %}>{{ 'collections.sorting.title' | t }}</option>
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% unless default_sorted %}{% if option.value == sort_by %}selected="selected"{% endif %}{% endunless %}>{{ option.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>

{%- if section.settings.enable_collection_count -%}
<p class="medium-up--hide text-center">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</p>
{%- endif -%}

<div
class="grid grid--uniform gridm grid--collection{% if section.settings.mobile_flush_grid %} small--grid--flush{% endif %}"
data-scroll-to>
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

{% case per_row %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

{%- for product in collection.products -%}
{%- include 'product-grid-item' -%}
{%- else -%}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endfor -%}

</div>

{%- if section.settings.subcollection_style == 'below' -%}
{%- include 'subcollections', per_row: section.settings.subcollections_per_row -%}
{%- endif -%}

{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}

{%- if settings.quick_shop_enable -%}
{%- for product in collection.products -%}
{%- if product.available -%}
{%- include 'quick-shop-modal' -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>

{% endpaginate %}

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Subcollections"
},
{
"type": "paragraph",
"content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/impulse/how-do-i-create-subcollections)"
},
{
"type": "select",
"id": "subcollection_style",
"label": "Subcollection style",
"default": "above",
"options": [
{
"value": "above",
"label": "Above products"
},
{
"value": "below",
"label": "Below products"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "range",
"id": "subcollections_per_row",
"label": "Subcollections per row",
"default": 6,
"min": 2,
"max": 7,
"step": 1
},
{
"type": "header",
"content": "Products"
},
{
"type": "checkbox",
"id": "enable_collection_count",
"label": "Enable collection count",
"default": true
},
{
"type": "range",
"id": "per_row",
"label": "Products per row",
"default": 6,
"min": 2,
"max": 7,
"step": 1
},
{
"type": "range",
"id": "rows_per_page",
"label": "Rows per page",
"default": 7,
"min": 3,
"max": 20,
"step": 1
},
{
"type": "checkbox",
"id": "mobile_flush_grid",
"label": "Flush grid on mobile",
"default": false
}
]
}
{% endschema %}

Replies 3 (3)

ZestardTech
Shopify Expert
5625 1025 1354

Hello @Niteshchhabria 

Please add this one code and let me know working fine.

{%- assign per_row = section.settings.per_row -%}
{%- assign paginate_by = per_row | times: section.settings.rows_per_page -%}

{% paginate collection.products by paginate_by %}

<div
id="CollectionSection"
data-section-id="{{ section.id }}"
data-section-type="collection-template">

{%- if collection.description != blank -%}
<div class="rte">
{{ collection.description }}
</div>
<hr class="hr--clear hr--small">
{%- endif -%}

{%- if section.settings.subcollection_style == 'above' -%}
{%- include 'subcollections', per_row: section.settings.subcollections_per_row -%}
{%- endif -%}

<div class="collection-filter">
{%- assign current_filter_size = current_tags | size -%}
<div class="collection-filter__item collection-filter__item--drawer">
<button
type="button"
class="js-drawer-open-collection-filters btn btn--tertiary{% unless current_filter_size == 0 %} btn--tertiary-active{% endunless %}"
aria-controls="FilterDrawer">
{%- include 'icon-filter' -%}
{{ 'collections.filters.title_tags' | t }}
{%- if current_filter_size > 0 -%}
({{ current_filter_size }})
{%- endif -%}
</button>
</div>

<div class="collection-filter__item collection-filter__item--count small--hide">
{%- if section.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
</div>

<div class="collection-filter__item collection-filter__item--sort">
<div class="collection-filter__sort-container">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- assign default_sorted = false -%}
{%- if sort_by == collection.default_sort_by -%}
{%- assign default_sorted = true -%}
{%- endif -%}
<label for="SortBy" class="hidden-label">{{ 'collections.sorting.title' | t }}</label>
<select name="SortBy" id="SortBy">
<option value="title-ascending"{% if sort_by == collection.default_sort_by %} selected="selected"{% endif %}>{{ 'collections.sorting.title' | t }}</option>
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% unless default_sorted %}{% if option.value == sort_by %}selected="selected"{% endif %}{% endunless %}>{{ option.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>

{%- if section.settings.enable_collection_count -%}
<p class="medium-up--hide text-center">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</p>
{%- endif -%}

<div
class="grid grid--uniform gridm grid--collection{% if section.settings.mobile_flush_grid %} small--grid--flush{% endif %}"
data-scroll-to>
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

{% case per_row %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% when 6 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-sixth' -%}
{% endcase %}

{%- for product in collection.products -%}
{%- include 'product-grid-item' -%}
{%- else -%}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{%- endfor -%}

</div>

{%- if section.settings.subcollection_style == 'below' -%}
{%- include 'subcollections', per_row: section.settings.subcollections_per_row -%}
{%- endif -%}

{%- if paginate.pages > 1 -%}
{%- include 'pagination' -%}
{%- endif -%}

{%- if settings.quick_shop_enable -%}
{%- for product in collection.products -%}
{%- if product.available -%}
{%- include 'quick-shop-modal' -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>

{% endpaginate %}

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Subcollections"
},
{
"type": "paragraph",
"content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/impulse/how-do-i-create-subcollections)"
},
{
"type": "select",
"id": "subcollection_style",
"label": "Subcollection style",
"default": "above",
"options": [
{
"value": "above",
"label": "Above products"
},
{
"value": "below",
"label": "Below products"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "range",
"id": "subcollections_per_row",
"label": "Subcollections per row",
"default": 6,
"min": 2,
"max": 7,
"step": 1
},
{
"type": "header",
"content": "Products"
},
{
"type": "checkbox",
"id": "enable_collection_count",
"label": "Enable collection count",
"default": true
},
{
"type": "range",
"id": "per_row",
"label": "Products per row",
"default": 6,
"min": 2,
"max": 7,
"step": 1
},
{
"type": "range",
"id": "rows_per_page",
"label": "Rows per page",
"default": 7,
"min": 3,
"max": 20,
"step": 1
},
{
"type": "checkbox",
"id": "mobile_flush_grid",
"label": "Flush grid on mobile",
"default": false
}
]
}
{% endschema %}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Niteshchhabria
Visitor
3 0 0

No 😞   

It didn't work, nothing changed, collections per row is max at 5

Niteshchhabria_0-1626774629993.png

 

 

SunShopp
Excursionist
36 2 5

Go to featured-collections.liquid.

on line 23 or so you will see "case section.settings.per_row" followed by "when 2...when 3...etc.

beneath "when 5 assign..." (at line 32 or so) paste the following:

when 6
assign grid_item_width = 'small--one-half medium-up--one-sixth'

 

it should look like this when done:

Capture.JPG

 

Then scroll down to line 82 or so looking for ""type": "range"," and change the max from 5 to 6.

It should look like this when done:

Capture.JPG

 

Then just save and reload your theme editor page and you should be good to go.

Let me know how it works.