Re: Craft 2.0: How do you change the limit on the number of products shown on collection pages

Solved

Craft 2.0: How do you change the limit on the number of products shown on collection pages

TomMc
Excursionist
29 3 5

How do you change the upper limit on the number of products displayed on collection pages in Craft 2.0 theme? I have found instructions but none of them map onto the back end code of this theme. Thanks in advance. 

Accepted Solution (1)
TomMc
Excursionist
29 3 5

This is an accepted solution.

I ended up finding a solution that allowed me to have 25 products (sections) displayed in the product grid that is shown on any given collection page. Here is the solution for those wanting to do the same:

 

https://community.shopify.com/c/shopify-design/how-to-increase-product-per-page-limit-on-the-dawn-th...

 

This is important for our store as each collection shows variations in color of the same pattern (for printing on fabrics, wallpaper and other home goods) and customers can now compare all the color variations of a pattern in real time without having to click and go to another page. 

 

I had to make changes in two pages and only certain numbers work (see comments in the above linked-thread that has the solution). 

 

We don't plan on having any collections that go beyond 28 at the most so this is perfect for us. 

 

View solution in original post

Replies 6 (6)

ZestardTech
Shopify Partner
5833 1058 1396

Here are the steps to follow:

1.In your Shopify admin, go to "Online Store" > "Themes" and click "Actions" > "Edit code" for your current theme.

2.In the left-hand menu, navigate to "Templates" and find the template file for your collection page (usually named collection.liquid).

3.Open the collection.liquid file and locate the code that generates the product grid. This should be a for loop that iterates through the collection's products.

4.Within the for loop, you should see a line of code that sets the limit on the number of products displayed. It may look something like this:

{% for product in collection.products limit: 12 %}

The limit: 12 part specifies the maximum number of products to display. Change this number to your desired limit.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: [email protected]
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
TomMc
Excursionist
29 3 5

Thanks, ZestardTech.

 

I searched for files with 'collection' in the title and liquid appended on the end. I then searched within the files for 'limit' and didn't see a line like above. However, you can see a line with 'limit' in it in the featured.collection.liquid, for example. See below for the line, '{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}.'

 

I wonder if the code controlling limit of products displayed per page for a collection is inserted somewhere else for this theme. 

 

 

 

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{%- if section.settings.enable_quick_add -%}
  {{ 'quick-add.css' | asset_url | stylesheet_tag }}
  <script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign products_to_display = section.settings.collection.all_products_count

  if section.settings.collection.all_products_count > section.settings.products_to_show
    assign products_to_display = section.settings.products_to_show
    assign more_in_collection = true
  endif

  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
    assign show_mobile_slider = true
  endif

  assign show_desktop_slider = false
  if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
    assign show_desktop_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} isolate gradient">
  <div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
    <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
      {%- if section.settings.title != blank -%}
        <h2 class="title inline-richtext {{ section.settings.heading_size }}">{{ section.settings.title }}</h2>
      {%- endif -%}
      {%- if section.settings.description != blank
        or section.settings.show_description
        and section.settings.collection.description != empty
      -%}
        <div class="collection__description {{ section.settings.description_style }} rte">
          {%- if section.settings.show_description -%}
            {{ section.settings.collection.description }}
          {%- else -%}
            {{ section.settings.description -}}
          {%- endif %}
        </div>
      {%- endif -%}
    </div>

    <slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}">
      <ul
        id="Slider-{{ section.id }}"
        class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
        role="list"
        aria-label="{{ 'general.slider.name' | t }}"
      >
        {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
          <li
            id="Slide-{{ section.id }}-{{ forloop.index }}"
            class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
          >
            {% render 'card-product',
              card_product: product,
              media_aspect_ratio: section.settings.image_ratio,
              show_secondary_image: section.settings.show_secondary_image,
              show_vendor: section.settings.show_vendor,
              show_rating: section.settings.show_rating,
              show_quick_add: section.settings.enable_quick_add,
              section_id: section.id
            %}
          </li>
        {%- else -%}
          {%- for i in (1..4) -%}
            <li class="grid__item">
              {% render 'card-product', show_vendor: section.settings.show_vendor %}
            </li>
          {%- endfor -%}
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider or show_desktop_slider -%}
        <div class="slider-buttons no-js-hidden">
          <button
            type="button"
            class="slider-button slider-button--prev"
            name="previous"
            aria-label="{{ 'general.slider.previous_slide' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
          <div class="slider-counter caption">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ products_to_display }}</span>
          </div>
          <button
            type="button"
            class="slider-button slider-button--next"
            name="next"
            aria-label="{{ 'general.slider.next_slide' | t }}"
            aria-controls="Slider-{{ section.id }}"
          >
            {% render 'icon-caret' %}
          </button>
        </div>
      {%- endif -%}
    </slider-component>

    {%- if section.settings.show_view_all and more_in_collection -%}
      <div class="center collection__view-all">
        <a
          href="{{ section.settings.collection.url }}"
          class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
          aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
        >
          {{ 'sections.featured_collection.view_all' | t }}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.featured-collection.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Featured collection",
      "label": "t:sections.featured-collection.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "t:sections.featured-collection.settings.description.label"
    },
    {
      "type": "checkbox",
      "id": "show_description",
      "label": "t:sections.featured-collection.settings.show_description.label",
      "default": false
    },
    {
      "type": "select",
      "id": "description_style",
      "label": "t:sections.featured-collection.settings.description_style.label",
      "options": [
        {
          "value": "body",
          "label": "t:sections.featured-collection.settings.description_style.options__1.label"
        },
        {
          "value": "subtitle",
          "label": "t:sections.featured-collection.settings.description_style.options__2.label"
        },
        {
          "value": "uppercase",
          "label": "t:sections.featured-collection.settings.description_style.options__3.label"
        }
      ],
      "default": "body"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "t:sections.featured-collection.settings.collection.label"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 25,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "t:sections.featured-collection.settings.columns_desktop.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "t:sections.featured-collection.settings.full_width.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
      "type": "select",
      "id": "view_all_style",
      "label": "t:sections.featured-collection.settings.view_all_style.label",
      "options": [
        {
          "value": "link",
          "label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
        },
        {
          "value": "outline",
          "label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
        },
        {
          "value": "solid",
          "label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
        }
      ],
      "default": "solid"
    },
    {
      "type": "checkbox",
      "id": "enable_desktop_slider",
      "label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
      "default": false
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header.content"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
      "type": "checkbox",
      "id": "show_secondary_image",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
      "type": "checkbox",
      "id": "show_rating",
      "default": false,
      "label": "t:sections.featured-collection.settings.show_rating.label",
      "info": "t:sections.featured-collection.settings.show_rating.info"
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "default": false,
      "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
    },
    {
      "type": "header",
      "content": "t:sections.featured-collection.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "default": "2",
      "label": "t:sections.featured-collection.settings.columns_mobile.label",
      "options": [
        {
          "value": "1",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.presets.name"
    }
  ]
}
{% endschema %}

 

 

 

TomMc
Excursionist
29 3 5

I found this Shopify page on changing the number of products shown on collection pages:

 

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-... 

 

Could the main-collection-product-grid.liquid be the file to change? 

 

Per the above instructions you are to amend the following code:

 

{% paginate collection.products by 9 %}

 

The top line of this code section of main-collection-product-grid.liquid file might be pertinent:

 

{%- paginate collection.products by section.settings.products_per_page -%}
    {% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
    {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
      <facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
        <form class="facets-vertical-form" id="FacetSortForm">
          <div class="facet-filters sorting caption">
            <div class="facet-filters__field">
              <h2 class="facet-filters__label caption-large text-body">
                <label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
              </h2>
              <div class="select">
                {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                <select
                  name="sort_by"
                  class="facet-filters__sort select__select caption-large"
                  id="SortBy"
                  aria-describedby="a11y-refresh-page-message"
                >
                  {%- for option in collection.sort_options -%}
                    <option
                      value="{{ option.value | escape }}"
                      {% if option.value == sort_by %}
                        selected="selected"
                      {% endif %}
                    >
                      {{ option.name | escape }}
                    </option>
                  {%- endfor -%}
                </select>
                {% render 'icon-caret' %}
              </div>
            </div>
            <noscript>
              <button type="submit" class="facets__button-no-js button button--secondary">
                {{ 'products.facets.sort_button' | t }}
              </button>
            </noscript>
          </div>

          <div class="product-count-vertical light" role="status">
            <h2 class="product-count__text text-body">
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  {{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }}
                {%- elsif collection.products_count == collection.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                {%- else -%}
                  {{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }}
                {%- endif -%}
              </span>
            </h2>
            <div class="loading-overlay__spinner">
              <svg
                aria-hidden="true"
                focusable="false"
                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>
        </form>
      </facet-filters-form>
    {%- endif -%}

 

 

TomMc
Excursionist
29 3 5

Update:

 

Shopify limits in Craft 2.0 the number of products that can be shown to 24. 

 

I went into edit code mode. Under Templates, I selected collection.one-collection-page.json (this is a template that I hand-created to display each collection). I found this line of code:

 

"products_per_page": 24,

 

When I change 24 to the number of patterns that I want to show per page, Shopify won't accept it as the upper limit is a strict 24.  

 

Does anyone have any other workarounds for this? Thanks in advance, everyone. 

TomMc
Excursionist
29 3 5

If it is of help, this is the code for my personally created collections page template:

 

{
  "sections": {
    "main-collection-banner": {
      "type": "main-collection-banner",
      "custom_css": [

      ],
      "settings": {
        "show_collection_description": true,
        "show_collection_image": false,
        "color_scheme": "background-1"
      }
    },
    "fb6ff6b3-bd79-4459-94e0-dc0a5133e722": {
      "type": "rich-text",
      "blocks": {
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-0": {
          "type": "heading",
          "settings": {
            "heading": "",
            "heading_size": "h1"
          }
        },
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-1": {
          "type": "text",
          "settings": {
            "text": "<h3>Click on a pattern below to buy fabric or home goods with that pattern on it. <\/h3>"
          }
        },
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-2": {
          "type": "button",
          "settings": {
            "button_label": "",
            "button_link": "",
            "button_style_secondary": false,
            "button_label_2": "",
            "button_link_2": "",
            "button_style_secondary_2": false
          }
        }
      },
      "block_order": [
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-0",
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-1",
        "template--18680120148245__fb6ff6b3-bd79-4459-94e0-dc0a5133e722-16830434505f5bc28d-2"
      ],
      "settings": {
        "desktop_content_position": "center",
        "content_alignment": "center",
        "color_scheme": "background-1",
        "full_width": true,
        "padding_top": 0,
        "padding_bottom": 0
      }
    },
    "main-collection-product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 24,
        "columns_desktop": 5,
        "image_ratio": "square",
        "show_secondary_image": false,
        "show_vendor": false,
        "show_rating": false,
        "enable_quick_add": false,
        "enable_filtering": false,
        "filter_type": "horizontal",
        "enable_sorting": false,
        "columns_mobile": "2",
        "padding_top": 20,
        "padding_bottom": 68
      }
    }
  },
  "order": [
    "main-collection-banner",
    "fb6ff6b3-bd79-4459-94e0-dc0a5133e722",
    "main-collection-product-grid"
  ]
}
TomMc
Excursionist
29 3 5

This is an accepted solution.

I ended up finding a solution that allowed me to have 25 products (sections) displayed in the product grid that is shown on any given collection page. Here is the solution for those wanting to do the same:

 

https://community.shopify.com/c/shopify-design/how-to-increase-product-per-page-limit-on-the-dawn-th...

 

This is important for our store as each collection shows variations in color of the same pattern (for printing on fabrics, wallpaper and other home goods) and customers can now compare all the color variations of a pattern in real time without having to click and go to another page. 

 

I had to make changes in two pages and only certain numbers work (see comments in the above linked-thread that has the solution). 

 

We don't plan on having any collections that go beyond 28 at the most so this is perfect for us.