Jump to content

Adding subtitle underneath category title on shop page

Go to solution Solved by Beyondspace,

Recommended Posts

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?😉)

Screenshot 2021-10-21 at 14.47.00.png

Link to comment
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?😉)

Screenshot 2021-10-21 at 14.47.00.png

Do you mean something like this?

image.thumb.png.b253b8214640562d3fbaca31a6297420.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution
5 minutes ago, Nakata said:

Oh amazing, yes absolutely!

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

 

You can try adding to Home > Design > Custom Css

section[data-section-id="615b1adf9e102e351c99ecf7"]
  .nested-category-title:after {
  content: "Enjoy browsing our categories for different styles" !important;
  display: block;
  font-size: 25px;
  color: black;
  font-family: "jost";
  padding-bottom: 15px;
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Screenshot_20211027-021516_Chrome.thumb.jpg.890f16d865a143f5d278491ff33ed27e.jpgYes 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. 🙂

Link to comment
4 minutes ago, puslingpaahaender said:

Screenshot_20211027-021516_Chrome.thumb.jpg.890f16d865a143f5d278491ff33ed27e.jpgYes 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

 

746740082_Skrmbillede(28).thumb.png.030daa60275e94451e5b6edb99ce0778.png1528940717_Skrmbillede(29).thumb.png.700a60d2d22e99cc9fcad0167fa8af25.png

Link to comment
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

 

746740082_Skrmbillede(28).thumb.png.030daa60275e94451e5b6edb99ce0778.png1528940717_Skrmbillede(29).thumb.png.700a60d2d22e99cc9fcad0167fa8af25.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My update result

image.thumb.png.01437347a786e60ffebff47abe6820ed.png

 

Prints

image.thumb.png.54f05d5d1679886e97a821b73f174254.png

Normal category

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

 

Skærmbillede (36).png

Skærmbillede (32).png

Skærmbillede (33).png

Skærmbillede (34).png

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

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.