Fixed Display Two Products on the Top of the Shopify Collection Page

When we customize the Shopify store for our clients, a few of them ask to see if we can keep some products always at the top of a collection page no matter what sort of conditions selected. We deep into the Shopify collection template liquid source code, eventually we found a solution to accomplish this task. Today, I will show you how to achieve this feature step by step, We are assuming you are using the Shopify Debut theme. Because we are going to use the free Debut theme as an example, all the others, a similar logic should be applied.

In the Shopify Collection template, we use the Shopify Collection object’s products property to get our specific product data.

So our algorithm as below:

1. Define specific products by the handle
2. Loop all products from the collection show specific products on the top of the product grid
3. Remove specific products from the original product list on the current page

Edit Collection Template File

Login in Shopify with administrator, then Themes -> Debut Theme -> Edit Code -> Sections/collection-template.liquid:

Define Specific Products by product handle

From about line 18, please copy and paste the following lines in:

{% comment %}
  define specific top products handles
  {{top_specify_product_handles[0] }}  <br/>
  {{top_specify_product_handles[1] }} <br/>
{% endcomment %}
{%- capture top_specify_products_str -%}
  baroque-freshwater-pearl-earrings-handmade-shell-jewelry,
  baroque-freshwater-pearl-earrings-handmade-square-jewelry
{%- endcapture -%}
{%- assign top_specify_product_handles = top_specify_products_str | split: ',' -%}
{%- assign all_products = collection.products -%}
{%- assign limit_top_index_max = top_specify_product_handles | size | minus: 1 -%}

Line 6-9: define the specific top products by Shopify product handle as a string delimited by comma.

Line 10: Split the string with comma again into an array of the product handle.

Line 11: Save a temporary all collection products array which will be used to look for our specific products by product handle.

Line 12: Get the size of our specific products.

Insert Specific Products at the Top

Search for keywords “for product in collection.products” in the Sections/collection-template.liquid file, then insert the below lines just before the first found position:

 {% for product in all_products %}
    {% for i in (0..limit_top_index_max) %}
      {%- assign tmp_handle = top_specify_product_handles[i] | strip -%}
      {% if product.handle == tmp_handle %}
        <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
           {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
        </li>
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}

The above lines aim to show our specific top products.

Next we need to ignore the specific products from normal products list, just insert the following lines after the above found the position.

{%- assign show_product = true -%}
 {% for i in (0..limit_top_index_max) %}
 {%- assign tmp_handle = top_specify_product_handles[i] | strip -%}
        {% if product.handle == tmp_handle %}
          {%- assign show_product = false -%}
          {% break %}
        {% endif %}
  {% endfor %}
  {% if show_product %}
 	<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
       {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
    </li>
  {% endif %}
 

And don’t forget to delete the original <li> tag lines:

{% include ‘product-card-grid’, max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}

Save it.

Have a test

Now you can preview your Debut theme and go to any collection page, you will see your specific products always showing up at the top of your list whatever your change sort conditions or go to the next page.

Conclusion

The article just uses the free Debut theme as an example, your theme might not be the exactly same one, but the basic idea is similar. If you found it is very hard to make it work please do not hesitate to let us know via leave a message at the bottom comment area or contact us. We will try our test to help you out for free.