Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding Category Descriptions by Category Page


Site URL: https://andreahitpas.squarespace.com

Site:  https://andreahitpas.squarespace.com

Password:  paintings

Hello - is it possible to add category descriptions to each individual category page within a store page?  Specifically for the site above, I'd like to have a different description for each of the categories:  New World Oil Paintings, Framed Ink Paintings, Fiber Art Wall Hangings, and One Hit Wonders.  When I change the text at the top of the Store front page, it changes it across all categories.   Ideally, we'd like to have no text above products on the all category page, but with the following descriptions for each individual category:



H1:  New World Oil Paintings

Created during the Covid pandemic, my New World paintings are an expression of the emotions I experienced during those strange days. Although 2020 was full of anxiety and confusion, I intended my New World paintings to feel full of positive energy and look hopeful for the future.

H1:  Framed Ink Paintings

Inspired by a blissful winter escape to warm sunshine and ocean waves, I intend for these colorful pieces to bring joy into any space.  All paintings in this collection are cheerfully created with alcohol ink on yupo paper and come framed.

H1:  Fiber Art Wall Hangings

A few years ago I attended a macramé class on a whim and absolutely loved it! Since then, I’ve been tying knots, dip dying and creating wall hangings out of wool, cord and yarn. I love making this type of art and think it’s an interesting and unique form of art for your walls.

H1:  One Hit Wonders

I am inspired by color, emotions and nature.  Abstract art is the perfect way for me to express my ideas and inspirations freely. Creativity fuels my soul and fills my heart with peace and joy.

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add the following to Settings > Advanced > Code Injection > HEADER. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="ht

6 answers to this question

Recommended Posts

  • 1
Posted (edited)

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d1j8mu9lowy9zf.cloudfront.net/twcsl/0.1d7/twcsl.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.


  begin add store category page description
  Version       : 0.2d2
  SS Version    : 7.1
  Dependancies  : jQuery
  Note          : the code is comprised of several tags. all are needed for the
                  full effect to work.
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
    const categoryUrlSlugDescriptionMap = {
        the format of each line is a category URL Slug and a description for the
        for each category URL Slug copy value from Store Settings > Categories >
        [category name] > Edit Category > URL SLUG field for the store page. you
        only need exactly what can be selected from the field. if you want to
        add a description to the Store page ( i.e. grid/listing ) leave the
        category URL Slug empty
        if the description has single quotes in it then put a backslash before
        the single quotes. example: it's becomes it\'s
        following is an example line. copy the example line below and paste
        after the example line. remove '// ' at beginning of pasted line. repeat
        for as many categories as you want to add a description.
      // '[enter category url slug here between single quotes]' : '[enter category description here between single quotes]',
      use one of the following paragraph styles. if left empty ( i.e. '' ) then
      Heading 3 will be used
      Heading 1
      Heading 2
      Heading 3
      Heading 4
      Paragraph 1
      Paragraph 2
      Paragraph 3
    let paragraphStyle = '';
  <!-- do not change anything below, there be the borg here -->
    .products.collection-content-wrapper .nested-category-children {
      padding-bottom : calc( 54px / 2 ); /* default divided */
      padding-top : calc( 54px / 2 ); /* default divided */
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding {
      margin-bottom : calc( 37px / 2 ); /* default divided */
      padding-bottom : 0;
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding::after {
      all : unset;
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-description {
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      -webkit-box-orient : horizontal;
      -webkit-box-direction : normal;
      -ms-flex-direction : row;
      flex-direction : row;
      margin-bottom : 0; /* default was 37px */
      padding-bottom : 0; /* default was 54px */
      position : relative;
    .tweak-products-category-title .products.collection-content-wrapper .nested-category-description::after {
      border-bottom : 1px solid;
      bottom : 0;
      content : '';
      left : 0;
      opacity : 0.2;
      position : absolute;
      width : 100%;
    @media screen and ( min-width : 576px ) {
      .tweak-products-header-text-alignment-middle .products.collection-content-wrapper .nested-category-description {
        -webkit-box-pack : center;
        -ms-flex-pack : center;
        justify-content : center;
        text-align : center;
    $( ( ) => {
      const paragraphStyles = {
        'Heading 1'   : '<h1>',
        'Heading 2'   : '<h2>',
        'Heading 3'   : '<h3>',
        'Heading 4'   : '<h4>',
        'Paragraph 1' : '<p class="sqsrte-large">',
        'Paragraph 2' : '<p>',
        'Paragraph 3' : '<p class="sqsrte-small">',
        'Monospace'   : '<pre>' +
          '<code>' +
            '</code>' +
      if ( twcsl.storePage.isDetail ) return; // bail on detail
      if ( twcsl.storePage.hasTag ) return; // bail on tag
      const categoryUrlSlug = twcsl.storePage.categoryUrlSlug;
      // bail if no category url slug mapped
      if ( ! ( categoryUrlSlug in categoryUrlSlugDescriptionMap ) ) return;
      const description = categoryUrlSlugDescriptionMap [ categoryUrlSlug ];
      if ( ! paragraphStyle ) paragraphStyle = 'Heading 3';
      $( '<div class="nested-category-description">' )
        .append ( paragraphStyles [ paragraphStyle ] )
        .find ( ':last' )
          .text ( description )
          .end ( )
        .insertAfter ( '.nested-category-title' );
      } );
  <!-- end add store category page description -->

If you use a paragraph style other than Heading 1, then you'll need to update your heading colors in color theme Lightest 2 as many of them are set to white right now. Meaning if you use them without changing, the text will appear not to be there but it is. It is just white text on a white background. My code is not broken, at least as far as that issue is concerned.

Let us know how it goes.

Edited by creedon
version 0.2d2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...