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

Store Design
, , ,

Topic summary

A user seeks to reposition the collection description below the product grid on mobile devices while keeping the collection title at the top. Desktop layout should remain unchanged. They’re using the Trade Theme on Shopify.

Proposed Solutions:

  • One responder suggested adding JavaScript code to the theme.liquid file (code snippet not fully visible)
  • Another provided a CSS-based approach requiring no theme file edits:
    1. Add a “Rich text” section below the product grid with dynamic source set to “Collection Description”
    2. Hide this section on desktop using CSS media query (min-width: 750px)
    3. Hide the original description in the Collection Banner section on mobile using CSS media query (max-width: 750px)

Current Status:

The user reports the CSS solution affects both mobile and desktop views. The solution provider indicates the code hasn’t been properly applied yet, as their test store shows the expected behavior. The issue remains unresolved pending correct implementation.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

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.

Screenshot 2025-04-18 at 22.35.28.png
Screenshot 2025-04-18 at 22.35.28.png934×1388 100 KB

:grinning_face_with_smiling_eyes:

2 Likes
2

Hi @jordanbford1

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

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”

Screenshot 2025-04-19 at 2.27.42 PM.png
Screenshot 2025-04-19 at 2.27.42 PM.png677×476 35.3 KB

  1. In the same section, edit “Custom CSS”:
@media (min-width: 750px) {
  .rich-text, .rte {
    display: none;
  }
}
  1. 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;
  }
}
  1. Save and enjoy. No theme edit required – makes theme updates easy.
4

@tim_1 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 ^?

5

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