Adding descriptions at the bottom of a shop page

Site URL: https://www.thenonsensemaker.com.au/

Hello,

We are trying to add text on our shop page so that it appears bellow our products and gives our customers more information on the collections we are selling. It doesn't let you add a text box bellow products on a shop page so does anyone know how to do this with code?

This is the page we are trying to add text to http://www.thenonsensemaker.com.au/art-prints

And the pink text on the image shows where we want to place the text :)

Thanks in advance!

Add the following to Store Settings > Advanced > Page Header Code Injection for each Store page you want to add a description.

<style>

  /*
  
    add store description at bottom of store product list pages
    
    SS Version : 7.0
    Template   : Brine
    
    */
    
    #store-description {
    
      font-size : x-large;
      text-align : center;
      
      }
      
  </style>

<script>

  $( ( ) => {
  
    /*
    
      begin add store description at bottom of store product list pages
      
      SS Version : 7.0
      Template   : Brine
      
      */
      
      /*
      
        if the description has single quotes it then put a backslash before
        the single quotes. example: it's becomes it\'s.
      
        */
        
      const description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae. Proin libero nunc consequat interdum varius sit. Potenti nullam ac tortor vitae purus faucibus ornare. Fames ac turpis egestas maecenas pharetra convallis posuere morbi.';
      
      // do not change anything below, there be the borg here
      
      let $productList = $( '.ProductList' )
      
      if ( ! $productList.length ) return;
      
      $productList
      
        .after ( '<div id="store-description">' +
        
          '<p>' +
          
            description +
            
            '</p>' +
            
          '</div>' );
          
      // end add store description at bottom of store product list pages
      
    } );
    
  </script>

Let us know how it goes.

Hi @creedon - This is a great solution. I stumbled on this as I just wanted to add some extra space between the bottom of the store page and the footer block. Is it possible to somehow use this to do that? Is there a way to just enter some blank line feeds or such so that it becomes equivalent to putting a spacer block below the last thumbnails in the store? Thanks!

On 1/14/2022 at 6:17 AM, dhob said:

Hi @creedon - This is a great solution. I stumbled on this as I just wanted to add some extra space between the bottom of the store page and the footer block. Is it possible to somehow use this to do that? Is there a way to just enter some blank line feeds or such so that it becomes equivalent to putting a spacer block below the last thumbnails in the store? Thanks!

Add to Design > Custom CSS (SS 7.1 will need a different code)

/* space under shop page */
.ProductList-grid.clear {
    padding-bottom: 60px;
}