Move Collection Description to Bottom of Page, But Keep Title On Top - Mobile

[jordanbford1]

How do I get the Collection Description to show under the Product grid but keep the Collection Title at the top of the page? I want this for Mobile only. I am using the Trade Theme. Here is my website. 

😄

[Dan-From-Ryviu]

Hi @jordanbford1 

Please add this code to theme.liquid file and check if it works 

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Select the elements
    var descriptionSection = document.querySelector('.collection-hero__description');
    var footerSection = document.querySelector('#shopify-section-sections--15411656359982__footer');

    // Check if both elements exist
    if (descriptionSection && footerSection) {
        // Move the description section before the footer section
        footerSection.parentNode.insertBefore(descriptionSection, footerSection);
    }
});
</script>

[tim · Accepted solution]

You need to do this:

1. Add a "Rich text" section below product grid. Remove all blocks other than "Text' and set Dynamic source to "Collection Description"

2. In the same section, edit "Custom CSS":

@media (min-width: 750px) {
  .rich-text, .rte {
    display: none;
  }
}

3. Go to "Collection Banner" section and edit "Custom CSS" there (first make sure "show description is checked")

@media (max-width: 750px) {
  .rich-text, .rte {
    display: none;
  }
}

4. Save and enjoy. No theme edit required -- makes theme updates easy.

[jordanbford1]

@tim This work but changes it for desktop too and I am only want it to appear like this when viewing on mobile. Any way to can customize it to where on desktop it shows normally and on mobile it shows this was you put ^?

[tim]

I do not see it applied at your store. This is how it looks in my test store: https://bbkmarket.myshopify.com/collections/all