Change the number of tiles in collection list on Debut theme

Highlighted
New Member
2 0 0

Hi there,
I would to change the number of tiles shown in the collection list on my home page to 6 per row. At the moment is is limited to 5. I would also like to remove the "collection name" text which is showing in white. The theme I am using is the Debut theme. Any help would be appreciated. (See picture below).

Thanks kindly in advance

collection list.JPG

0 Likes
Highlighted
Shopify Expert
420 42 46

Hello There, 

To change the items to 6 follow the below steps :- 

1) Find collection-template.liquid file and find the below given code from it

{
"type": "range",
"id": "grid",
"label": {
"da": "Produkter pr. række (kun gitter)",
"de": "Produkte per Reihe (nur Raster)",
"en": "Products per row (grid only)",
"es": "Productos por fila (solo cuadrícula)",
"fi": "Tuotteita per rivi (vain ruudukko)",
"fr": "Produits par rangée (grille uniquement)",
"hi": "उत्पाद प्रति पंक्ति (केवल ग्रिड)",
"it": "Prodotti per riga (solo griglia)",
"ja": "行あたりの商品数(グリッドのみ)",
"ko": "열 별 제품 (그리드 전용)",
"nb": "Produkter per rad (kun rutenett)",
"nl": "Producten per rij (alleen raster)",
"pt-BR": "Produtos por linha (somente grade)",
"pt-PT": "Produtos por linha (somente grelha)",
"sv": "Produkter per rad (endast rutnät)",
"th": "สินค้าต่อแถว (กริดเท่านั้น)",
"zh-CN": "每行产品数(仅限网格)",
"zh-TW": "每列產品數 (僅限網格)"
},
"default": 4,
"min": 2,
"max": 5,
"step": 1
},

In this code change the "max":5 to "max": 6

 

Also, find the below given code :-

{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% 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 %}

Before {% endcase %} add this code 

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

 

Then go to the customize section and change the Products Per row to 6. By doing this you will be able to successfully 6 products in one row. 

 

 

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
0 Likes
Highlighted
New Member
2 0 0

Thanks so much for that solution Pallavi, worked perfectly. Would you also happen to have a solution to remove the text please?
Thank you

0 Likes