Product Rows Not Displaying Correct # of Products - Impulse Theme

Highlighted
New Member
2 0 1

Hello, 

I've seen some similar solutions but nothing that was exactly my problem.

After adding some SEO & Sale apps and making minor changes to collections, my product page are displaying the rows incorrectly. Some rows will have 3 items, some 2 items and some are correct having 5 items. 

I am trying to figure out if it is an issue from an app or perhaps just a human error that can be fixed quickly.

Thanks for any input!

 

{%- 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 %}
  
  {% include 'hypervisual' %}

  {% 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">
      {{ 'collections.general.items_with_count' | t: count: collection.products_count }}
    </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>

  <div class="grid grid--uniform grid--collection">
    {%- 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 %}
<script type='application/json' class='bold-product-json'>{{ product | json }}</script>
      {% 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 %}
<script type='application/json' class='bold-product-json'>{{ product | json }}</script>
      {% 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": 5,
        "min": 2,
        "max": 5,
        "step": 1
      },
      {
        "type": "header",
        "content": "Products"
      },
      {
        "type": "range",
        "id": "per_row",
        "label": "Products per row",
        "default": 4,
        "min": 2,
        "max": 5,
        "step": 1
      },
      {
        "type": "range",
        "id": "rows_per_page",
        "label": "Rows per page",
        "default": 7,
        "min": 3,
        "max": 20,
        "step": 1
      }
    ]
  }
{% endschema %}

 

Highlighted
Shopify Partner
9671 1212 3392

Hello, @TormenterOcean 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

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

Tormenterocean.com

 

Please let me know if you need more information.

0 Likes