Impulse Theme - Collection Description is stuck below Collection Products in Product Grid

[CoryAhnline]

It looks like my Collection Description is stuck - I can't move this through Theme Editor, so it appears that maybe something was hard-coded into my site somehow? Ideally, I'd like my description above the product grid. Is there a line of code that needs to be moved somewhere? 

This is the ideal state:

This is what's showing (as of 6:45 PM EST March 15th, in case this is later solved):

https://www.ahnlinemarket.com/collections/organic-swaddle-blankets 

[kazi]

Hello @CoryAhnline  you should be able to move the section up/down by default, hover on the section you will see the 6 dots at right side to grab and move it.

[CoryAhnline]

Hi Kazi - the screenshot above shows it is where it is intended to be on the theme customization. This approach doesn't work. Products remain above description regardless of moving it in theme editor.

[kazi]

@CoryAhnline   can you move  any other section?

[CoryAhnline]

On other pages, yes. I can add sections to the Collections tab, but it seems like the description is anchored to the bottom above the footer. Really weird!

[kazi]

I mean can you move other sections  except this product description up/down by grabing mouse?

[CoryAhnline]

Yes 

[kazi]

This seems strange but you can move it from liquid file check collection.liquid in snippets and find the css class "collection__description"  you can attach it here so i can help you

[CoryAhnline]

Sorry if I'm missing something super simple but I don't have collection.liquid... I do have Collection_Template.liquid (and I've posted the remaining collection-based snippets below). 

The Collection_Description class here (I think) is:

},
"main-collection": {
"type": "main-collection",
"blocks": {
"af8182b7-5021-48f1-927c-1ed7db57dd99": {
"type": "collection_description",
"settings": {
}

Is this what you're looking for?

[kazi]

@CoryAhnline  sections > main-collection.liquid  

[CoryAhnline]

Thanks for your patience, and for bearing with me - Descriptions are mentioned in a few spots:

Here: "blocks": [
{
"type": "collection_description",
"name": "Collection description",
"limit": 1
},

And Here:

"blocks": [
{
"type": "collection_description",
"name": "Collection description",
"limit": 1
},

Probably a little annoying, sorry, but here's the full HTML if it helps:

<div
  id="CollectionAjaxResult"
  class="collection-content"
  data-section-id="{{ section.id }}"
  data-section-type="collection-template"
>
  <div id="CollectionAjaxContent">
    <div class="page-width">
      <div class="grid">
        <div class="grid__item medium-up--one-fifth grid__item--sidebar">
          {% render 'collection-sidebar', section: section %}
        </div>
        <div class="grid__item medium-up--four-fifths grid__item--content">
          <div class="collection-grid__wrapper">
            {% render 'collection-template', section: section %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CollectionPage",
  {% if collection.description != blank %}
    "description": {{ collection.description | strip_html | json }},
  {% endif %}
  {% if page_image %}
    {% assign image_size = page_image.width | append: 'x' %}
    "image": {
      "@type": "ImageObject",
      "height": {{ page_image.height | json }},
      "url": {{ page_image | img_url: image_size | prepend: "https:" | json }},
      "width": {{ page_image.width | json }}
    },
  {% endif %}
  "name": {{ collection.title | json }}
}
</script>

{% schema %}
  {
    "name": "Product grid",
    "settings": [
      {
        "type": "header",
        "content": "Filtering and sorting"
      },
      {
        "type": "checkbox",
        "id": "enable_sidebar",
        "label": "Enable filter",
        "default": true,
        "info": "Allow your customers to filter collections and search results by product availability, price, color, and more. [Customize filters](/admin/menus)"
      },
      {
        "type": "checkbox",
        "id": "collapsed",
        "label": "Collapse filters",
        "default": true
      },
      {
        "type": "select",
        "id": "filter_style",
        "label": "Filter style",
        "default": "sidebar",
        "options": [
          {
            "value": "sidebar",
            "label": "Sidebar"
          },
          {
            "value": "drawer",
            "label": "Drawer"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_color_swatches",
        "label": "Enable color swatches",
        "info": "[View setup instructions](https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches)"
      },
      {
        "type": "checkbox",
        "id": "enable_sort",
        "label": "Show sort options",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "collection_description",
        "name": "Collection description",
        "limit": 1
      },
      {
        "type": "product_grid",
        "name": "Products",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_collection_count",
            "label": "Enable collection count",
            "default": true
          },
          {
            "type": "range",
            "id": "per_row",
            "label": "Products per row",
            "default": 4,
            "min": 2,
            "max": 5,
            "step": 1
          },
          {
            "type": "range",
            "id": "rows_per_page",
            "label": "Rows per page",
            "default": 7,
            "min": 3,
            "max": 20,
            "step": 1
          },
          {
            "type": "checkbox",
            "id": "mobile_flush_grid",
            "label": "Flush grid on mobile",
            "default": false
          }
        ],
        "limit": 1
      },
      {
        "type": "subcollections",
        "name": "Subcollections",
        "settings": [
          {
            "type": "paragraph",
            "content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/expanse/how-do-i-create-subcollections)"
          },
          {
            "type": "range",
            "id": "subcollections_per_row",
            "label": "Subcollections per row",
            "default": 5,
            "min": 2,
            "max": 5,
            "step": 1
          }
        ],
        "limit": 1
      }
    ]

  }
{% endschema %}

[kazi]

Can you paste the  collection-template.liquid from snippets?

[CoryAhnline]

Yes, sorry - 

{%- liquid
  assign per_row = 4
  assign paginate_by = per_row | times: 7

  for block in section.blocks
    case block.type
    when 'product_grid'
      assign per_row = block.settings.per_row
      assign paginate_by = per_row | times: block.settings.rows_per_page
    endcase
  endfor

  assign current_filter_size = 0

  for filter in collection.filters
    assign current_filter_size = current_filter_size | plus: filter.active_values.size
  endfor
-%}

{%- paginate collection.products by paginate_by -%}

{%- for block in section.blocks -%}
  <div {{ block.shopify_attributes }}>
    {%- case block.type -%}
    
    {%- when 'subcollections' -%}
      {%- if current_filter_size == 0 -%}
        {%- render 'subcollections', per_row: block.settings.subcollections_per_row -%}
      {%- endif -%}
    {%- when 'product_grid' -%}
      <div class="collection-filter">
        {%- liquid
          assign current_filter_size = 0

          for filter in collection.filters
            assign current_filter_size = current_filter_size | plus: filter.active_values.size
          endfor
        -%}
        <div class="collection-filter__item collection-filter__item--drawer">
          <button
            type="button"
            class="js-drawer-open-collection-filters btn btn--tertiary{% unless current_filter_size == 0 %} btn--tertiary-active{% endunless %}"
            aria-controls="FilterDrawer">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-filter" viewBox="0 0 64 64"><path d="M48 42h10M48 42a5 5 0 1 1-5-5 5 5 0 0 1 5 5zM7 42h31M16 22H6M16 22a5 5 0 1 1 5 5 5 5 0 0 1-5-5zM57 22H26"/></svg>
            {{ 'collections.filters.title_tags' | t }}
            {%- if current_filter_size > 0 -%}
              ({{ current_filter_size }})
            {%- endif -%}
          </button>
        </div>

        <div class="collection-filter__item collection-filter__item--count small--hide">
          {%- if block.settings.enable_collection_count -%}
            {{ 'collections.general.items_with_count' | t: count: collection.products_count }}
          {%- endif -%}
        </div>

        <div class="collection-filter__item collection-filter__item--sort">
          <div class="collection-filter__sort-container">
            {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
            <label for="SortBy" class="hidden-label">{{ 'collections.sorting.title' | t }}</label>
            <select name="SortBy" id="SortBy" data-default-sortby="{{ collection.default_sort_by }}">
              <option value="title-ascending"{% if sort_by == collection.default_sort_by %} selected="selected"{% endif %}>{{ 'collections.sorting.title' | t }}</option>
              {%- for option in collection.sort_options -%}
                <option value="{{ option.value }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name }}</option>
              {%- endfor -%}
            </select>
          </div>
        </div>
      </div>

      {%- if block.settings.enable_collection_count -%}
        <p class="medium-up--hide text-center" data-scroll-to>{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</p>
      {%- endif -%}

      <div
        class="grid grid--uniform{% if block.settings.mobile_flush_grid %} small--grid--flush{% endif %}"{% unless block.settings.enable_collection_count %} data-scroll-to{% endunless %}>
        {%- liquid
          assign grid_item_width = 'small--one-half medium-up--one-third'

          case per_row
            when 2
              assign grid_item_width = 'medium-up--one-half'
            when 3
              assign grid_item_width = 'small--one-half medium-up--one-third'
            when 4
              assign grid_item_width = 'small--one-half medium-up--one-quarter'
            when 5
              assign grid_item_width = 'small--one-half medium-up--one-fifth'
          endcase
        -%}

        {%- for product in collection.products -%}
{% if product.handle contains "docapp-free-gift-" %}{% continue %}{% endif %}

          {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width, per_row: per_row -%}
        {%- else -%}
          <div class="grid__item">
            <p>{{ 'collections.general.no_matches' | t }}</p>
          </div>
        {%- endfor -%}

      </div>

      {%- if paginate.pages > 1 -%}
        {%- render 'pagination', paginate: paginate -%}
      {%- endif -%}

      {%- if settings.quick_shop_enable -%}
        {%- for product in collection.products -%}
{% if product.handle contains "docapp-free-gift-" %}{% continue %}{% endif %}

          {%- render 'quick-shop-modal', product: product -%}
        {%- endfor -%}
      {%- endif -%}
    {%- endcase -%}
  </div>
{%- endfor -%}

{%- endpaginate -%}
</div> </div> </div> </div>

{%- if collection.description != blank and current_filter_size == 0 -%}
<div style="display:block;padding:30px 0;background: #fcfcfc;border-top:solid 1px #eee;">
        <div class="rte collection__description page-width" style="text-align:center">
          {{ collection.description }}
        </div>
   </div>
      {%- endif -%}
 

[kazi]

This will be the  updated collection-template.liquid

{%- liquid
  assign per_row = 4
  assign paginate_by = per_row | times: 7

  for block in section.blocks
    case block.type
    when 'product_grid'
      assign per_row = block.settings.per_row
      assign paginate_by = per_row | times: block.settings.rows_per_page
    endcase
  endfor

  assign current_filter_size = 0

  for filter in collection.filters
    assign current_filter_size = current_filter_size | plus: filter.active_values.size
  endfor
-%}

{%- paginate collection.products by paginate_by -%}

{%- for block in section.blocks -%}
  <div {{ block.shopify_attributes }}>
    {%- case block.type -%}
    
    {%- when 'subcollections' -%}
      {%- if current_filter_size == 0 -%}
        {%- render 'subcollections', per_row: block.settings.subcollections_per_row -%}
      {%- endif -%}
    {%- when 'product_grid' -%}
      <div class="collection-filter">
        {%- liquid
          assign current_filter_size = 0

          for filter in collection.filters
            assign current_filter_size = current_filter_size | plus: filter.active_values.size
          endfor
        -%}
        <div class="collection-filter__item collection-filter__item--drawer">
          <button
            type="button"
            class="js-drawer-open-collection-filters btn btn--tertiary{% unless current_filter_size == 0 %} btn--tertiary-active{% endunless %}"
            aria-controls="FilterDrawer">
            <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-filter" viewBox="0 0 64 64"><path d="M48 42h10M48 42a5 5 0 1 1-5-5 5 5 0 0 1 5 5zM7 42h31M16 22H6M16 22a5 5 0 1 1 5 5 5 5 0 0 1-5-5zM57 22H26"/></svg>
            {{ 'collections.filters.title_tags' | t }}
            {%- if current_filter_size > 0 -%}
              ({{ current_filter_size }})
            {%- endif -%}
          </button>
        </div>

        <div class="collection-filter__item collection-filter__item--count small--hide">
          {%- if block.settings.enable_collection_count -%}
            {{ 'collections.general.items_with_count' | t: count: collection.products_count }}
          {%- endif -%}
        </div>

        <div class="collection-filter__item collection-filter__item--sort">
          <div class="collection-filter__sort-container">
            {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
            <label for="SortBy" class="hidden-label">{{ 'collections.sorting.title' | t }}</label>
            <select name="SortBy" id="SortBy" data-default-sortby="{{ collection.default_sort_by }}">
              <option value="title-ascending"{% if sort_by == collection.default_sort_by %} selected="selected"{% endif %}>{{ 'collections.sorting.title' | t }}</option>
              {%- for option in collection.sort_options -%}
                <option value="{{ option.value }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name }}</option>
              {%- endfor -%}
            </select>
          </div>
        </div>
      </div>

      {%- if block.settings.enable_collection_count -%}
        <p class="medium-up--hide text-center" data-scroll-to>{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</p>
      {%- endif -%}

      <div
        class="grid grid--uniform{% if block.settings.mobile_flush_grid %} small--grid--flush{% endif %}"{% unless block.settings.enable_collection_count %} data-scroll-to{% endunless %}>
        {%- liquid
          assign grid_item_width = 'small--one-half medium-up--one-third'

          case per_row
            when 2
              assign grid_item_width = 'medium-up--one-half'
            when 3
              assign grid_item_width = 'small--one-half medium-up--one-third'
            when 4
              assign grid_item_width = 'small--one-half medium-up--one-quarter'
            when 5
              assign grid_item_width = 'small--one-half medium-up--one-fifth'
          endcase
        -%}

        {%- for product in collection.products -%}
{% if product.handle contains "docapp-free-gift-" %}{% continue %}{% endif %}

          {%- render 'product-grid-item', product: product, grid_item_width: grid_item_width, per_row: per_row -%}
        {%- else -%}
          <div class="grid__item">
            <p>{{ 'collections.general.no_matches' | t }}</p>
          </div>
        {%- endfor -%}

      </div>

      {%- if paginate.pages > 1 -%}
        {%- render 'pagination', paginate: paginate -%}
      {%- endif -%}

      {%- if settings.quick_shop_enable -%}
        {%- for product in collection.products -%}
{% if product.handle contains "docapp-free-gift-" %}{% continue %}{% endif %}

          {%- render 'quick-shop-modal', product: product -%}
        {%- endfor -%}
      {%- endif -%}
    {%- endcase -%}
  </div>
{%- endfor -%}

{%- endpaginate -%}
</div> </div> </div> </div>

 

[kazi]

And this is updated  main-collection.liquid

<div
  id="CollectionAjaxResult"
  class="collection-content"
  data-section-id="{{ section.id }}"
  data-section-type="collection-template"
>
  <div id="CollectionAjaxContent">
{%- if collection.description != blank and current_filter_size == 0 -%}
<div style="display:block;padding:30px 0;background: #fcfcfc;border-top:solid 1px #eee;">
        <div class="rte collection__description page-width" style="text-align:center">
          {{ collection.description }}
        </div>
   </div>
      {%- endif -%}

    <div class="page-width">
      <div class="grid">
        <div class="grid__item medium-up--one-fifth grid__item--sidebar">
          {% render 'collection-sidebar', section: section %}
        </div>
        <div class="grid__item medium-up--four-fifths grid__item--content">
          <div class="collection-grid__wrapper">
            {% render 'collection-template', section: section %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CollectionPage",
  {% if collection.description != blank %}
    "description": {{ collection.description | strip_html | json }},
  {% endif %}
  {% if page_image %}
    {% assign image_size = page_image.width | append: 'x' %}
    "image": {
      "@type": "ImageObject",
      "height": {{ page_image.height | json }},
      "url": {{ page_image | img_url: image_size | prepend: "https:" | json }},
      "width": {{ page_image.width | json }}
    },
  {% endif %}
  "name": {{ collection.title | json }}
}
</script>

{% schema %}
  {
    "name": "Product grid",
    "settings": [
      {
        "type": "header",
        "content": "Filtering and sorting"
      },
      {
        "type": "checkbox",
        "id": "enable_sidebar",
        "label": "Enable filter",
        "default": true,
        "info": "Allow your customers to filter collections and search results by product availability, price, color, and more. [Customize filters](/admin/menus)"
      },
      {
        "type": "checkbox",
        "id": "collapsed",
        "label": "Collapse filters",
        "default": true
      },
      {
        "type": "select",
        "id": "filter_style",
        "label": "Filter style",
        "default": "sidebar",
        "options": [
          {
            "value": "sidebar",
            "label": "Sidebar"
          },
          {
            "value": "drawer",
            "label": "Drawer"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_color_swatches",
        "label": "Enable color swatches",
        "info": "[View setup instructions](https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches)"
      },
      {
        "type": "checkbox",
        "id": "enable_sort",
        "label": "Show sort options",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "collection_description",
        "name": "Collection description",
        "limit": 1
      },
      {
        "type": "product_grid",
        "name": "Products",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_collection_count",
            "label": "Enable collection count",
            "default": true
          },
          {
            "type": "range",
            "id": "per_row",
            "label": "Products per row",
            "default": 4,
            "min": 2,
            "max": 5,
            "step": 1
          },
          {
            "type": "range",
            "id": "rows_per_page",
            "label": "Rows per page",
            "default": 7,
            "min": 3,
            "max": 20,
            "step": 1
          },
          {
            "type": "checkbox",
            "id": "mobile_flush_grid",
            "label": "Flush grid on mobile",
            "default": false
          }
        ],
        "limit": 1
      },
      {
        "type": "subcollections",
        "name": "Subcollections",
        "settings": [
          {
            "type": "paragraph",
            "content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/expanse/how-do-i-create-subcollections)"
          },
          {
            "type": "range",
            "id": "subcollections_per_row",
            "label": "Subcollections per row",
            "default": 5,
            "min": 2,
            "max": 5,
            "step": 1
          }
        ],
        "limit": 1
      }
    ]

  }
{% endschema %}

[CoryAhnline]

Thanks again Kazi but this seems to get rid of the Description altogether. I see it in the code, but not on the site, and again nothing seems to make a difference when adding/moving the section in theme customization after pasting your code to the appropriate spots

[kazi · Accepted solution]

@CoryAhnline   use this updated  main-collection.liquid it should work now

<div
  id="CollectionAjaxResult"
  class="collection-content"
  data-section-id="{{ section.id }}"
  data-section-type="collection-template"
>
  <div id="CollectionAjaxContent">
{%- if collection.description != blank -%}
<div style="display:block;padding:30px 0;background: #fcfcfc;border-top:solid 1px #eee;">
        <div class="rte collection__description page-width" style="text-align:center">
          {{ collection.description }}
        </div>
   </div>
      {%- endif -%}

    <div class="page-width">
      <div class="grid">
        <div class="grid__item medium-up--one-fifth grid__item--sidebar">
          {% render 'collection-sidebar', section: section %}
        </div>
        <div class="grid__item medium-up--four-fifths grid__item--content">
          <div class="collection-grid__wrapper">
            {% render 'collection-template', section: section %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CollectionPage",
  {% if collection.description != blank %}
    "description": {{ collection.description | strip_html | json }},
  {% endif %}
  {% if page_image %}
    {% assign image_size = page_image.width | append: 'x' %}
    "image": {
      "@type": "ImageObject",
      "height": {{ page_image.height | json }},
      "url": {{ page_image | img_url: image_size | prepend: "https:" | json }},
      "width": {{ page_image.width | json }}
    },
  {% endif %}
  "name": {{ collection.title | json }}
}
</script>

{% schema %}
  {
    "name": "Product grid",
    "settings": [
      {
        "type": "header",
        "content": "Filtering and sorting"
      },
      {
        "type": "checkbox",
        "id": "enable_sidebar",
        "label": "Enable filter",
        "default": true,
        "info": "Allow your customers to filter collections and search results by product availability, price, color, and more. [Customize filters](/admin/menus)"
      },
      {
        "type": "checkbox",
        "id": "collapsed",
        "label": "Collapse filters",
        "default": true
      },
      {
        "type": "select",
        "id": "filter_style",
        "label": "Filter style",
        "default": "sidebar",
        "options": [
          {
            "value": "sidebar",
            "label": "Sidebar"
          },
          {
            "value": "drawer",
            "label": "Drawer"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "enable_color_swatches",
        "label": "Enable color swatches",
        "info": "[View setup instructions](https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches)"
      },
      {
        "type": "checkbox",
        "id": "enable_sort",
        "label": "Show sort options",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "collection_description",
        "name": "Collection description",
        "limit": 1
      },
      {
        "type": "product_grid",
        "name": "Products",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_collection_count",
            "label": "Enable collection count",
            "default": true
          },
          {
            "type": "range",
            "id": "per_row",
            "label": "Products per row",
            "default": 4,
            "min": 2,
            "max": 5,
            "step": 1
          },
          {
            "type": "range",
            "id": "rows_per_page",
            "label": "Rows per page",
            "default": 7,
            "min": 3,
            "max": 20,
            "step": 1
          },
          {
            "type": "checkbox",
            "id": "mobile_flush_grid",
            "label": "Flush grid on mobile",
            "default": false
          }
        ],
        "limit": 1
      },
      {
        "type": "subcollections",
        "name": "Subcollections",
        "settings": [
          {
            "type": "paragraph",
            "content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/expanse/how-do-i-create-subcollections)"
          },
          {
            "type": "range",
            "id": "subcollections_per_row",
            "label": "Subcollections per row",
            "default": 5,
            "min": 2,
            "max": 5,
            "step": 1
          }
        ],
        "limit": 1
      }
    ]

  }
{% endschema %}

[CoryAhnline]

THANK YOU! This works! Really appreciate your help - this was incredible!

[kazi]

you welcome i see white gap top of description you can fix this adding this css

.collection-content {
padding-top: 0 !important;
}

[kazi]

put the css in Assets > theme.css  bottom fo file

[CoryAhnline]

Great timing - I was just trying to get rid of that space as you posted this. That worked also, thanks again!

[kazi]

You welcome!

[CoryAhnline]

Hi Kazi,

Apologies, probably something I should have caught in the first place, but I just noticed that at the bottom of my collections there is some code which appears on the page : 

.collection-content { padding-top: 0 !important; }

Any idea what's triggering this? Can't find this line anywhere.

https://www.ahnlinemarket.com/collections/playtime

[kazi]

@CoryAhnline  you might have this code added in any liquid file without  <style>  </style>   

This should be 

<style>

.collection-content { padding-top: 0 !important; }

</style>

if its any .css file then  without <style>  </style>  is ok

check theme.liquid file

[CoryAhnline]

Again Kazi, you are amazing! Thanks so much