How to filter top 10 best-sellers on Stiletto theme collection page?

[Aneby]

Hi,

I've created a collection page for 'best-sellers'.

The problem I'm facing is that I'm unable to filter by best-selling and limit to the top 10 products. It's pulling through all products in my store. 😞

Does anyone know a workaround for this?

I'm using the Stiletto theme.

Thanks

Aneby

[kevinkarma55]

Hi Aneby,

I don't have a Stiletto Theme, but I am sure most themes are similar, so follow these steps:

1. find file name main-collection.liquid OR collection.liquid

2. Find a line of code similar to this {%- for product in collection.products -%}

3. and replace it with following: 

{% if collection.handle == 'best-sellers' and forloop.index == 11 %}
{% break %}
{% endif %}

[Aneby]

Hi Kevin,

Thank you for the suggested solution.

I've managed to locate main-collection-product-grid.liquid and found the below code:

{% for product in collection.products %}
{%

However, when I added your code the red squiggly lines appeared?

[kevinkarma55]

Do you mind sharing a Screenshot of the code or a paste the code file?

[Aneby]

Hey Kevin,

Please see below

Cheers

Ryan

{%- liquid
  assign per_page = section.settings.rows | times: section.settings.columns
  assign paginated = false
  if section.settings.display_type == 'all'
    assign paginated = true
  endif
-%}
{%- capture image_sizes -%}
  (min-width: 720px) calc(calc(100vw - calc(2 * clamp(18px, 3.3vw, 3.3vw))) / {{ section.settings.columns }}),
  calc(calc(100vw - calc(2 * clamp(18px, 3.3vw, 3.3vw))) / {{ section.settings.mobile_columns }})
{%- endcapture -%}

{% paginate collections by per_page %}
  <div
    class="
      list-collections
      list-collections--mobile-per-view-{{ section.settings.mobile_columns }}
      list-collections--per-view-{{ section.settings.columns }}
      list-collections--item-label-style-{{ section.settings.label_style }}
      page
      {% if settings.enable_section_animations and section.settings.enable_animation %}
        animation
        animation--list-collections
      {% endif %}
    "
    data-section-id="{{ section.id }}"
    data-section-type="list-collections"
    data-collection-columns="{{ section.settings.columns }}"
    data-mobile-collection-columns="{{ section.settings.mobile_columns }}"
  >
    <div class="list-collections__inner page__inner">
      <header class="list-collections__header page__header">
        <h1 class="list-collections__heading ff-heading fs-heading-1-base ta-c">{{ page_title }}</h1>
      </header>

      <div class="list-collections__grid">
        {%- if section.settings.display_type == 'all' -%}
          {%- for collection in collections -%}
            {%
              render 'collection-item' with
              collection: collection,
              aspect_ratio: section.settings.collection_listing_aspect_ratio,
              label_style: section.settings.label_style,
              overlay_text_color: section.settings.overlay_text_color,
              overlay_title_background: section.settings.overlay_title_background,
              overlay_title_background_style: section.settings.overlay_title_background_style
              image_sizes: image_sizes
            %}
          {%- endfor -%}
        {%- else -%}
          {%- for collection_item in section.settings.collection_list -%}
            {%
              render 'collection-item' with
              collection: collection_item,
              aspect_ratio: section.settings.collection_listing_aspect_ratio,
              label_style: section.settings.label_style,
              overlay_text_color: section.settings.overlay_text_color,
              overlay_title_background: section.settings.overlay_title_background,
              overlay_title_background_style: section.settings.overlay_title_background_style,
              image_sizes: image_sizes
            %}
          {%- else -%}
            {%- for i in (1..per_page) -%}
              {%
                render 'collection-item' with
                collection: collection,
                aspect_ratio: section.settings.collection_listing_aspect_ratio,
                label_style: section.settings.label_style,
                overlay_text_color: section.settings.overlay_text_color,
                overlay_title_background: section.settings.overlay_title_background,
                overlay_title_background_style: section.settings.overlay_title_background_style
                image_sizes: image_sizes,
              %}
            {%- endfor -%}
          {%- endfor -%}
        {%- endif -%}
      </div>

      {% if paginated %}
        <div>
          {% if paginate.pages > 1 %}
            {%
              render 'pagination' with
              paginate: paginate,
              type: 'general.pagination.collections',
              show_item_count: true
            %}
          {% else %}
            {%
              render 'pagination' with
              paginate: paginate,
              type: 'general.pagination.collections',
              display_paginate_item_count_only: true
            %}
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% endpaginate %}

{% schema %}
{
  "name": "t:sections.main_list_collections.name",
  "tag": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main_list_collections.settings.paragraph.content"
    },
    {
      "id": "display_type",
      "type": "radio",
      "label": "t:sections.main_list_collections.settings.display_type.label",
      "default": "all",
      "options": [
        {
          "value": "all",
          "label": "t:sections.main_list_collections.settings.display_type.options__1"
        },
        {
          "value": "selected",
          "label": "t:sections.main_list_collections.settings.display_type.options__2"
        }
      ]
    },
    {
      "id": "collection_list",
      "type": "collection_list",
      "label": "t:sections.collection_sections_shared.settings.collection_list.label"
    },
    {
      "type": "select",
      "id": "columns",
      "label": "t:sections.collection_sections_shared.settings.collection_columns.label",
      "default": "3",
      "options": [
        {
          "value": "3",
          "label": "t:sections.collection_sections_shared.settings.columns.option_3"
        },
        {
          "value": "4",
          "label": "t:sections.collection_sections_shared.settings.columns.option_4"
        },
        {
          "value": "5",
          "label": "t:sections.collection_sections_shared.settings.columns.option_5"
        }
      ]
    },
    {
      "type": "select",
      "id": "mobile_columns",
      "label": "t:sections.collection_sections_shared.settings.mobile_collection_columns.label",
      "default": "2",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection_sections_shared.settings.mobile_columns.option_1"
        },
        {
          "value": "2",
          "label": "t:sections.collection_sections_shared.settings.mobile_columns.option_2"
        }
      ]
    },
    {
      "type": "select",
      "id": "rows",
      "label": "t:sections.collection_sections_shared.settings.rows.label",
      "default": "4",
      "options": [
        {
          "value": "3",
          "label": "t:sections.collection_sections_shared.settings.rows.option_3"
        },
        {
          "value": "4",
          "label": "t:sections.collection_sections_shared.settings.rows.option_4"
        },
        {
          "value": "5",
          "label": "t:sections.collection_sections_shared.settings.rows.option_5"
        },
        {
          "value": "6",
          "label": "t:sections.collection_sections_shared.settings.rows.option_6"
        },
        {
          "value": "7",
          "label": "t:sections.collection_sections_shared.settings.rows.option_7"
        },
        {
          "value": "8",
          "label": "t:sections.collection_sections_shared.settings.rows.option_8"
        },
        {
          "value": "9",
          "label": "t:sections.collection_sections_shared.settings.rows.option_9"
        },
        {
          "value": "10",
          "label": "t:sections.collection_sections_shared.settings.rows.option_10"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:shared.settings.collection_listing.header_collection_listing.content"
    },
    {
      "type": "select",
      "id": "collection_listing_aspect_ratio",
      "label": "t:shared.settings.collection_listing.collection_listing_aspect_ratio.label",
      "default": "square",
      "options": [
        {
          "value": "natural",
          "label": "t:shared.settings.aspect_ratio.option_natural"
        },
        {
          "value": "square",
          "label": "t:shared.settings.aspect_ratio.option_square"
        },
        {
          "value": "portrait",
          "label": "t:shared.settings.aspect_ratio.option_portrait"
        },
        {
          "value": "landscape",
          "label": "t:shared.settings.aspect_ratio.option_landscape"
        }
      ]
    },
    {
      "type": "select",
      "id": "label_style",
      "label": "t:shared.settings.collection_listing.label_style.label",
      "default": "overlay",
      "options": [
        {
          "value": "overlay",
          "label": "t:shared.settings.collection_listing.label_style.option_overlay"
        },
        {
          "value": "beneath",
          "label": "t:shared.settings.collection_listing.label_style.option_beneath"
        }
      ]
    },
    {
      "type": "select",
      "id": "overlay_title_background_style",
      "label": "t:shared.settings.collection_listing.overlay_title_background_style.label",
      "default": "gradient",
      "options": [
        {
          "value": "solid",
          "label": "t:shared.settings.collection_listing.overlay_title_background_style.option_solid"
        },
        {
          "value": "gradient",
          "label": "t:shared.settings.collection_listing.overlay_title_background_style.option_gradient"
        }
      ]
    },
    {
      "type": "color",
      "id": "overlay_text_color",
      "label": "t:shared.settings.collection_listing.overlay_text_color.label",
      "default": "#fff"
    },
    {
      "type": "color",
      "id": "overlay_title_background",
      "label": "t:shared.settings.collection_listing.overlay_title_background.label",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "t:shared.settings.section_style.header_style.content"
    },
    {
      "id": "enable_animation",
      "type": "checkbox",
      "label": "t:shared.settings.section_style.enable_animation.label",
      "info": "t:shared.settings.section_style.enable_animation.info",
      "default": true
    }
  ]
}
{% endschema %}

[kevinkarma55]

it seems like item are render in this file: collection-item.liquid

[Aneby]

This is the code from collection-item.liquid 🙂

{%- comment -%}
  Pass these variables into snippet:

  Required:

  * collection: Collection object
  * label_style: String
  * overlay_title_background: Color_picker value
  * overlay_title_background_style: String
  * image_sizes: String (passed to image as sizes attribute)

  Optional:

  * aspect_ratio: String
  * placeholder: Bool - show placeholder content if passed
{%- endcomment -%}

{%- liquid
  assign label_is_overlay = false

  if label_style == 'overlay'
    assign label_is_overlay = true
  endif
-%}
{% capture collection_label %}
  <div class="collection-item__label">
    <h4 class="collection-item__title fs-body-100 {% if label_is_overlay %}ff-heading{% else %}ff-body{% endif %}">
      {%- if label_is_overlay -%}
        <span>
          {%- if placeholder -%}
            {{ 'collections.general.collection_label' | t }}
          {%- else -%}
            {{ collection.title }}
          {%- endif -%}
        </span>
        <span class="collection-item__icon">
          {%- render 'icon' with icon: 'arrow-short' -%}
        </span>
      {%- else -%}
        {%- if placeholder -%}
          {{ 'collections.general.collection_label' | t }}
        {%- else -%}
          <a href="{{ collection.url }}">{{ collection.title }}</a>
        {%- endif -%}
      {%- endif -%}
    </h4>
  </div>
{% endcapture %}

<div
  class="
    collection-item
    collection-item--label-{{ label_style }}
    collection-item--label-background-{{ overlay_title_background_style }}
    animation--item
  "
  style="
    --overlay-text-color: {{ section.settings.overlay_text_color }};
    --label-background: {{ overlay_title_background }};
    --label-gradient-start: {{ overlay_title_background | color_modify: 'alpha', 0.4 }};
    --label-gradient-mid: {{ overlay_title_background | color_modify: 'alpha', 0.2 }};
    --label-gradient-end: {{ overlay_title_background | color_modify: 'alpha', 0 }};
  "
>
  {%- capture wrapping_tag -%}
    {%- if include_placeholder -%}div{%- else -%}a{%- endif -%}
  {%- endcapture -%}
  {%- capture wrapping_attributes -%}
    {%- unless include_placeholder -%}href="{{ collection.url }}" aria-label="{{ collection.title }}"{%- endunless -%}
  {%- endcapture -%}
  <{{ wrapping_tag }}
    {{ wrapping_attributes }}
    class="collection-item__image-wrapper hover"
  >
    {%
      render 'image' with
      image: collection.featured_image,
      wrapper_class: 'collection-item__image',
      aspect_ratio: aspect_ratio,
      placeholder_name: 'collection-1',
      include_placeholder: true,
      sizes: image_sizes,
      src_set_type: "grid"
    %}

    {%- if label_is_overlay -%}
      {{ collection_label }}
    {%- endif -%}
  </{{ wrapping_tag }}>

  {%- unless label_is_overlay -%}
    {{ collection_label }}
  {%- endunless -%}
</div>

[kevinkarma55]

you sure above code is from: main-collection-product-grid.liquid

[Aneby]

Sorry the code before was from collection-item.liquid

The code for main-collection-product-grid.liquid is here: 

{%- liquid
  assign paginated = false
  if section.settings.pagination == 'paginated'
    assign paginated = true
  endif

  assign per_page = section.settings.rows | times: section.settings.columns
  assign filter_bar_enabled = false
  if section.settings.show_item_count or section.settings.show_sort or section.settings.show_filters
    assign filter_bar_enabled = true
  endif
-%}

<section
  data-section-id="{{ section.id }}"
  data-section-type="collection"
  data-pagination-type="{{ section.settings.pagination }}"
  data-collection-item-count="{{ collection.all_products_count }}"
  data-collection-items-per-page="{{ per_page }}"
  data-collection-columns="{{ section.settings.columns }}"
  class="
    section
    section--includes-product-items
    section--full-width
    collection
    collection--columns-{{ section.settings.columns }}
    collection--pagination-{{ section.settings.pagination }}
    {% if filter_bar_enabled %}collection--has-filter-bar{% endif %}
    {% if settings.enable_section_animations and section.settings.enable_animation %}
      animation
      animation--collection
    {% endif %}
  "
>
  {%- if section.settings.divider_style == 'solid' -%}
    <div class="collection__divider"></div>
  {%- endif -%}
  <div class="collection__inner">
    {%- if collection.all_products_count > 0 -%}
      <script type="application/json" data-tags>
        {% if collection.all_tags.size > 0 %}
          [
            {%- for tag in collection.all_tags -%}
              { "label": "{{ tag | escape }}", "handle": "{{ tag | handleize }}" }
              {%- if forloop.last == false -%}, {%- endif -%}
            {%- endfor -%}
          ]
        {% else %}
          []
        {% endif %}
      </script>

      {% paginate collection.products by per_page %}
        <div class="collection__container">
          <div class="collection__content">
            {%
              render 'filter-bar' with
              results: collection,
              show_item_count: section.settings.show_item_count,
              show_sort: section.settings.show_sort,
              show_filters: section.settings.show_filters,
              show_swatch_filters: section.settings.show_swatch_filters,
              show_chip_filters: section.settings.show_chip_filters,
              enable_sticky_filter_bar: section.settings.enable_sticky_filter_bar,
              collapse_filter_bar: section.settings.collapse_filter_bar,
              chip_layout: section.settings.chip_layout
            %}

            {%
              render 'mobile-filters' with
              results: collection,
              show_sort: section.settings.show_sort,
              show_filters: section.settings.show_filters,
              enable_sticky_filter_bar: section.settings.enable_sticky_filter_bar
            %}

            <div class="collection__main-area">
              <div class="collection__window">
                <div class="collection__loading" data-loading>
                  {%- render 'loader' -%}
                </div>

                <div
                  id="root"
                  class="animation--collection-items"
                  data-partial
                  data-collection-products-count="{{ collection.products_count }}"
                >
                  <div
                    class="
                      collection__products
                      collection__infinite-container
                      {% if collection.products_count == 0 %}
                        collection__products--no-products
                      {% endif %}
                    "
                  >
                    {% for product in collection.products %}
                      {%
                        render 'product-item' with
                        prod: product,
                        product_columns: section.settings.columns,
                        aspect_ratio: settings.product_listing_aspect_ratio,
                        has_grid_reveal: true
                      %}
                    {% else %}
                      <div class="collection__empty">
                        <div>{{ 'collections.general.no_products' | t }}</div>
                        <button type="button" class="btn btn--text-link" data-clear-all-filters>
                          {{ 'filters.clear_filters' | t }}
                        </button>
                      </div>
                    {% endfor %}
                  </div>

                  {% unless paginated %}
                    <div>
                      {%
                        render 'pagination' with
                        paginate: paginate,
                        type: 'general.pagination.products',
                        display_paginate_item_count_only: true
                      %}
                      <div class="collection__infinite-trigger">
                        {% if paginate.next %}
                          <a href="{{ paginate.next.url }}" class="btn btn--secondary no-transition" data-click-to-load>
                            {{- 'general.pagination.load_more' | t -}}
                          </a>
                        {% endif %}
                      </div>
                    </div>
                  {% endunless %}

                  {% if paginated %}
                    <div>
                      {% if paginate.pages > 1 %}
                        {%
                          render 'pagination' with
                          paginate: paginate,
                          type: 'general.pagination.products',
                          show_item_count: true
                        %}
                      {% else %}
                        {%
                          render 'pagination' with
                          paginate: paginate,
                          type: 'general.pagination.products',
                          display_paginate_item_count_only: true
                        %}
                      {% endif %}
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endpaginate %}

      {%
        render 'filter-drawer' with
        results: collection,
        show_sort: section.settings.show_sort,
        show_filters: section.settings.show_filters,
        show_swatch_filters: section.settings.show_swatch_filters,
        show_chip_filters: section.settings.show_chip_filters,
        chip_layout: section.settings.chip_layout,
        collapse_filter_groups_mobile: section.settings.collapse_filter_groups_mobile
      %}
    {%- else -%}
      <div class="collection__empty ta-c">
        <p class="fs-body-100 fs-body-200-ns">{{ 'collections.general.no_matches' | t }}</p>
        <a class="btn btn--text-link" href="{{ routes.all_products_collection_url }}">{{ 'general.404.link' | t }}</a>
      </div>
    {%- endif -%}
  </div>
</section>

{% schema %}
{
  "name": "t:sections.main_collection_product_grid.name",
  "class": "collection-section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.main_collection_product_grid.settings.collection__header.content"
    },
    {
      "type": "select",
      "id": "columns",
      "label": "t:sections.collection_sections_shared.settings.collection_columns.label",
      "default": "4",
      "options": [
        {
          "value": "2",
          "label": "t:sections.collection_sections_shared.settings.columns.option_2"
        },
        {
          "value": "3",
          "label": "t:sections.collection_sections_shared.settings.columns.option_3"
        },
        {
          "value": "4",
          "label": "t:sections.collection_sections_shared.settings.columns.option_4"
        },
        {
          "value": "5",
          "label": "t:sections.collection_sections_shared.settings.columns.option_5"
        }
      ]
    },
    {
      "type": "select",
      "id": "rows",
      "label": "t:sections.collection_sections_shared.settings.rows.label",
      "default": "4",
      "options": [
        {
          "value": "3",
          "label": "t:sections.collection_sections_shared.settings.rows.option_3"
        },
        {
          "value": "4",
          "label": "t:sections.collection_sections_shared.settings.rows.option_4"
        },
        {
          "value": "5",
          "label": "t:sections.collection_sections_shared.settings.rows.option_5"
        },
        {
          "value": "6",
          "label": "t:sections.collection_sections_shared.settings.rows.option_6"
        },
        {
          "value": "7",
          "label": "t:sections.collection_sections_shared.settings.rows.option_7"
        },
        {
          "value": "8",
          "label": "t:sections.collection_sections_shared.settings.rows.option_8"
        },
        {
          "value": "9",
          "label": "t:sections.collection_sections_shared.settings.rows.option_9"
        },
        {
          "value": "10",
          "label": "t:sections.collection_sections_shared.settings.rows.option_10"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "show_item_count",
      "label": "t:shared.settings.show_item_count.label",
      "default": true
    },
    {
      "type": "header",
      "content": "t:shared.settings.filtering__header.content"
    },
    {
      "id": "show_sort",
      "type": "checkbox",
      "label": "t:shared.settings.show_sort.label",
      "default": true
    },
    {
      "id": "show_filters",
      "type": "checkbox",
      "label": "t:shared.settings.show_filters.label",
      "info": "t:shared.settings.show_filters.info",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_sticky_filter_bar",
      "label": "t:shared.settings.enable_sticky_filter_bar.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "collapse_filter_bar",
      "label": "t:shared.settings.collapse_filter_bar.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "collapse_filter_groups_mobile",
      "label": "t:shared.settings.collapse_filter_groups_mobile.label",
      "default": true
    },
    {
      "id": "show_swatch_filters",
      "type": "checkbox",
      "label": "t:shared.settings.show_swatch_filters.label",
      "info": "t:shared.settings.show_swatch_filters.info",
      "default": true
    },
    {
      "id": "show_chip_filters",
      "type": "checkbox",
      "label": "t:shared.settings.show_chip_filters.label",
      "info": "t:shared.settings.show_chip_filters.info",
      "default": true
    },
    {
      "type": "select",
      "id": "chip_layout",
      "label": "t:shared.settings.chip_layout.label",
      "default": "3col",
      "options": [
        {
          "value": "3col",
          "label": "t:shared.settings.chip_layout.option_3col"
        },
        {
          "value": "2col",
          "label": "t:shared.settings.chip_layout.option_2col"
        },
        {
          "value": "natural",
          "label": "t:shared.settings.chip_layout.option_natural"
        }
      ]
    },
    {
      "type": "header",
      "content": "t:shared.settings.pagination__header.content"
    },
    {
      "type": "select",
      "id": "pagination",
      "label": "t:shared.settings.pagination.label",
      "default": "paginated",
      "options": [
        {
          "value": "infinite",
          "label": "t:shared.settings.pagination.options__1"
        },
        {
          "value": "click",
          "label": "t:shared.settings.pagination.options__2"
        },
        {
          "value": "paginated",
          "label": "t:shared.settings.pagination.options__3"
        }
      ],
      "info": "t:sections.main_collection_product_grid.settings.pagination.info"
    },
    {
      "type": "header",
      "content": "t:sections.main_collection_product_grid.settings.style__header.content"
    },
    {
      "id": "enable_animation",
      "type": "checkbox",
      "label": "t:shared.settings.section_style.enable_animation.label",
      "info": "t:shared.settings.section_style.enable_animation.info",
      "default": true
    },
    {
      "type": "select",
      "id": "divider_style",
      "label": "t:shared.settings.section_style.divider_style.label",
      "default": "none",
      "options": [
        {
          "label": "t:shared.settings.section_style.divider_style.option_none",
          "value": "none"
        },
        {
          "label": "t:shared.settings.section_style.divider_style.option_solid",
          "value": "solid"
        }
      ]
    }
  ]
}
{% endschema %}