Shopify themes, liquid, logos, and UX
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
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 %}
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?
Do you mind sharing a Screenshot of the code or a paste the code file?
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 %}
it seems like item are render in this file: collection-item.liquid
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>
you sure above code is from: main-collection-product-grid.liquid
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 %}
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024