{%- paginate collection.products by 40 -%} shows only two rows of products

eco-manuel
New Member
2 0 0

Hello,

I am only able to show 2 rows of products in all our collection pages, and I struggle to increase this number. This must be related to the theme. I have already hard coded the number to 40 in the collection.liquid section but this does not work. How do I increase the number of rows per collection page?

I am using the "Boost" theme and our shop url is www.zootsports.eu

Any hint to solve the issue would be really appreciated.

 

Thans

Manuel

0 Likes
dmwwebartisan
Shopify Partner
7310 1726 2302

@eco-manuel 

Please share your store url & collection.liquid file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
eco-manuel
New Member
2 0 0

Sure. Our shop url is www.zootsports.eu, and below is the entire collection.liquid code:

I managed to show more products by changing the code to "10" from "2":

{%- assign pagination_count = section.settings.grid | times: 10 -%}

 

But I fear that the above brute force method is not making my page slow.

 

<!-- /sections/collections.liquid -->

{%- assign showQuickView = settings.quickview_enable -%}
{%- assign showReviews = section.settings.enable_reviews -%}
{%- assign showSort = section.settings.enable_sort -%}
{%- assign enableSwatches = settings.color_swatches -%}

{%- assign transparency_class = '' -%}
{%- if section.settings.transparent-%}
  {%- assign transparency_class = 'hero__content--transparent' -%}
{%- endif -%}

{%- assign pagination_count = section.settings.grid | times: 10 -%}
{%- case section.settings.grid -%}
  {%- when 2 -%}
    {%- assign grid_width_large = 'large-up--one-half' -%}
    {%- assign grid_width_medium = 'medium--one-half' -%}
    {%- assign grid_width_small = 'small--one-half' -%}
  {%- when 3 -%}
    {%- assign grid_width_large = 'large-up--one-third' -%}
    {%- assign grid_width_medium = 'medium--one-third' -%}
    {%- assign grid_width_small = 'small--one-whole' -%}
  {%- when 4 -%}
    {%- assign grid_width_large = 'large-up--one-quarter' -%}
    {%- assign grid_width_medium = 'medium--one-half' -%}
    {%- assign grid_width_small = 'small--one-half' -%}
  {%- when 5 -%}
    {%- assign grid_width_large = 'large-up--one-fifth' -%}
    {%- assign grid_width_medium = 'medium--one-third' -%}
    {%- assign grid_width_small = 'small--one-half' -%}
  {%- else -%}
    {%- assign grid_width_large = 'large-up--one-sixth' -%}
    {%- assign grid_width_medium = 'medium--one-third' -%}
    {%- assign grid_width_small = 'small--one-half' -%}
{%- endcase -%}

{%- paginate collection.products by pagination_count -%}

<section class="collection collection-{{ collection.handle }}"
  data-section-id="{{ section.id }}"
  data-section-type="collection"
  data-section-type="collection-grid"
  data-section-type="collection-hero"
  data-reviews="{{ showReviews }}"
  data-swatches="{{ enableSwatches }}"
  data-sort="{{ showSort }}">

  {%- if collection.image and section.settings.show_image -%}
    {%- assign img_url = collection.image.src | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    <div class="collection__image wide-image preventOverflow {{ section.settings.height }} {{ section.settings.text_color }}" id="FeaturedImage-{{ section.id }}"
    {%- if section.settings.parallax -%}
      data-parallax-src="{{ collection.image | img_url: '18x'  }}"
      data-src="{{ img_url }}"
      data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
      data-aspectratio="{{  collection.image.aspect_ratio }}"
      data-sizes="auto"
    {%- endif -%}>
      <div class="collection__title hero__content__wrapper {{ section.settings.flex_align }} {{ transparency_class }}">
        <div class="hero__content preventOverflowContent">
          {%- if section.settings.show_title -%}
            <h1 class="hero__title">{{ collection.title }}</h1>
          {%- endif -%}
          {%- if collection.description != '' and section.settings.show_description -%}
            <div class="hero__description rte">{{ collection.description }}</div>
          {%- endif -%}
        </div>
      </div>
      <div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ section.settings.overlay_opacity | times: 0.01 }};"></div>
      {%- if section.settings.height == 'image-height' -%}
        <img class="lazyload responsive-wide-image" {% if section.settings.parallax %} style="opacity: 0;"{% endif %}
          alt="{{ collection.image.alt | default: section.settings.title }}"
          src="{{ collection.image | img_url: '18x'  }}"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
          data-aspectratio="{{ collection.image.aspect_ratio }}"
          data-parent-fit="cover"
          data-sizes="auto"/>
      {%- endif -%}
      {%- if section.settings.parallax == false and section.settings.height != 'image-height' -%}
        <div class="background-size-cover lazyload"  data-bgset="{% include 'bgset', image: collection.image %}"></div>
      {%- endif -%}
      <noscript>
        <img src="{{ collection.image | img_url: '1440x' }}" alt="{{ collection.image.alt | default: collection.title }}" class="responsive-wide-image"/>
      </noscript>
    </div>

  {%- else -%}
    <div class="collection__title {{ section.settings.text_color }} {{ section.settings.flex_align }}">
      {%- if collection.handle != 'all' and section.settings.show_title -%}
        <h1 class="hero__title">{{ collection.title }}</h1>
      {%- endif -%}
      {%- if collection.description != '' and section.settings.show_description -%}
        <div class="hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>
  {%- endif -%}

  {%- if showSort -%}
  <nav class="collection__nav collection__nav--sort">
    <div class="collection__sorting boost-pfs-filter-top-sorting"></div>
  </nav>
  {%- endif -%}  

  <div class="bc-page-width">
    <div class="boost-pfs-sidebar">
      <div class=" boost-pfs-filter-tree-mobile-button"></div>
      <div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
    </div>
  
    <div class="boost-pfs-product-list">
      <div class="product-grid boost-pfs-filter-products">
        {% assign is_old_theme_verion = false %}
        {%- for product in collection.products -%}
          {%- assign grid_int = section.settings.grid | times:1 -%}
          {%- assign animation_delay = forloop.index0  | modulo:grid_int | times:1 -%}
          {% capture product_grid_item %}
          {%- include 'product-grid-item', quick_view: showQuickView -%}
          {% endcapture %}

          {{ product_grid_item }}
        
          {%- if showQuickView -%}
            {% if forloop.index0 == 0 and product_grid_item contains 'Product0-collection' %}
              {% assign is_old_theme_verion = true %}
            {% endif %}
        	  {%- if is_old_theme_verion -%}
        	    <div class="modal__overlay quicklook" id="Product{{ forloop.index0 }}-{{section.id }}">
                <section class="modal__outer">
                 {%- include 'product-quick-view' -%}
                </section>
              </div>
        	  {%- else -%}
              <div class="modal__overlay quicklook" id="Product{{ forloop.index0 }}{{ paginate.current_page }}-{{section.id }}">
                <section class="modal__outer">
                 {%- include 'product-quick-view' -%}
                </section>
              </div>
        	  {%- endif -%}
          {%- endif -%}
        {%- endfor -%}
      </div>    

      <div class="boost-pfs-filter-load-more"></div>
      <div class="boost-pfs-filter-bottom-pagination"></div>  
    </div>
  </div>  
</section>



{%- endpaginate -%}

<script>
  // Declare boostPFSThemeConfig variable
  var boostPFSThemeConfig = {
    label: {
      sorting: {% assign temp = 'collections.sorting.title' | t  %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Sorting" {% endunless %},
      sorting_best_selling: {% assign temp = 'collections.sorting.best_selling' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Best Selling" {% endunless %},
      sorting_featured: {% assign temp = 'collections.sorting.featured' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Featured" {% endunless %},
      sorting_title_ascending: {% assign temp = 'collections.sorting.az' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Alphabetically, A-Z" {% endunless %},
      sorting_title_descending: {% assign temp = 'collections.sorting.za' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Alphabetically, Z-A" {% endunless %},
      sorting_price_ascending: {% assign temp = 'collections.sorting.price_ascending' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Lowest Price" {% endunless %},
      sorting_price_descending: {% assign temp = 'collections.sorting.price_descending' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Highest Price" {% endunless %},
      sorting_date_ascending: {% assign temp = 'collections.sorting.date_ascending' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Date, Old to New" {% endunless %},
      sorting_date_descending: {% assign temp = 'collections.sorting.date_descending' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Date, New to Old" {% endunless %},
      sorting_sale_descending: {% assign temp = 'collections.sorting.sale_descending' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "% Off" {% endunless %},
      sorting_relevance: {% assign temp = 'collections.sorting.relevance' | t %} {% unless temp contains 'translation missing'  %} "{{ temp }}" {% else %} "Relevance" {% endunless %},
      
      sale: {{ 'products.product.on_sale' | t | json }},
      sold_out: {{ 'products.product.sold_out' | t | json }},
      from: {{ 'products.general.from' | t | json }},
      quick_view: {{ 'products.general.quick_view' | t | json }},
    },
    custom: {
      products_per_page: {% if pagination_count %} {{ pagination_count | at_most: 50 | json }} {% else %} 24 {% endif %},
      products_per_row: {% if section.settings.grid %} {{ section.settings.grid | json }} {% else %} 4 {% endif %},
      quickview_enable: {% if settings.quickview_enable != nil %} {{ settings.quickview_enable | json }} {% else %} true {% endif %},
      enable_reviews: {% if section.settings.enable_reviews %} {{ section.settings.enable_reviews | json }} {% else %} false {% endif %},
      enable_yotpo: {% if settings.enable_yotpo %} {{ settings.enable_yotpo | json }} {% else %} false {% endif %},
      yotpo_ID: {% if settings.yotpo_ID %} {{ settings.yotpo_ID | json }} {% else %} "" {% endif %},
      image_hover_enable: {{ settings.image_hover_enable | json }},
      grid_int: {{ section.settings.grid | json }},
      endless_scroll: {% if settings.endless_scroll %}{{ settings.endless_scroll | json }} {% else %} false {% endif %},
    }
  };
</script>
{% schema %}


  {
      "name": "Collection page",
      "settings": [
        {
          "type": "checkbox",
          "id": "enable_sort",
          "label": "Show sorting",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "collection_tags",
          "label": "Enable collection filtering",
          "info": "Allow customers to filter collections by tag."
        },
        {
          "type": "header",
          "content": "Title and Description"
        },
        {
          "type": "checkbox",
          "id": "show_title",
          "label": "Show collection title",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_description",
          "label": "Show collection description",
          "default": true
        },
        {
          "type": "select",
          "id": "text_color",
          "label": "Text color",
          "default": "text-dark",
          "options": [
            { "value": "text-light", "label": "White"},
            { "value": "text-dark", "label": "Dark"}
          ]
        },
        {
          "type": "select",
          "id": "flex_align",
          "label": "Text alignment",
          "default": "align--middle-left",
          "options": [
            { "value": "align--top-left", "label": "Top left" },
            { "value": "align--top-right", "label": "Top right" },
            { "value": "align--middle-left", "label": "Center left" },
            { "value": "align--middle-center", "label": "Center center" },
            { "value": "align--middle-right", "label": "Center right" },
            { "value": "align--bottom-left", "label": "Bottom left" },
            { "value": "align--bottom-right", "label": "Bottom right" }
          ]
        },
        {
          "type": "checkbox",
          "id": "transparent",
          "label": "Transparent text background",
          "default": false
        },
        {
          "type": "header",
          "content": "Collection image"
        },
        {
          "type": "checkbox",
          "id": "show_image",
          "label": "Show collection image",
          "default": true
        },
        {
          "type": "select",
          "id": "height",
          "label": "Image height",
          "default": "screen-height-one-third",
          "options": [
            { "value": "screen-height-one-half", "label": "1/2 of screen"},
            { "value": "screen-height-one-third", "label": "1/3 of screen"},
            { "value": "five-fifty-height-hero ", "label": "550px" },
            { "value": "four-fifty-height-hero", "label": "450px" },
            { "value": "three-fifty-height-hero", "label": "350px" },
            { "value": "two-fifty-height-hero", "label": "250px" },
            { "value": "image-height", "label": "Image height" }
          ]
        },
        {
          "type": "checkbox",
          "id": "parallax",
          "default": false,
          "label": "Enable parallax scroll"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Opacity",
          "min": 0,
          "max": 90,
          "step": 5,
          "unit": "%",
          "default": 0
        },
        {
          "type": "color",
          "id": "overlay_color",
          "label": "Overlay color",
          "default": "#000"
        },
        {
          "type": "header",
          "content": "Products grid"
        },
        {
          "type":    "range",
          "id":      "grid",
          "min":     3,
          "max":     10,
          "step":    1,
          "label":   "Products per row",
          "default": 6
        },
        {
          "type": "checkbox",
          "id": "enable_reviews",
          "label": "Show review stars",
          "info": "Install Shopify's free [Product Reviews app](https://apps.shopify.com/product-reviews) before enabling this option.",
          "default": false
        }
      ]
  }
{% endschema %}
0 Likes