Possible to have different background image for different shop subcategories?

I can set a background image in my shop, but it's the same no matter what category/subcategory you're at in the shop.  I'm looking to be able to put in a different image on a few of the subcategories... Is this possible?  Is it a different process for a category vs a subcategory?

Thanks:))

It may be possible. There is no SS built-in way to do what you want. It would help if we could see how you are including your background image and your store page.

Please post the URL for the store page on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi Creedon!  thanks for the reply.  Site is foundationatelier.com  pass is 1235.  If you go to the main navigation drop down menu you can get to the pages I'm talking about.   If you go to OBJECTS and then scroll down to Garden for example, I would like it to have a different background from the other store pages.  I've made a workaround for this that's very close to what I'm trying to achieve.  This can be accessed by going to OBJECTS and then clicking on Garden Workaround.  For this, I created a new page and added my custom background.  Then I added a summary block and set it to display only the items from the Garden category.  This method works ok, the main visual difference being that the summary block doesn't extend as far right and left as the store pages do (there are larger margins of empty space with the summary block technique).  With this said, another possible solution would be some code to get the summary page workaround to have the same margins as the store page.  Do you have any advice on which technique would be easier? (#1  adding a custom image to different store pages OR #2 Using the workaround method and adjusting the margins?).  I think I would prefer #1 because it seems like it could be less steps, but if #1 is too trick, then #2 could suffice.  Thank you so much for you help with this, I really appreciate it!!! :))

Please see Store Page List Category Section Reveal.

Let us know how it goes.

Hi Creedon,

thanks so much for the reply!  I tried it and unfortunately I can't get it to work properly.  I went to a store page and added 2 banner sections at the top (1 that would show when someone goes to the category(or subcategory technically garden) and 1 that would show when someone went to any other page.  The result I'm getting though is that both banners are showing on every page.  Not sure what I'm doing wrong, but I've never done code before ;(

Please point me to the URL for the page where the two images are showing. I can then take a look. From what I can see you got the main body of code installed correctly. 👍 I'm thinking that maybe the problem is the code blocks that need to be added to each page section.

Oh wow.  I just noticed that actually when I view the site from another browser w/the passcode, it's showing up differently than I was seeing it by logging into the back end.  So, it looks like the default image is showing only (not 2 banners as I am seeing on the back end).  The issue is that it should change images when you go to Garden (which is a subcategory of Objects).  Here's the url for that. https://www.foundationatelier.com/shop/objects/garden

I tried this code

<div data-category="garden"></div>

I also tried it this way in case it needed to be different since it's a subcategory of another category (objects)

<div data-category="objects/garden"></div>

thanks again for your help with this:))

btw, how much do you think it would slow down the page if I were to for example have 8-10 different banners?

Ah ha! That should be...

<div data-category="Garden"></div>

As that is what you typed in, in the SS interface for the category name.

As to speed to load it's hard to say. I'd say on desktop it's not going to be much of an issue. On mobile it might be. You'll have to test to see if is an issue. Let me know what you find out.

Yes the effect is disabled in the backend otherwise it would interfere with the editing process.

Let us know how it goes.

Awesome , thanks for the reply Creedon.  I'll test that out and keep you posted:)) thank you again

Amazing it works!!!!! yes!! thank you so much :)))

Hi Creedon! Just wanted to ask you a follow up question to the site customization that you helped me with (where you showed me how to add custom banners to different store pages.  Everything is working great with one exception.  I have 5 navigation links at the top of my page which each lead to a different page of the store, each with a custom banner.  They all work perfectly except for Outdoor.  It shows the correct image, however if you click on the Outdoor nav link 2 times in a row, the color style changes from white text --which it's supposed to be, to black text-- making it difficult to see since the image is mostly black.  If you click again, it will turn white again, and so on and so forth.  As I mentioned the other custom store backgrounds do not have this issue (the text is black for all of the other pages).  The only page that is causing problems is the only page that has white text.  Any ideas as to what could be causing this or how to fix it?

The site again is foundationatelier.com and the password is 1235. 

I am unable to access the site because of the following error.

This is a bit odd because I accessed the site previously. Could be a temporary glitch. But if it doesn't clear soon contact SS customer support.

Hey @Creedon,

I am having trouble with a similar issue. I want to change the background image of of my header search bar for my Green Bay subcategory to be: 

But I don't want to change it for any of the other subcategory pages. My shop link is:

https://www.campechecollective.com/shop/green-bay

Could you help with that?

@dakmitch

I don't think the code in this thread is going to do what you want.

I think the first step is to add the code from the following thread.

Once the code is installed I think we can come up with some CSS to manipulate your background image.

12 hours ago, creedon said:

@dakmitch

I don't think the code in this thread is going to do what you want.

I think the first step is to add the code from the following thread.

Once the code is installed I think we can come up with some CSS to manipulate your background image.

Okay, I added this to the header code injection in settings:

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

@dakmitch

Did you do the second step in the Quick Install instructions?

57 minutes ago, creedon said:

@dakmitch

Did you do the second step in the Quick Install instructions?

Yes, I added this:

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

<style>

  body:not( [data-store-category="Green Bay"] ) .page-section:first-child .section-background {
  
    display : none;
    
    }
    
  </style>

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

29 minutes ago, creedon said:

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

body:not( [data-store-category="Green Bay"] ) .page-section:first-child .section-background {

  display : none;
  
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Okay now my code looks like this:

<script>

  $( ( ) => {
  
    /*
    
      add category attribute to a store category page
      
      Version         : 0.1d2
      
      SS Versions     : 7.0, 7.1
      
      v7.0 Templates  : Brine ( Aria, Blend, Burke, 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
                        
                        twcsl
      
      By              : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
    const category = twcsl.storePage.category;
    
    if ( ! category ) return; // bail if no category
    
    $( 'body' ).attr ( 'data-store-category', category );
    
    } );

body:not( [data-store-category="Green Bay"] ) .page-section:first-child .section-background {

  display : none;
  
  }
  </script>

It didn't seem to work, but there's a high chance I'm doing it wrong ha

@dakmitch

I updated my code post. I forgot a couple of lines.

Let us know how it goes.

@creedon

That didn't seem to work, it left my store looking like this:

https://www.campechecollective.com/shop/green-bay

Would it be easier to just change the site logo while I was on the green bay subcategory?

Thanks.

@dakmitch

SS is having a service issue at the moment.

@creedon

Okay it worked! looks good but the only thing is now my other categories show  nothing, is it possible to have them stay with whatever my theme color is? If not, i'm fine with it being blank

Thank you so much

@creedon

Also, my image is too zoomed in on mobile, but looks good on desktop, is there some trick to that?

1 minute ago, dakmitch said:

is it possible to have them stay with whatever my theme color is?

We'd need to take a different approach. Remove the background image for the section. Give the section whatever background color you want to use then we'd use some CSS and or Javascript to add your image to the one category where you want the image.

Let us know if you want to pursue this route.