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
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.
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.
@CoryAhnline can you move any other section?
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!
I mean can you move other sections except this product description up/down by grabing mouse?
Yes
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
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?
@CoryAhnline sections > main-collection.liquid
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:
{% render 'collection-sidebar', section: section %}
{% render 'collection-template', section: section %}
{% 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 %}
Can you paste the collection-template.liquid from snippets?
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 -%}
{%- case block.type -%}
{%- when 'subcollections' -%}
{%- if current_filter_size == 0 -%}
{%- render 'subcollections', per_row: block.settings.subcollections_per_row -%}
{%- endif -%}
{%- when 'product_grid' -%}
{%- liquid
assign current_filter_size = 0
for filter in collection.filters
assign current_filter_size = current_filter_size | plus: filter.active_values.size
endfor
-%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- 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 -%}
{{ 'collections.general.no_matches' | t }}
{%- endfor -%}
{%- 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 -%}
{%- endfor -%}
{%- endpaginate -%}
{%- if collection.description != blank and current_filter_size == 0 -%}
{{ collection.description }}
{%- endif -%}
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 -%}
{%- case block.type -%}
{%- when 'subcollections' -%}
{%- if current_filter_size == 0 -%}
{%- render 'subcollections', per_row: block.settings.subcollections_per_row -%}
{%- endif -%}
{%- when 'product_grid' -%}
{%- liquid
assign current_filter_size = 0
for filter in collection.filters
assign current_filter_size = current_filter_size | plus: filter.active_values.size
endfor
-%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
{%- if block.settings.enable_collection_count -%}
{{ 'collections.general.items_with_count' | t: count: collection.products_count }}
{%- endif -%}
{%- 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 -%}
{{ 'collections.general.no_matches' | t }}
{%- endfor -%}
{%- 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 -%}
{%- endfor -%}
{%- endpaginate -%}
And this is updated main-collection.liquid
{%- if collection.description != blank and current_filter_size == 0 -%}
{{ collection.description }}
{%- endif -%}
{% render 'collection-sidebar', section: section %}
{% render 'collection-template', section: section %}
{% 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 %}
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
@CoryAhnline use this updated main-collection.liquid it should work now
{%- if collection.description != blank -%}
{{ collection.description }}
{%- endif -%}
{% render 'collection-sidebar', section: section %}
{% render 'collection-template', section: section %}
{% 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 %}
THANK YOU! This works! Really appreciate your help - this was incredible!
you welcome i see white gap top of description you can fix this adding this css
.collection-content {
padding-top: 0 !important;
}
put the css in Assets > theme.css bottom fo file