Solved

move Collection Description to bottom of page

Lillyrosenl
Tourist
13 0 3

Hi, i've been reading a lot of posts about this subject but cant seem to find the answer for my theme. I'm using the Blockshop theme. 

 

I would like to split my collection title and collection description and move the collection description to the bottom of the page whilst keeping the collection title up. There will be lots of text and it would be too time consuming for the customer to scroll all the way to the products every page. my url is: Lillyrose | Trendy & shiny jewelry | Shop online

 

Any help would be very much appreciated!

 

Accepted Solution (1)

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Lillyrosenl,

You can follow these steps:

- Step 1: Go to Customize > Collection > Collection header > Show collection description. You need to disable it to not show description at title.

- Step 2: Go to collection--body.liquid file and paste this at the bottom of the file:

{% if collection.description != blank %}
  <div data-section-id="" style="padding-top: 0;">
    <p data-item="paragraph">
      {{ collection.description }}
    </p>
  </div>
{% endif %}

Hope it is clear to you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 15 (15)

KetanKumar
Shopify Partner
36839 3635 11972

@Lillyrosenl 

oh  sorry for that can you please send collection page code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Lillyrosenl
Tourist
13 0 3

Thank you so much!

I have a collection.json in templates, and  collection--body.liquid, collection--header.liquid
and collection--navigation.liquid in sections. So i guess it's collection-header.liquid? I'm pasting the code here: 

{%- liquid
assign alt_color = section.settings.alt-color
assign apply_overlay = section.settings.apply-overlay
assign enable = section.settings.enable-header
assign image_height = section.settings.image-height
assign show_description = section.settings.show-description
assign show_image = section.settings.show-image
assign show_title = section.settings.show-title
assign title_alignment = section.settings.title-alignment
assign use_image_fallback = section.settings.use-image-fallback
-%}

{% if enable %}
{% capture header_image %}
<div class="collection--header--image">
{% if collection.image %}
{%
render "image",
image: collection.image,
darken: apply_overlay,
darken_mobile: apply_overlay,
full_width: true
%}
{% elsif collection.products.first.featured_media.preview_image and use_image_fallback %}
{%
render "image",
image: collection.products.first.featured_media.preview_image,
darken: apply_overlay,
darken_mobile: apply_overlay,
full_width: true
%}
{% else %}
{% assign show_image = false %}
{% endif %}
</div>
{% endcapture %}

<div
class="collection--header--root"
data-section-id="{{ section.id }}"
data-alternative-color="{{ alt_color }}"
data-apply-overlay="{{ apply_overlay }}"
data-image-height="{{ image_height }}"
data-show-image="{{ show_image }}"
data-spacing="none"
data-title-alignment="{{ title_alignment }}"
>
{% if show_image %}
{{ header_image }}
{% endif %}

{% if show_title or show_description %}
<div class="collection--header--heading">
{% if show_title and collection.title != blank %}
<h1 data-item="featured-heading">
{{ collection.title }}
</h1>
{% endif %}

{% if show_description and collection.description != blank %}
<p data-item="paragraph">
{{ collection.description }}
</p>
{% endif %}
</div>
{% endif %}
</div>
{% endif %}

{% schema %}
{
"name": "Collection header",
"settings": [
{
"id": "enable-header",
"label": "Enable",
"type": "checkbox",
"default": true
},
{
"id": "show-title",
"label": "Show collection title",
"type": "checkbox",
"default": true
},
{
"label": "Position title",
"id": "title-alignment",
"type": "radio",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" }
],
"default": "center"
},
{
"id": "show-description",
"label": "Show collection description",
"type": "checkbox",
"default": true
},
{
"id": "show-image",
"label": "Show collection image",
"type": "checkbox",
"default": true
},
{
"id": "use-image-fallback",
"label": "Use a product image if no collection image found",
"type": "checkbox",
"default": true
},
{
"id": "image-height",
"label": "Height",
"type": "select",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" },
{ "value": "original", "label": "Natural (no cropping)" }
],
"default": "medium"
},
{
"id": "alt-color",
"label": "Use light text color",
"type": "checkbox",
"default": true
},
{
"id": "apply-overlay",
"label": "Darken image",
"type": "checkbox",
"default": true,
"info": "Can enhance text visibility"
}
]
}
{% endschema %}

KetanKumar
Shopify Partner
36839 3635 11972

@Lillyrosenl 

yes please remove this code that file 

{% if show_description and collection.description != blank %}
<p data-item="paragraph">
{{ collection.description }}
</p>
{% endif %}

after your have collection bottom of the file 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Lillyrosenl,

You can follow these steps:

- Step 1: Go to Customize > Collection > Collection header > Show collection description. You need to disable it to not show description at title.

- Step 2: Go to collection--body.liquid file and paste this at the bottom of the file:

{% if collection.description != blank %}
  <div data-section-id="" style="padding-top: 0;">
    <p data-item="paragraph">
      {{ collection.description }}
    </p>
  </div>
{% endif %}

Hope it is clear to you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Lillyrosenl
Tourist
13 0 3

It worked! Thank you so much 🙂 

RVDP1999
Tourist
8 0 2

Hello, do you know how I can do it in the warehouse theme? I can't find it anywhere...

LitCommerce
Astronaut
2860 684 732

Hi @RVDP1999,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KetanKumar
Shopify Partner
36839 3635 11972

@RVDP1999 

yes, please share store url and code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RVDP1999
Tourist
8 0 2
RVDP1999
Tourist
8 0 2

Hello, do you know how I can do it in the warehouse theme? I can't find it anywhere... URL: www.10watches.nl

KetanKumar
Shopify Partner
36839 3635 11972

@RVDP1999 

can you please send collection code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RVDP1999
Tourist
8 0 2

TOP PART (COLLECTION INFO + TOOLBAR)
--------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if collection.all_products_count == 0 -%}
<div class="empty-state">
<p class="empty-state__heading heading h1">{{ collection.title }}</p>
<p class="empty-state__description">{{ 'collection.general.empty' | t }}</p>

<div class="empty-state__button-container">
<a href="{{ routes.root_url }}" class="empty-state__button button button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- else -%}
<div class="collection__dynamic-part card {% if collection.products_count == 0 %}clearfix{% endif %}">
<header class="card__header {% unless collection.template_suffix == 'brand' %}card__header--tight{% endunless %}">
{%- comment -%}
IMPLEMENTATION NOTE: unfortunately I was forced to add a lot of extra div (collection__meta, collection__meta-inner, collection__header-inner,...)
to be able to accommodate with the brand related layout which make things more complicated...
{%- endcomment -%}

<div class="collection__header {% if collection.template_suffix == 'brand' %}collection__header--brand{% endif %}">
{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
<div class="collection__brand-logo-wrapper hidden-pocket">
<div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
</div>
{%- endif -%}

<div class="collection__header-inner">
<div class="collection__meta">
{%- if section.settings.show_collection_image and collection.image and collection.all_products_count > 0 and collection.template_suffix == 'brand' -%}
<div class="collection__brand-logo-wrapper hidden-lap-and-up">
<div class="collection__brand-logo-image lazyload image--fade-in" data-bg="{{ collection.image | img_url: '250x' }}"></div>
</div>
{%- endif -%}

<div class="collection__meta-inner">
<h1 class="collection__title heading h1">
{%- if collection.handle == 'all' -%}
{{- 'collection.general.all_products' | t -}}
{%- else -%}
{{- collection.title -}}
{%- endif -%}
</h1>

{%- assign offset = paginate.current_offset | plus: 1 -%}
{%- assign page_size = paginate.current_offset | plus: paginate.page_size | at_most: paginate.items -%}

<p class="collection__products-count text--small hidden-lap-and-up">{{ 'collection.general.products_count' | t: count: collection.all_products_count }}</p>
<p class="collection__products-count text--small hidden-pocket hidden-desk">{{ 'collection.general.showing_count' | t: offset: offset, page_size: page_size, count: paginate.items }}</p>
</div>
</div>

{%- if collection.description != blank -%}
{%- assign allow_collapse_description = false -%}

{%- if section.settings.collapse_collection_description -%}
{%- assign allow_collapse_description = true -%}
{%- endif -%}

<div class="collection__description {% if allow_collapse_description %}expandable-content{% endif %}" aria-expanded="false">
<div class="rte">
{{ collection.description }}
</div>

{%- if allow_collapse_description -%}
<button class="expandable-content__toggle">
<span class="expandable-content__toggle-icon"></span>
<span class="expandable-content__toggle-text" data-view-more="{{ 'collection.general.view_more' | t | escape }}" data-view-less="{{ 'collection.general.view_less' | t | escape }}">{{- 'collection.general.view_more' | t -}}</span>
</button>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
</header>

KetanKumar
Shopify Partner
36839 3635 11972

@RVDP1999 

yes this current 

also i need collection code also

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
RVDP1999
Tourist
8 0 2

What do you exactly mean? The theme is warehouse. Where can I find the collection code

SarahMacleod
New Member
4 0 0

Hi LitCommerce,

 

I am having the same issue as Lily...

 

Can you please tell me where I can find:

"Customize > Collection > Collection header > Show collection description"

 

Furthermore, how can I ensure the text is formatted nicely (centre align, etc) when it is at the bottom of the section?

 

Thank you 🙂