<!-- wp:image {"align":"center","id":234,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/fixed-displaying-2ps-collectionpage-1024x536.jpg" alt="fixed products" class="wp-image-234"/><figcaption>Fixed Display Products on Collection Page</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In the Shopify Collection template, we use the Shopify <a href="https://shopify.dev/docs/storefront-api/reference/products/collection">Collection</a> object's <a href="https://shopify.dev/docs/storefront-api/reference/products/product">products </a>property to get our specific product data.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So our algorithm as below:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><strong>Define specific products by the handle</strong></li><li><strong>Loop all products from the collection show specific products on the top of the product grid</strong></li><li><strong>Remove specific products from the original product list on the current page</strong></li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Edit Collection Template File</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Login in Shopify with administrator, then <strong><em>Themes -> Debut Theme -> Edit Code -> Sections/collection-template.liquid</em></strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":243,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/edit-collection-template-1024x407.png" alt="edit collection template" class="wp-image-243"/><figcaption>edit shopify collection template</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:html -->
<p><h3>Define Specific Products by product handle </h3></p>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>From about <strong>line 18</strong>, please copy and paste the following lines in:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% comment %}
  define specific top products handles
  {{top_specify_product_handles[0] }}  &lt;br/>
  {{top_specify_product_handles[1] }} &lt;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 -%}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p><strong>Line 6-9:</strong> define the specific top products by Shopify product handle as a string delimited by comma.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 10:</strong> Split the string with comma again into an array of the product handle.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 11:</strong> Save a temporary all collection products array which will be used to look for our specific products by product handle.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 12: </strong>Get the size of our specific products.</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<p><h3>Insert Specific Products at the Top</h3></p>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Search for keywords  "<strong>for product in collection.products</strong>" in the Sections/collection-template.liquid file, then insert the below lines just before the first found position:</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> {% 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 %}
        &lt;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 %}
        &lt;/li>
        {% break %}
      {% endif %}
    {% endfor %}
  {% endfor %}</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>The above lines aim to show our specific top products.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we need to ignore the specific products from normal products list, just insert the following lines after the above found the position. </p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{%- 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 %}
 	&lt;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 %}
    &lt;/li>
  {% endif %}
 </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>And don't forget to delete the original &lt;li> tag lines:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Save it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Have a test</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The article just use free Debut theme as an example, your theme might not be exactly same one, but basic idea is similiar. If you found it is very hard to make it working 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.</p>
<!-- /wp:paragraph -->