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

Adding a header image to Product Category Pages


Riviello

Question

Site URL: https://www.sweetteahostess.com/products/low-country-boil

Hello,
I'm trying to add a header image to each category page within a 7.1 shop. Currently, if you add an image it appears across the entire store. I would like each category to have its own image. For example products > low country boil would use one image while products > oyster roast would use a different image.

Currently, we achieve this by creating standalone pages using a summary block. But this creates competing pages. Ideally, from an SEO standpoint I would like to avoid this and use the shop pages. But having a distinct hero image on each page is a priority.

Appreciate any thoughts.

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

Following too as I want the same thing! Although, I'd also like to each category to have its own header image, title, and intro text. 

Link to post
  • 0

Hi @tuanphan. Yes, please on the title and intro code. Thank you!

Re: image. What do you mean by very complex? I'd be open to a complex solution if you could explain a little more. I really greatly appreciate any insight or assistance you can provide here. 

Link to post
  • 0
23 hours ago, kcasey said:

Hi @tuanphan. Yes, please on the title and intro code. Thank you!

Re: image. What do you mean by very complex? I'd be open to a complex solution if you could explain a little more. I really greatly appreciate any insight or assistance you can provide here. 

See this code by @creedon

Link to post
  • 0
Posted (edited)

@kcasey

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>

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

<script>

  $( ( ) => {
  
    /*
    
      add category attribute to a store category page
      
      Version      : 0.1d1
      
      SS Version   : 7.0
      
      Templates    : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                     Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                     Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                     Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                     Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella,
                     Thorne, Vow, Wav, West )
                     
                     your template is not listed? then it is not currently
                     supported
                     
      Dependancies : jQuery
      
      By           : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    const searchParams = new URLSearchParams ( location.search );
    
    const category = searchParams.get ( 'category' );
    
    if ( category == null ) return;
    
    $( 'body' ).attr ( 'data-store-category', category );
    
    } );
    
  </script>

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

<!--

  begin add store category accordion
  
  Version       : 0.1d0
  
  SS Version    : 7.0
  
  Templates     : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                  Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                  Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                  Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                  Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella,
                  Thorne, Vow, Wav, West )
                  
                  your template is not listed? then it is not currently
                  supported
                  
  Dependancies  : jQuery
                  
                  add category attribute to a store category page
                  
  Notes         : the code is comprised of a style and script tag. both are
                  needed for the full effect to work
                  
                  this effect should be installed after the add category
                  attribute to a store category page code. order is important
                  
                  this effect is not active in SS Preview to test it use private
                  browsing < https://bit.ly/3f6lhq2 >.
                  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  no user serviceable parts below
  
  -->
  
  <style>
  
    body:not( .sqs-edit-mode ) .Intro-content .sqs-col-12 > * {
    
      display : none;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      const category = $( 'body' ).attr ( 'data-store-category' );
      
      if ( category === undefined ) return; // bail if no category
      
      const selector = '.sqs-block-code';
      
      $( '.Intro-content [category="' + category + '"]' )
      
        .parents ( selector )
        
        .nextUntil ( selector )
        
        .slideToggle ( );
        
      } );
      
    </script>
    
  <!-- end add store category accordion -->

Now the tricky bit.

In the store page Intro area add a code block and add the following.

<div category="[enter category here between double quotes]"></div>

Then add your image, title, and text. Repeat pattern for all categories. The category must match exactly what is in the category URL, i.e.?category=bargain. The bit after the equal sign.

View the store page in private browsing and you should be able to switch between categories and the appropriate bit in the Intro area will appear.

Let us know how it goes.

Edited by creedon

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...