Hi Shopify Community,
I’m working on a store using the Eurus theme, and I want to customize the collection page to meet the following requirements:
Requirements:
Products tagged as “Featured” should appear first on the collection page.
Remaining products should come after the featured products.
Issues:
Featured products are not consistently appearing first.
Pagination and infinite scroll break when trying to reorder products.
What I’m looking for:
A Shopify Liquid-compatible solution to display all featured products first on the collection page.
Remaining products displayed after featured products.
Pagination/infinite scroll still works properly.
Ideally, all featured products appear on the first page, followed by normal products.
Any guidance, example code, or suggestions to achieve this in Eurus theme would be greatly appreciated!
{%- paginate collection.products by products_per_page -%}
{% if section.settings.enable_filtering or section.settings.enable_sorting %}
{% endif %}
{%- if collection.products.size == 0 -%}
{% if collection.filters != blank %}
{{ ‘sections.collection_template.empty’ | t }}
{{ ‘sections.collection_template.use_fewer_filters_html’ | t: link: collection.url, class: “text-[rgb(var(–colors-text-link))]” }}
{%- else -%}
{{ ‘sections.collection_template.no_product_collection’ | t }}
{% endif %}
{%- else -%}
{% liquid
assign curent_page = paginate.current_page | minus: 1
assign total_product = products_per_page | times: curent_page
%}
{%- for product in collection.products -%}
{% if product.tags contains "Featured" %}
{% liquid
assign index = forloop.index | plus: total_product
if forloop.index < 3 or settings.enable_lazy_loading_image == false
assign loading = 'eager'
else
assign loading = 'lazy'
endif
%}
{% for block in section.blocks %}
{% if block.settings.position == index %}
{% liquid
assign col_span = block.settings.number_of_columns
if col_span > section.settings.products_per_row_on_desktop
assign col_span = section.settings.products_per_row_on_desktop
endif
assign col_span_mobile = block.settings.number_of_columns_mobile
if col_span_mobile > section.settings.products_per_row_on_mobile
assign col_span_mobile = section.settings.products_per_row_on_mobile
endif
assign class_tall_mobile = 'col-span-' | append: col_span_mobile | append: ' row-span-' | append: block.settings.number_of_row_mobile
assign class_tall_desktop = 'lg:col-span-' | append: col_span | append: ' lg:row-span-' | append: block.settings.number_of_row
assign col_span = col_span | times: 1.0
assign columns_desktop = section.settings.products_per_row_on_desktop | divided_by: col_span
assign columns_mobile = section.settings.products_per_row_on_mobile | divided_by: col_span_mobile
%}
{% render 'promotion-block',
blockID: block.id,
image_ratio: section.settings.image_ratio,
ratio: 100,
columns_desktop: columns_desktop,
columns_mobile: columns_mobile,
block: block,
enable_desktop_slider: false,
image: block.settings.image,
button_label: block.settings.button_label,
button_link: block.settings.button_link,
open_new_window: block.settings.open_new_window,
content_position: block.settings.content_position,
alignment: block.settings.alignment,
heading: block.settings.heading,
content: block.settings.content,
image_overlay_opacity: block.settings.image_overlay_opacity,
title_size: block.settings.title_size,
text_size: block.settings.text_size,
list_layout: true,
show_button_style: block.settings.show_button_style,
color_button: block.settings.color_button,
color_text_button: block.settings.color_text_button,
color_button_hover: block.settings.color_button_hover,
color_text_button_hover: block.settings.color_text_button_hover,
color_button_secondary: block.settings.color_button_secondary,
secondary_button_text: block.settings.secondary_button_text,
colors_text_link: block.settings.colors_text_link,
class_tall_mobile: class_tall_mobile,
class_tall_desktop: class_tall_desktop,
collection_page: true,
loading: loading,
icon: 'none',
subheading: block.settings.subheading,
heading_highlight: true,
color_heading_highlight_dark: block.settings.color_heading_highlight_dark,
color_heading_highlight_light: block.settings.color_heading_highlight_light,
highlight_type: block.settings.highlight_type
%}
{% endif %}
{% endfor %}
{% liquid
assign index_param = section.index | append: forloop.index | plus: 0
assign product_card_id = paginate.current_page | append: forloop.index | plus: 0
%}
<div class="grid-item">
{%
render 'card-product',
index_param: index_param,
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_highlighted_features: section.settings.show_highlighted_features,
show_highlighted_attributes: section.settings.show_highlighted_attributes,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
loading: loading,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id,
block_id: product_card_id,
collection: collection,
columns_desktop: section.settings.products_per_row_on_desktop,
column_mobile: section.settings.products_per_row_on_mobile | plus: 0,
disable_quickview: disable_quickview,
collection_page: true,
show_description: section.settings.show_description,
list_layout: true,
product_card_id: product_card_id,
animation_loading: true,
show_price_range: true
%}
</div>
{% for block in section.blocks %}
{% if block.settings.position > index
and index == collection.products_count
and collection.products_count == collection.all_products_count
%}
{% liquid
assign col_span = block.settings.number_of_columns
if col_span > section.settings.products_per_row_on_desktop
assign col_span = section.settings.products_per_row_on_desktop
endif
assign col_span_mobile = block.settings.number_of_columns_mobile
if col_span_mobile > section.settings.products_per_row_on_mobile
assign col_span_mobile = section.settings.products_per_row_on_mobile
endif
assign class_tall_mobile = 'col-span-' | append: col_span_mobile | append: ' row-span-' | append: block.settings.number_of_row_mobile
assign class_tall_desktop = 'lg:col-span-' | append: col_span | append: ' lg:row-span-' | append: block.settings.number_of_row
assign col_span = col_span | times: 1.0
assign columns_desktop = section.settings.products_per_row_on_desktop | divided_by: col_span
assign columns_mobile = section.settings.products_per_row_on_mobile | divided_by: col_span_mobile
%}
{%
render 'promotion-block',
blockID: block.id,
image_ratio: 'last-promo',
ratio: block.settings.image.aspect_ratio | times: 100,
columns_desktop: columns_desktop,
columns_mobile: columns_mobile,
block: block,
enable_desktop_slider: false,
image: block.settings.image,
button_label: block.settings.button_label,
button_link: block.settings.button_link,
open_new_window: block.settings.open_new_window,
content_position: block.settings.content_position,
alignment: block.settings.alignment,
heading: block.settings.heading,
content: block.settings.content,
image_overlay_opacity: block.settings.image_overlay_opacity,
title_size: block.settings.title_size,
text_size: block.settings.text_size,
list_layout: true,
show_button_style: block.settings.show_button_style,
color_button: block.settings.color_button,
color_text_button: block.settings.color_text_button,
color_button_hover: block.settings.color_button_hover,
color_text_button_hover: block.settings.color_text_button_hover,
color_button_secondary: block.settings.color_button_secondary,
secondary_button_text: block.settings.secondary_button_text,
colors_text_link: block.settings.colors_text_link,
class_tall_mobile: class_tall_mobile,
class_tall_desktop: class_tall_desktop,
collection_page: true,
loading: loading,
icon: 'none',
subheading: block.settings.subheading,
heading_highlight: true,
color_heading_highlight_dark: block.settings.color_heading_highlight_dark,
color_heading_highlight_light: block.settings.color_heading_highlight_light,
highlight_type: block.settings.highlight_type
%}
{% endif %}
{% endfor %}
{% endif %}
{%- endfor -%}
{%- for product in collection.products -%}
{% unless product.tags contains 'Featured' %}
{% liquid
assign index = forloop.index | plus: total_product
if forloop.index < 3 or settings.enable_lazy_loading_image == false
assign loading = 'eager'
else
assign loading = 'lazy'
endif
%}
{% for block in section.blocks %}
{% if block.settings.position == index %}
{% liquid
assign col_span = block.settings.number_of_columns
if col_span > section.settings.products_per_row_on_desktop
assign col_span = section.settings.products_per_row_on_desktop
endif
assign col_span_mobile = block.settings.number_of_columns_mobile
if col_span_mobile > section.settings.products_per_row_on_mobile
assign col_span_mobile = section.settings.products_per_row_on_mobile
endif
assign class_tall_mobile = 'col-span-' | append: col_span_mobile | append: ' row-span-' | append: block.settings.number_of_row_mobile
assign class_tall_desktop = 'lg:col-span-' | append: col_span | append: ' lg:row-span-' | append: block.settings.number_of_row
assign col_span = col_span | times: 1.0
assign columns_desktop = section.settings.products_per_row_on_desktop | divided_by: col_span
assign columns_mobile = section.settings.products_per_row_on_mobile | divided_by: col_span_mobile
%}
{% render 'promotion-block',
blockID: block.id,
image_ratio: section.settings.image_ratio,
ratio: 100,
columns_desktop: columns_desktop,
columns_mobile: columns_mobile,
block: block,
enable_desktop_slider: false,
image: block.settings.image,
button_label: block.settings.button_label,
button_link: block.settings.button_link,
open_new_window: block.settings.open_new_window,
content_position: block.settings.content_position,
alignment: block.settings.alignment,
heading: block.settings.heading,
content: block.settings.content,
image_overlay_opacity: block.settings.image_overlay_opacity,
title_size: block.settings.title_size,
text_size: block.settings.text_size,
list_layout: true,
show_button_style: block.settings.show_button_style,
color_button: block.settings.color_button,
color_text_button: block.settings.color_text_button,
color_button_hover: block.settings.color_button_hover,
color_text_button_hover: block.settings.color_text_button_hover,
color_button_secondary: block.settings.color_button_secondary,
secondary_button_text: block.settings.secondary_button_text,
colors_text_link: block.settings.colors_text_link,
class_tall_mobile: class_tall_mobile,
class_tall_desktop: class_tall_desktop,
collection_page: true,
loading: loading,
icon: 'none',
subheading: block.settings.subheading,
heading_highlight: true,
color_heading_highlight_dark: block.settings.color_heading_highlight_dark,
color_heading_highlight_light: block.settings.color_heading_highlight_light,
highlight_type: block.settings.highlight_type
%}
{% endif %}
{% endfor %}
{% liquid
assign index_param = section.index | append: forloop.index | plus: 0
assign product_card_id = paginate.current_page | append: forloop.index | plus: 0
%}
<div class="grid-item">
{%
render 'card-product',
index_param: index_param,
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_highlighted_features: section.settings.show_highlighted_features,
show_highlighted_attributes: section.settings.show_highlighted_attributes,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
loading: loading,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id,
block_id: product_card_id,
collection: collection,
columns_desktop: section.settings.products_per_row_on_desktop,
column_mobile: section.settings.products_per_row_on_mobile | plus: 0,
disable_quickview: disable_quickview,
collection_page: true,
show_description: section.settings.show_description,
list_layout: true,
product_card_id: product_card_id,
animation_loading: true,
show_price_range: true
%}
</div>
{% for block in section.blocks %}
{% if block.settings.position > index
and index == collection.products_count
and collection.products_count == collection.all_products_count
%}
{% liquid
assign col_span = block.settings.number_of_columns
if col_span > section.settings.products_per_row_on_desktop
assign col_span = section.settings.products_per_row_on_desktop
endif
assign col_span_mobile = block.settings.number_of_columns_mobile
if col_span_mobile > section.settings.products_per_row_on_mobile
assign col_span_mobile = section.settings.products_per_row_on_mobile
endif
assign class_tall_mobile = 'col-span-' | append: col_span_mobile | append: ' row-span-' | append: block.settings.number_of_row_mobile
assign class_tall_desktop = 'lg:col-span-' | append: col_span | append: ' lg:row-span-' | append: block.settings.number_of_row
assign col_span = col_span | times: 1.0
assign columns_desktop = section.settings.products_per_row_on_desktop | divided_by: col_span
assign columns_mobile = section.settings.products_per_row_on_mobile | divided_by: col_span_mobile
%}
{%
render 'promotion-block',
blockID: block.id,
image_ratio: 'last-promo',
ratio: block.settings.image.aspect_ratio | times: 100,
columns_desktop: columns_desktop,
columns_mobile: columns_mobile,
block: block,
enable_desktop_slider: false,
image: block.settings.image,
button_label: block.settings.button_label,
button_link: block.settings.button_link,
open_new_window: block.settings.open_new_window,
content_position: block.settings.content_position,
alignment: block.settings.alignment,
heading: block.settings.heading,
content: block.settings.content,
image_overlay_opacity: block.settings.image_overlay_opacity,
title_size: block.settings.title_size,
text_size: block.settings.text_size,
list_layout: true,
show_button_style: block.settings.show_button_style,
color_button: block.settings.color_button,
color_text_button: block.settings.color_text_button,
color_button_hover: block.settings.color_button_hover,
color_text_button_hover: block.settings.color_text_button_hover,
color_button_secondary: block.settings.color_button_secondary,
secondary_button_text: block.settings.secondary_button_text,
colors_text_link: block.settings.colors_text_link,
class_tall_mobile: class_tall_mobile,
class_tall_desktop: class_tall_desktop,
collection_page: true,
loading: loading,
icon: 'none',
subheading: block.settings.subheading,
heading_highlight: true,
color_heading_highlight_dark: block.settings.color_heading_highlight_dark,
color_heading_highlight_light: block.settings.color_heading_highlight_light,
highlight_type: block.settings.highlight_type
%}
{% endif %}
{% endfor %}
{% endunless %}
{%- endfor -%}
</div>
<div class="flex{% if number_products != blank and number_products.size > 1 and section.settings.pagination == 'pagination' %} justify-between{% else %} justify-center{% endif %} items-center mt-3 md:mt-7 mb-7 flex-col-reverse lg:flex-row">
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '', paginate_type: section.settings.paginate_type, pagination: section.settings.pagination, products_per_page: products_per_page, focus_product: true %}
{%- else -%}
<div class="w-auto"></div>
{%- endif -%}
{% if number_products != blank %}
<div class="{% if section.settings.pagination != 'pagination' %}hidden{% endif %}" id="perpage-collection"></div>
{% endif %}
</div>
{%- endif -%}
</div>
{%- endpaginate -%}