Help me increase minimum product grid columns in basic shopify theme.

Solved
Spazcraft
Tourist
4 0 1

Hello everyone,

I am looking to increase the basic columns of the default store template from 8 rows to 10. If anyone can help direct me to the code I need to edit or add would be appreciate it. I have a basic understanding how what I need to know, but can't seem to figure it out.

The store theme: www.tristars.ca 

KetanKumar
Shopify Partner
19008 1992 7021

@Spazcraft 

sorry for issue if possible to share issue image so i will guide you properly 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
satsinghrana
Shopify Partner
194 17 36

Hello @Spazcraft 

You need to increase the count of the products you want to show on a page in your themes collection template.

Hope this will help you.

Thanks

Please Like and Accept Solution if it helps you.
Get Support for Customization right away CLICK ME TO GET HELP NOW.
Our Shopify Apps: HERE
0 Likes
Spazcraft
Tourist
4 0 1

Hello thanks for the response I appreciate it.

https://tristars.ca/collections/stands - this is the page in question. Standard it allows maximum 8 rows per page (grid only). I want to know if there is a way to overide this and make it 10 rows per page. 

I assume it would be editing the theme 

 

Screen Shot 2021-05-07 at 14.26.14.png

0 Likes
KetanKumar
Shopify Partner
19008 1992 7021

@Spazcraft 

oh its simple can you please share the collection template code so i will update and also guide you

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Spazcraft
Tourist
4 0 1

@KetanKumar let me know if this is right

 

 

{% case section.settings.grid %}
  {% when 2 %}
    {%- assign max_height = 530 -%}
  {% when 3 %}
    {%- assign max_height = 345 -%}
  {% when 4 %}
    {%- assign max_height = 250 -%}
  {% when 5 %}
    {%- assign max_height = 195 -%}
{% endcase %}

{% if section.settings.layout == 'grid' %}
  {%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
  {%- assign limit = 16 -%}
{% endif %}

{% paginate collection.products by limit %}

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
    {%- assign is_filter_by_available = false -%}
    {%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
      {%- assign is_filter_by_available = true -%}
    {%- endif -%}

    {% if section.settings.show_collection_image and collection.image %}
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             data-image-loading-animation
        ></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
          <h1 class="collection-hero__title page-width">
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
          </h1>
        </div>
      </div>
      {% if is_filter_by_available == false and section.settings.sort_enable == false %}
        <div class="page-width">
          <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
        </div>
      {% endif %}
      {% if collection.description != blank %}
        <div class="rte collection-description page-width">
          {{ collection.description }}
        </div>
      {% endif %}
    {% else %}
      <div class="page-width">
        <div class="section-header text-center">
          <h1>
              <span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
              {{ collection.title }}
          </h1>
          {% if collection.description != blank %}
            <div class="rte">
              {{ collection.description }}
            </div>
          {% endif %}
          {% if is_filter_by_available == false and section.settings.sort_enable == false %}
            <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {% if is_filter_by_available or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
        <div class="page-width">
          <div class="filters-toolbar">
            <div class="filters-toolbar__item-wrapper">
              {% if section.settings.tags_enable %}
                {% unless collection.all_tags.size == 0 %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-select-input>
                        <option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
                        {% for tag in collection.all_tags %}
                          {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
                          <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
                {% endunless %}
              {% endif %}

              {% if section.settings.sort_enable %}
                <div class="filters-toolbar__item-child">
                  {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                  <label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
                  <div class="filters-toolbar__input-wrapper select-group">
                    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                      data-select-input
                    >
                      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                    {% include 'icon-chevron-down' %}
                  </div>
                </div>
              {% endif %}
            </div>

            <div class="filters-toolbar__item filters-toolbar__item--count">
              <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </header>

  <div class="page-width" id="Collection">
    {% 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 %}

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% else %}
      <ul class="list-view-items">
        {% for product in collection.products %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}

    {% if is_empty_collection %}
      <div class="grid__item small--text-center">
        <p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}

    {%- if paginate.pages > 1 -%}
      {% include 'pagination', paginate: paginate %}
    {%- endif -%}
  </div>
</div>

{% endpaginate %}



{% schema %}
{
  "name": {
    "cs": "Stránky s kolekcemi",
    "da": "Kollektionssider",
    "de": "Kategorie-Seiten",
    "en": "Collection pages",
    "es": "Páginas de colección",
    "fi": "Kokoelman sivut",
    "fr": "Pages de collections",
    "it": "Pagine di collezioni",
    "ja": "コレクションページ",
    "ko": "컬렉션 페이지",
    "nb": "Samlingssider",
    "nl": "Collectiepagina's",
    "pl": "Strony kolekcji",
    "pt-BR": "Páginas de coleções",
    "pt-PT": "Páginas de coleções",
    "sv": "Produktseriesidor",
    "th": "หน้าคอลเลกชัน",
    "tr": "Koleksiyon sayfaları",
    "vi": "Trang bộ sưu tập",
    "zh-CN": "产品系列页面",
    "zh-TW": "商品系列頁面"
  },
  "settings": [
    {
      "type": "select",
      "id": "layout",
      "label": {
        "cs": "Rozvržení",
        "da": "Layout",
        "de": "Layout",
        "en": "Layout",
        "es": "Diseño",
        "fi": "Asettelu",
        "fr": "Mise en page",
        "it": "Layout",
        "ja": "レイアウト",
        "ko": "레이아웃",
        "nb": "Oppsett",
        "nl": "Opmaak",
        "pl": "Układ",
        "pt-BR": "Layout",
        "pt-PT": "Esquema",
        "sv": "Layout",
        "th": "เลย์เอาต์",
        "tr": "Düzen",
        "vi": "Bố cục",
        "zh-CN": "布局",
        "zh-TW": "版面配置"
      },
      "default": "grid",
      "options": [
        {
          "value": "grid",
          "label": {
            "cs": "Mřížka",
            "da": "Gitter",
            "de": "Raster",
            "en": "Grid",
            "es": "Cuadrícula",
            "fi": "Ruudukko",
            "fr": "Grille",
            "it": "Griglia",
            "ja": "グリッド",
            "ko": "그리드",
            "nb": "Rutenett",
            "nl": "Raster",
            "pl": "Siatka",
            "pt-BR": "Grade",
            "pt-PT": "Grelha",
            "sv": "Rutnät",
            "th": "กริด",
            "tr": "Izgara",
            "vi": "Lưới",
            "zh-CN": "网格",
            "zh-TW": "網格"
          }
        },
        {
          "value": "list",
          "label": {
            "cs": "Seznam",
            "da": "Liste",
            "de": "Liste",
            "en": "List",
            "es": "Lista",
            "fi": "Luettelo",
            "fr": "Liste",
            "it": "Elenco",
            "ja": "リスト",
            "ko": "목록",
            "nb": "Liste",
            "nl": "Lijst",
            "pl": "Lista",
            "pt-BR": "Lista",
            "pt-PT": "Lista",
            "sv": "Lista",
            "th": "รายการ",
            "tr": "Liste",
            "vi": "Danh sách",
            "zh-CN": "列表",
            "zh-TW": "清單"
          }
        }
      ]
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "cs": "Počet produktů na řádek (jen mřížka)",
        "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)",
        "it": "Prodotti per riga (solo griglia)",
        "ja": "行あたりの商品数(グリッドのみ)",
        "ko": "열 별 제품 (그리드 전용)",
        "nb": "Produkter per rad (kun rutenett)",
        "nl": "Producten per rij (alleen raster)",
        "pl": "Liczba produktów na wiersz (tylko siatka)",
        "pt-BR": "Produtos por linha (somente grade)",
        "pt-PT": "Produtos por linha (somente grelha)",
        "sv": "Produkter per rad (endast rutnät)",
        "th": "สินค้าต่อแถว (กริดเท่านั้น)",
        "tr": "Satır başına ürün (yalnızca ızgara)",
        "vi": "Số sản phẩm trên một hàng (chỉ ở kiểu lưới)",
        "zh-CN": "每行产品数(仅限网格)",
        "zh-TW": "每列產品數 (僅限網格)"
      },
      "default": 4,
      "min": 2,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "id": "rows",
      "label": {
        "cs": "Počet řádků na stránku (jen mřížka)",
        "da": "Rækker pr. side (kun gitter)",
        "de": "Reihen per Seite (nur Raster)",
        "en": "Rows per page (grid only)",
        "es": "Filas por página (solo cuadrícula)",
        "fi": "Rivejä per sivu (vain ruudukko)",
        "fr": "Rangées par page (grille uniquement)",
        "it": "Righe per pagina (solo griglia)",
        "ja": "ページあたりの行数(グリッドのみ)",
        "ko": "페이지 별 열 (그리드 전용)",
        "nb": "Rader per side (kun rutenett)",
        "nl": "Rijen per pagina (alleen raster)",
        "pl": "Liczba wierszy na stronę (tylko siatka)",
        "pt-BR": "Linhas por página (somente grade)",
        "pt-PT": "Linhas por página (somente grelha)",
        "sv": "Rader per sida (endast rutnät)",
        "th": "แถวต่อหน้า (กริดเท่านั้น)",
        "tr": "Sayfa başına satır (yalnızca ızgara)",
        "vi": "Số hàng trong một trang (chỉ ở kiểu lưới)",
        "zh-CN": "每行产品数(仅限网格)",
        "zh-TW": "每頁列數 (僅限網格)"
      },
      "default": 2,
      "min": 2,
      "max": 8,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "label": {
        "cs": "Zobrazit obrázek kolekce",
        "da": "Vis kollektionsbillede",
        "de": "Kategorie-Foto anzeigen",
        "en": "Show collection image",
        "es": "Mostrar imagen de la colección",
        "fi": "Näytä kokoelman kuva",
        "fr": "Afficher l'image de la collection",
        "it": "Mostra immagine collezione",
        "ja": "コレクションの画像を表示する",
        "ko": "컬렉션 이미지 표시",
        "nb": "Vis samlingsbilde",
        "nl": "Collectieafbeelding weergeven",
        "pl": "Pokaż obraz kolekcji",
        "pt-BR": "Exibir imagem da coleção",
        "pt-PT": "Mostrar imagem da coleção",
        "sv": "Visa produktseriebilder",
        "th": "แสดงรูปภาพคอลเลกชัน",
        "tr": "Koleksiyon görselini göster",
        "vi": "Hiển thị hình ảnh bộ sưu tập",
        "zh-CN": "显示产品系列图片",
        "zh-TW": "顯示商品系列圖片"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "cs": "Zobrazit dodavatele produktů",
        "da": "Vis produktleverandører",
        "de": "Produktanbieter anzeigen",
        "en": "Show product vendors",
        "es": "Mostrar proveedores del producto",
        "fi": "Näytä tuotteen myyjät",
        "fr": "Afficher les vendeurs",
        "it": "Mostra fornitori prodotto",
        "ja": "商品の販売元を表示する",
        "ko": "제품 공급 업체 표시",
        "nb": "Vis produktleverandører",
        "nl": "Productleveranciers weergeven",
        "pl": "Pokaż dostawców produktu",
        "pt-BR": "Exibir fornecedores do produto",
        "pt-PT": "Mostrar fornecedores do produto",
        "sv": "Visa produktleverantörer",
        "th": "แสดงผู้ขายสินค้า",
        "tr": "Ürün satıcılarını göster",
        "vi": "Hiển thị nhà cung cấp sản phẩm",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "sort_enable",
      "label": {
        "cs": "Povolit řazení",
        "da": "Aktivér sortering",
        "de": "Sortieren erlauben",
        "en": "Enable sorting",
        "es": "Habilitar la función ordenar",
        "fi": "Ota lajittelu käyttöön",
        "fr": "Activer le tri",
        "it": "Permetti di ordinare",
        "ja": "並べ替えを有効にする",
        "ko": "정렬 사용",
        "nb": "Aktiver sortering",
        "nl": "Sortering inschakelen",
        "pl": "Włącz sortowanie",
        "pt-BR": "Habilitar organização",
        "pt-PT": "Ativar ordenação",
        "sv": "Aktivera sortering",
        "th": "เปิดใช้การจัดเรียง",
        "tr": "Sıralamayı etkinleştir",
        "vi": "Bật phân loại",
        "zh-CN": "启用排序",
        "zh-TW": "啟用排序"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "tags_enable",
      "label": {
        "cs": "Povolit filtrování podle štítku",
        "da": "Aktivér tagfiltrering",
        "de": "Tag-Filtern erlauben",
        "en": "Enable tag filtering",
        "es": "Habilitar filtro de etiquetas",
        "fi": "Ota tunnisteiden suodatus käyttöön",
        "fr": "Activer le filtrage par balises",
        "it": "Attiva filtro tag",
        "ja": "タグでの絞り込みを有効にする",
        "ko": "태그 필터링 사용",
        "nb": "Aktiver taggfiltrering",
        "nl": "Filteren op tags inschakelen",
        "pl": "Włącz filtrowanie tagów",
        "pt-BR": "Habilitar filtragem de tags",
        "pt-PT": "Ativar filtragem por etiqueta",
        "sv": "Aktivera taggfiltrering",
        "th": "เปิดใช้การกรองแท็ก",
        "tr": "Etiket filtrelemeyi etkinleştir",
        "vi": "Bật lọc thẻ",
        "zh-CN": "启用标签筛选",
        "zh-TW": "啟用標籤篩選功能"
      },
      "default": true
    }
  ]
}
{% endschema %}

 

Hopefully this is the right selection. collection-template.liquid 

0 Likes
Spazcraft
Tourist
4 0 1

Still trying to figure it out. Any guidance would be appreciated. 

0 Likes
KetanKumar
Shopify Partner
19008 1992 7021

This is an accepted solution.

@Spazcraft 

great also someone else same issue you can see in attachment

Solved_ Re_ Help me increase minimum product grid columns in basic shopify theme. - Shopify Community.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing