Target shop category pages with css

Hi - 

I think I might have seen somewhere that this is not possible - but I need to ask...  I have a single shop and am displaying categories as links in the main nav.  I know how to target a specific page with global css or use code injection via the advanced section on each page, but because the category pages are only links, there is no  advanced section AND they all have the same shop ID, so I can't target them specifically.  (I'm trying to inject some formatted text below the h2 --- i.e. h2:after {content:"text";}  

My first method was to create each category as a unique shop, for many reasons, that was not a good method.    

Surely there is some way to target the category pages with unique code. Isn't there an ID# specific to the category? 

Thank you!

Debbie

OK - it's not live so, here's one category page.

https://www.anderlegallery.com/shop/petrified-wood 

WGKAcW34ke

I'd like to add descriptive text to the top of each category page and I can't think of another way to manage it except via some css, but can't do it without unique page/category identifiers. ¯\_(ツ)_/¯

Please see Add Category Attribute to a Store Category Page.

Let us know how it goes.

Very cool - I will try that - thank you!

Hmm - I am on 7.1 - but I'm not seeing any new class. Looking at the code above, it looks like it's supposed to add a class attribute to the body tag identical to the category name - i.e. petrified-wood - is that not correct?

If not, what should I be seeing?  My css works fine applying to the store collection id - (that's what's there now) - so if I just have a unique class to use...  🙂 Thanks!

I have updated my code there was a bug.

The code adds the data-store-category attribute to the body tag.

It can be targeted in a CSS selector with something like the folllowing.

[data-store-category="Petrified Wood"]

Here is the CSS.

@media screen and ( min-width : 576px ) {

  [data-store-category="Petrified Wood"].tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title:after {
  
    border-color : #a00;
    content : "Text goes here...";
    font-family : Raleway;
    font-size : calc( 1rem );
    padding : 20px 0;
    opacity : 1;
    text-align : center;
    
    }
  }

@media screen and ( max-width : 575px ) {

  [data-store-category="Petrified Wood"].tweak-products-category-title .products.collection-content-wrapper .nested-category-title.nested-category-title-padding:after {
  
    /* add mobile property value pairs here */
    
    }
  }

The selector is longer because I used the same selector SS uses, with the addition of my added attribute.

Let us know how it goes.

Excellent! Thank you very much! I will drop that in tomorrow.

Thank you so much for that!  

I am having a little issue with formatting that I did not anticipate - as you can see from this page when the window gets smaller: https://www.anderlegallery.com/shop/lamps  

Because there's more than a line or two of text, this pretty well hoses the top of the page. The text is feeding UP instead of pushing the content down. 

I have removed any attributes that aren't directly related to styling the text. Maybe it's a consequence of the "content" css that I wasn't aware of. Maybe it's something to do with the flex display values? I've tried several combinations of adjustments to the css  - of both my css and the css of the other elements. The best I can do is a side by side presentation of the category title and the copy by adding a position:relative to the :after. It's not ideal... there must be a way around whatever is happening.  Do you have any ideas?

Thank you so much for your help!

On 5/12/2021 at 6:24 AM, mbaydesign said:

Thank you so much for that!  

I am having a little issue with formatting that I did not anticipate - as you can see from this page when the window gets smaller: https://www.anderlegallery.com/shop/lamps  

Because there's more than a line or two of text, this pretty well hoses the top of the page. The text is feeding UP instead of pushing the content down. 

I have removed any attributes that aren't directly related to styling the text. Maybe it's a consequence of the "content" css that I wasn't aware of. Maybe it's something to do with the flex display values? I've tried several combinations of adjustments to the css  - of both my css and the css of the other elements. The best I can do is a side by side presentation of the category title and the copy by adding a position:relative to the :after. It's not ideal... there must be a way around whatever is happening.  Do you have any ideas?

Thank you so much for your help!

Can you take a screenshot? Which screen size did you test?

I've seen the issue the OP is talking about. I think it stems partly from using absolute positioning for the added text content.

When the screen gets smaller it rides up over the title because of the position setting and use of bottom : 0;

I don't have a solution but that is what I observed in a quick look.

Thank you both! I am sizing in the browser window and if you look at the page, you can see the text  feeding UP.  (https://www.anderlegallery.com/shop/lamps) - well, you could before I just fixed it. 🙂  I finally figured out the right css.

No, I'm not using absolute positioning, or bottom: 0 - I finally see where you're seeing that though, but that's the native code. Somehow I missed that before because it was on the pseudo element. I didn't even realize there was a native :after other than my own.

But it is the flex display that was causing the problem.  So, I set relative positioning and a  display: block on my css AND overrode the native flex css on the nested category title with display: block and that seemed to do the trick. 🙂 

Thanks  again for the assistance!