How to add descriptions to a product category in the shop

Site URL: https://www.emmaalviti.co.uk/

Hi, I've seen a few threads regarding this already, but I'm struggling to make it work on my site. 

Essentially I want to improve my site's SEO by adding descriptions to EACH category with my shop. So the aim is that underneath the product category ie; Cushions, there would be space to write 50-100 words about the cushions. The products would then follow on underneath. 

The space I want to use is shown in the attachment. 

If anyone has any suggestions, that would be amazing, thanks! 

Try adding this to Settings > Advanced > Code Injection > Footer. 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

  $( ( ) => {
  
    // begin add store category descriptions
    
      const urlCategoryDescriptionMappings = {
      
                                    /* if the description has single quotes in it
                                       then put a backslash before the single
                                       quotes. example: it's becomes it\'s */
        
        '/shop/cushions'     : 'Description 01',
        '/shop/prints'        : 'Description 02',
        '/shop/wall-hangings'   : 'Description 03',
        '/shop/wash-bags'     : 'description description a bc xyz',
        '/shop/little-em'    : 'Description 04',
        '/shop/under-30'       : 'Description 05'
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( location.pathname == '/shop' ) return;
      
      if ( ! location.pathname in urlCategoryDescriptionMappings ) return;
      
      const categoryDescription = $( '<div>' )
      
        .text ( urlCategoryDescriptionMappings [ location.pathname ] )
        
        .html ( );
        
      $( '<div class="nested-category-description">' +
      
        '<p>' +
        
          categoryDescription +
          
          '</p>' +
          
        '</div>' ).insertAfter ( '.nested-category-title' );
        
      // end add store category descriptions
      
    } );
    
  </script>

code by @creedon

There is a newer version of the code at the following.

Hi, apologies for never replying to this.

I've given both solutions above a go and the first one made a difference, but the second one hasn't worked for me yet. This is the result of the first solution (adding the code to Code Injection > Footer.

In essence, this is all I need to do, however it would be better for me if it sat below the products and above the footer. It's for adding SEO keywords so doesn't have to be highly visible. Is there a way of doing this? 

Thanks

On 1/28/2022 at 10:06 AM, yatesnick said:

I've given both solutions above a go and the first one made a difference, but the second one hasn't worked for me yet.

They are both mine. The second being more recent. I also updated the second one just now because of a bug.

It appears to be working again. I tested it locally on your site.

Quote

it would be better for me if it sat below the products and above the footer. It's for adding SEO keywords so doesn't have to be highly visible. Is there a way of doing this? 

The code currently doesn't have an option for bottom placement.

Would it work to set the display to none? Alternately visibility hidden or opacity 0? I'm not an SEO expert so I don't know if search engines discount text in visually hidden elements.

Hi, thank you for responding so quickly. 

That updated code is now working, which is brilliant thank you. 

I'm no SEO expert either unfortunately, but I'm pretty sure it needs to be properly visible. 

Is there any way to alter the placement so it's underneath the products, or is that quite a big task? 

Thanks

Hi again, 

I managed to have a play around with the code and have managed to get it in the right place I think. Hopefully it'll work for me, but thanks again for the support.