Adding subtitle underneath category title on shop page

Site URL: https://uli-webshop.squarespace.com/

I'm trying to create a subtitle underneath my category title on top of the page. It should say 'Enjoy browsing our categories for different styles'. However I can't seem to get it there. I have tried the following:

h2.nested-category-title:after {
    content: "Enjoy browsing our categories for different styles";
    display: block;
    font-size: 12px;
    color: black;
    font-family: 'jost';

Thank you for helping me out in advance!

Pw: Satoru

(anyone got the reference?😉)

2 hours ago, Nakata said:

Site URL: https://uli-webshop.squarespace.com/

I'm trying to create a subtitle underneath my category title on top of the page. It should say 'Enjoy browsing our categories for different styles'. However I can't seem to get it there. I have tried the following:

h2.nested-category-title:after {
    content: "Enjoy browsing our categories for different styles";
    display: block;
    font-size: 12px;
    color: black;
    font-family: 'jost';

 

Thank you for helping me out in advance!

Pw: Satoru

(anyone got the reference?😉)

Do you mean something like this?

Oh amazing, yes absolutely!

With some extra padding on the bottom side that should be it.

Thank you, it works like a charm!

Hi, I just stumbled across your messages. bangank36, would the code work to costumise content across different category pages? I'm searching for a solution that would give me the possibility to have different texts and descriptions in the section underneath the categorytitel on the individual category pages. Best if wishes, j

7 minutes ago, puslingpaahaender said:

Hi, I just stumbled across your messages. bangank36, would the code work to costumise content across different category pages? I'm searching for a solution that would give me the possibility to have different texts and descriptions in the section underneath the categorytitel on the individual category pages. Best if wishes, j

Can you share your site and take a screenshot of what you mean? 

I need to understand your idea before giving the right solution

Yes the site is www.storiesofsmallthings.com  code: 12345julia

Ideally  I'd like to have the description underneath the Grey line (barely visible in screeshot) and the navigation menu above the Grey line. I have just added the code for the navigation across the category sites, but realised it is showing under the Grey line. Will see if this is possible to change also. Thank you fir getting back to me so swiftly. 🙂

4 minutes ago, puslingpaahaender said:

Yes the site is www.storiesofsmallthings.com  code: 12345julia

 

Ideally  I'd like to have the description underneath the Grey line (barely visible in screeshot) and the navigation menu above the Grey line. I have just added the code for the navigation across the category sites, but realised it is showing under the Grey line. Will see if this is possible to change also. Thank you fir getting back to me so swiftly. 🙂

 

Let me check it

Thank you so much!!

On 10/27/2021 at 7:51 AM, puslingpaahaender said:

Thank you so much!!

Thanks to @creedon with the post

You can try the following steps:

1. 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.1d13/twcsl.js"></script>

2. Access Shop Page: Settings > Advanced > Page Header Code Injection for the store page

<!--

  begin add store category page description
  
  Version       : 0.3d0
  
  SS Version    : 7.1
  
  Dependancies  : jQuery
                  
                  twcsl
  
  Note          : the code is comprised of several tags. all are needed for the
                  full effect to work
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <script>
  
    window.twc = {
    
      '8a8efe37' : {
      
        categoryDescriptionMap : {
        
          /*
          
            the format of each line is a category and a description for the
            category
            
            for each category copy value from Store Settings >
            Categories > [category name] > Edit Category > NAME 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 empty, i.e. ''
            
            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. this
            has been done once initially
            
            */
            
          // '[enter category here between single quotes]' : '[enter category description here between single quotes]',
          
          '[enter category 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
      Monospace
      
      */
      
    let paragraphStyle = '';
    
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    .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;
        
        }
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      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>' +
            
          '</pre>',
          
        };
        
      if ( twcsl.storePage.isDetail ) return; // bail on detail
      
      if ( twcsl.storePage.hasTag ) return; // bail on tag
      
      const category = twcsl.storePage.category;
      
      // bail if no category url slug mapped
      
      if ( ! ( category in
      
        twc [ '8a8efe37' ].categoryDescriptionMap ) ) return;
        
      const description = twc [ '8a8efe37' ].categoryDescriptionMap [
      
        category ];
        
      if ( ! paragraphStyle ) paragraphStyle = 'Heading 3';
      
      $( '<div class="nested-category-description">' )
      
        .append ( paragraphStyles [ paragraphStyle ] )
        
        .find ( ':last' )
        
          .html ( description )
          
          .end ( )
          
        .insertAfter ( '.nested-category-title' );
        
      } );
      
    </script>
    
  <!-- end add store category page description -->

3. Change the content you want to add subtitle for the category in previous codes > Save and Finish

Let me know if it works properly on your site

Another solution i suggest is using Css pseudo element

1. Your Shop Page > Settings > Advanced > Page Header Code Injection, add:

<script>
	(function(){
		document.addEventListener('DOMContentLoaded', function() {
			const headingCategory = document.querySelector('section[data-section-id="60aff316ea362d71d31a715e"] h2');
			headingCategory.setAttribute('data-subtitle',headingCategory.textContent);    
		})
	})()
</script>
<style>
	section[data-section-id="60aff316ea362d71d31a715e"]  h2::before {
	display: block;
	position: absolute !important;
	bottom: 0px;
	font-size: 25px;
	color: inherit;
	font-family: inherit;
	padding-bottom: 15px;
	opacity: 1 !important;
	}
	
	section[data-section-id="60aff316ea362d71d31a715e"] h2[data-subtitle*="Clay"]:before {
		content: "Hi there the Clay";
	}
	
	section[data-section-id="60aff316ea362d71d31a715e"] h2[data-subtitle*="Dreamcatcher"]:before {
		content: "Hi there the Dreamcatcher";
	}
</style>

2. Modify the content with your expected subtitle in the <style> tag

3. If you want one more subtitle for another category, just add one more

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Juhuuu yes, The last one I could make work on my site!! Thank you so so much!!!!!

You are awesome!!!

One more question. I just realised that the print´s section looks quite funky. Do you have any idea what to do about it? It would be great to have Prints aligned with the other categories; clay, dreamcatcher, prints, other. and the subcategories drop down. And then have the category description under the main category as in  2. picture. Do you have any suggestions? thanks j

On 10/29/2021 at 12:55 AM, puslingpaahaender said:

One more question. I just realised that the print´s section looks quite funky. Do you have any idea what to do about it? It would be great to have Prints aligned with the other categories; clay, dreamcatcher, prints, other. and the subcategories drop down. And then have the category description under the main category as in  2. picture. Do you have any suggestions? thanks j

 

Hi,

After checking the previous issue, I 've updated my previous code

<script>
	(function(){
		document.addEventListener('DOMContentLoaded', function() {
			const headingCategory = document.querySelector('section[data-section-id="60aff316ea362d71d31a715e"] h2');
			headingCategory.setAttribute('data-subtitle',headingCategory.textContent);    
		})
	})()
</script>

<style>
  /*Setting the style for pseudo element*/
	section[data-section-id="60aff316ea362d71d31a715e"]  h2::before {
		display: block;
		position: absolute !important;
		bottom: 0px;
		font-size: 25px;
		color: inherit;
		font-family: inherit;
		padding-bottom: 15px;
		opacity: 1 !important;
	}
  
  	.nested-category-tree-wrapper > ul {
		align-items: baseline;
	}

	.products-list  .nested-category-title {
		padding-bottom: 54px;
		margin-bottom: 37px !important;
		position: relative;
		text-align: center;
	}

	section[data-section-id="60aff316ea362d71d31a715e"] h2:not(.nested-category-title-padding):before {
		display: block;
		width: 100%
	}

	section[data-section-id="60aff316ea362d71d31a715e"] h2:not(.nested-category-title-padding):after {
		content: "";
		opacity: .2;
		border-bottom: 1px solid;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	/*apply the Content*/
	section[data-section-id="60aff316ea362d71d31a715e"] h2[data-subtitle*="Clay"]:before {
		content: "Hi there the Clay";
	}
	
	section[data-section-id="60aff316ea362d71d31a715e"] h2[data-subtitle*="Dreamcatcher"]:before {
		content: "Hi there the Dreamcatcher";
	}
</style>

Please update it and let me know how it works on your site

Support me by pressing 👍 if this useful for you

My update result

Prints

Normal category

Wauw, Yes the desktop version is beautiful. If Prints, and subcategories; drawing and photography could be aligned rigth underneath eachother, that´d be perfect. Ill attach pics.

The mobile site looks quite messy though... Is there anyway to make it match the desktop version?

Thank you!

On 11/1/2021 at 12:25 AM, puslingpaahaender said:

Wauw, Yes the desktop version is beautiful. If Prints, and subcategories; drawing and photography could be aligned rigth underneath eachother, that´d be perfect. Ill attach pics.

The mobile site looks quite messy though... Is there anyway to make it match the desktop version?

Thank you!

 

Hi @puslingpaahaender,

You can try adding this to Home > Design > Custom Css to fix your issue on mobile

/*mobile setting*/
@media only screen and (max-width:767px) {
  section[data-section-id="60aff316ea362d71d31a715e"]  h2:before {
    bottom: -20px;
  }
  section[data-section-id="60aff316ea362d71d31a715e"]  h2:after {
    content:'' !important;
    bottom: -10px !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too