FROM CACHE - en_header

move Collection Description to bottom of page

Solved
Lillyrosenl
Tourist
10 0 2

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)

Accepted Solutions
LitCommerce
Astronaut
2402 567 556

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 5 (5)
KetanKumar
Shopify Partner
34392 3444 11266

@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
10 0 2

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
34392 3444 11266

@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
2402 567 556

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
10 0 2

It worked! Thank you so much 🙂