(Squarespace) How to add Title/Description to Blog Category Page

[tuanphan]

To add Title/Description to Blog Category Page, like this.

You can also use this Blog tool, so you can achieve Blog Category Title/Description easier without using complex code.

#1. First, find Category Page URL

In my example, we will have: /blog04-1/category/Startup

/blog04-1/category/Ideas

#2. Use this code to Custom CSS

section.page-section.page-banner-custom {
    flex-direction: column;
    background-color: #dadfdb;
    color: #000;
}

#3. Use this code to Code Injection > Footer

<script>
const categoryBanners = [
  {
    url: '/blog04-1/category/Startup',
    title: 'Startup',
    description: 'Some posts for Entrepreneur'
  },
  {
    url: '/blog04-1/category/Ideas',
    title: 'Ideas',
    description: 'Just another ideas for your business'
  }
];
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  
  categoryBanners.forEach(function(banner) {
    if (currentPath === banner.url) {
      const sectionsContainer = document.querySelector('article#sections');
      
      if (sectionsContainer) {
        const newSection = document.createElement('section');
        newSection.className = 'page-section page-banner-custom';
        
        const title = document.createElement('h2');
        title.textContent = banner.title;
        
        const description = document.createElement('p');
        description.textContent = banner.description;
        
        newSection.appendChild(title);
        newSection.appendChild(description);
        
        sectionsContainer.insertBefore(newSection, sectionsContainer.firstChild);
      }
    }
  });
});
</script>

#4. Result

#5. Remember to update these.