I want to increase columns in collection grid in impulse
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 %}
No 😞
It didn't work, nothing changed, collections per row is max at 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:
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:
Then just save and reload your theme editor page and you should be good to go.
Let me know how it works.
Community Blog Articles
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025