Move sort box on collection page

New Member
41 0 0

Hi

My sort box on my collection pages sit above the collection description.

I would like them below the description.

I found this on collection.liquid. Can anyone help me move it?

Thanks

Jo

<header class="section-header section-header--large">
  {% unless collections.handle == 'all' %}
  <h1 class="section-header__title{% if settings.collections_tags_enable or settings.collections_sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
  {% endunless %}
  {% if settings.collections_tags_enable or settings.collections_sort_enable %}
  <div class="section-header__link--right">
    {% if settings.collections_tags_enable %}
      {% include 'collection-tags' %}
    {% endif %}
    {% if settings.collections_sort_enable %}
      {% include 'collection-sorting' %}
    {% endif %}
  </div>
  {% endif %}
</header>

0 Likes
New Member
41 0 0

Minimal theme

0 Likes
New Member
41 0 0

Anyone :(  ?

 

0 Likes
Shopify Partner
2536 31 565

This is certainly doable by changing that file. Remove everything except <h1... line in the <header> area so it looks like

  <header class="section-header section-header--large">
    <h1 class="section-header__title{% if section.settings.tags_enable or section.settings.sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
  </header>

In the next section

{% if collection.description != blank %}
  <div class="rte rte--header hider">
    {{ collection.description }}
  </div>
  <hr class="hr--clear hr--small">
{% endif %}

remove the   <hr class="hr--clear hr--small"> line. And right after {% endif %}  add the following piece of code (basically, all that you removed earlier plus some extra):

  <style>
     #tags-and-sort div { 
       	float:left; 
        margin:5px; 
     }
     #tags-and-sort label {
		min-width: 10ex;
		text-align: right;
	 }
   </style>

  {% if section.settings.tags_enable or section.settings.sort_enable %}
    <div id="tags-and-sort">
      {% if section.settings.tags_enable %}
        {% include 'collection-tags' %}
      {% endif %}
      {% if section.settings.sort_enable %}
        {% include 'collection-sorting' %}
      {% endif %}
    </div>
  {% endif %}
  <hr class="hr--clear hr--small">
 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
41 0 0

Thanks for the reponse Tim.

It didn't work unfortunately. The sort box did not appear at all. Even when 'enable sorting' is selected. 

0 Likes
Shopify Partner
2536 31 565

I did try it on my copy of Minimal theme. 

Can you copy and paste here the entire content of your collection.liquid (please use the Insert Code snippet button to the right of the Source button). It would help if you post a link to your shop (and a storefront password, if there is one [not your admin password]). 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Highlighted
New Member
41 0 0

Sorry I don't see where the isert code snippet button is. Hope this is ok.

 

{% paginate collection.products by 20 %}

<header class="section-header section-header--large">
  {% unless collections.handle == 'all' %}
  <h1 class="section-header__title{% if settings.collections_tags_enable or settings.collections_sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
  {% endunless %}
  {% if settings.collections_tags_enable or settings.collections_sort_enable %}
  <div class="section-header__link--right">
    {% if settings.collections_tags_enable %}
      {% include 'collection-tags' %}
    {% endif %}
    {% if settings.collections_sort_enable %}
      {% include 'collection-sorting' %}
    {% endif %}
  </div>
  {% endif %}
</header>

{% if collection.description != blank %}
  <div class="rte rte--header">
    {{ collection.description }}
  </div>
  <hr class="hr--clear hr--small">
{% endif %}

<div class="grid-uniform grid-link__container">

  {% for product in collection.products %}

    {% include 'product-grid-item' %}

  {% else %}

    {% if shop.products_count == 0 %}
      {% unless emptyState %}
        {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
        {% assign emptyState = true %}
      {% endunless %}

      <div class="grid__item">
        <div class="helper-section">
          <div class="helper-note">
            <span class="helper-icon"></span>
            <h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
            <p>{{ 'home_page.onboarding.no_products_collection' | t }}</p>
            <p><a class="admin-btn-primary" href="/admin/products/new">{{ 'home_page.onboarding.add_product' | t }}</a></p>
          </div>

          <div class="grid-uniform helper-content">
            {% assign index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign index = 1 %}
                {% when 8 %}
                  {% assign index = 2 %}
              {% endcase %}
              <div class="grid__item one-half post-large--one-quarter">
                <a href="/admin/products" class="grid-link">
                  <span class="grid-link__image grid-link__image--product">
                    <span class="grid-link__image-centered">
                      {% capture imageUrl %}//cdn.shopify.com/s/images/themes/product-{{ index }}.png{% endcapture %}
                      {{ imageUrl | img_tag }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
              {% assign index = index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="grid__item">
        <p><em>{{ 'collections.general.no_matches' | t }}</em></p>
      </div>
    {% endif %}

  {% endfor %}

</div>

{% if paginate.pages > 1 %}
  <hr class="hr--clear">

  <div class="text-center">
    {% include 'pagination-custom' %}
  </div>
{% endif %}

{% endpaginate %}

0 Likes
Shopify Partner
2536 31 565

Ok, I thought you are using the latest version of the Minimal theme. The older version require some changes to the code I suggested.

You should overwrite your collection.liquid file with the following code. Do not worry, Shopify allows you to restore the older versions of your liquid files if something goes wrong.

{% paginate collection.products by 20 %}

<header class="section-header section-header--large">
  {% unless collections.handle == 'all' %}
  	<h1 class="section-header__title{% if settings.collections_tags_enable or settings.collections_sort_enable %} section-header__title--left{% endif %}">{{ collection.title }}</h1>
  {% endunless %}
</header>

{% if collection.description != blank %}
  <div class="rte rte--header">
    {{ collection.description }}
  </div>
{% endif %}

<style>
     #tags-and-sort div { 
       	float:left; 
        margin:5px; 
     }
     #tags-and-sort label {
		min-width: 10ex;
		text-align: right;
	 }
</style>

  {% if settings.collections_tags_enable or settings.collections_sort_enable %}
    <div id="tags-and-sort">
      {% if settings.collections_tags_enable %}
        {% include 'collection-tags' %}
      {% endif %}
      {% if settings.collections_sort_enable %}
        {% include 'collection-sorting' %}
      {% endif %}
    </div>
  {% endif %}
 
<hr class="hr--clear hr--small">
 
<div class="grid-uniform grid-link__container">

  {% for product in collection.products %}

    {% include 'product-grid-item' %}

  {% else %}

    {% if shop.products_count == 0 %}
      {% unless emptyState %}
        {{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
        {% assign emptyState = true %}
      {% endunless %}

      <div class="grid__item">
        <div class="helper-section">
          <div class="helper-note">
            <span class="helper-icon"></span>
            <h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
            <p>{{ 'home_page.onboarding.no_products_collection' | t }}</p>
            <p><a class="admin-btn-primary" href="/admin/products/new">{{ 'home_page.onboarding.add_product' | t }}</a></p>
          </div>

          <div class="grid-uniform helper-content">
            {% assign index = 1 %}
            {% for i in (1..8) %}
              {% case i %}
                {% when 7 %}
                  {% assign index = 1 %}
                {% when 8 %}
                  {% assign index = 2 %}
              {% endcase %}
              <div class="grid__item one-half post-large--one-quarter">
                <a href="/admin/products" class="grid-link">
                  <span class="grid-link__image grid-link__image--product">
                    <span class="grid-link__image-centered">
                      {% capture imageUrl %}//cdn.shopify.com/s/images/themes/product-{{ index }}.png{% endcapture %}
                      {{ imageUrl | img_tag }}
                    </span>
                  </span>
                  <p class="grid-link__title">{{ 'home_page.onboarding.product_title' | t }}</p>
                  <p class="grid-link__meta">
                    <strong>$19.99</strong>
                  </p>
                </a>
              </div>
              {% assign index = index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% else %}
      <div class="grid__item">
        <p><em>{{ 'collections.general.no_matches' | t }}</em></p>
      </div>
    {% endif %}

  {% endfor %}

</div>

{% if paginate.pages > 1 %}
  <hr class="hr--clear">

  <div class="text-center">
    {% include 'pagination-custom' %}
  </div>
{% endif %}

{% endpaginate %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
41 0 0

Thank you sooo much for your time.

This is perfect.

Happy new year.

0 Likes