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!

Hi @mbaydesign @creedon

I am trying to do the same thing as you but for some reason it is not quite working for me.

I currently have unique shops but they are creating the problems of duplicating products and just lots of other things that are not desirable so I am considering to have only 1 unique shop under which I can have different categories that can act as shops. But I will be facing the same problem with the shared ID and Block IDs for any new elements I add. 

At this stage I am interested in having unique page text / description for each category. I tried to follow the steps that @creedon has sent a link to but for some reason I couldnt get it to work. I would appreciate if someone can assist me with this problem.

This is for 7.1 template - I've downloaded the twcls file, added the page for it where I've linked it to, I've put the twcls script into the header injection area and I've pasted the javascript to the page header area in the store.

Then I copied the CSS you've pasted and changed it to one of the store categories i.e. "t-shirts" ,changed the content of the CSS text but nothing was appearing there. 

Ideally I want to position only the descriptive text without any headings as per the current design, just replace the current text with other alternatives. 

https://limited-clothing.co.uk/menscollection/t-shirts


And on another topic, @mbaydesign I checked your website and noticed that in your checkout page you have a custom LOGO area as in you have your same logo even in the checkout zone. For our website I've hidden the logo because I couldn't change its font to the site titles font. Do you mind sharing your secret of how you managed to add your website logo in the form of either text/font style or an image file to your checkout page ? I would love to do that for ours :] 

Thank you so much both of you, I hope you can assist 

Am I on 7.1 fluid engine template, I think I am as I have the squares in the edit pages ? That might be the reason why nothing is registered ? I think I've followed the steps correctly but just saw it says not applicable next to 7.1 fluid engine

55 minutes ago, NewbiefromUK said:

I checked your website and noticed that in your checkout page you have a custom LOGO area as in you have your same logo even in the checkout zone. For our website I've hidden the logo because I couldn't change its font to the site titles font. Do you mind sharing your secret of how you managed to add your website logo in the form of either text/font style or an image file to your checkout page ?

If you are using an image as your site logo, you can show this logo on your checkout page too!

Once you've loaded the site logo, go to Website then scroll down past all your pages until you reach System Pages > Checkout. In the Checkout settings you can enable Show Site Logo.

Did this help? Please give feedback by clicking an icon below  ⬇️

1 hour ago, NewbiefromUK said:

I tried to follow the steps that @creedon has sent a link to but for some reason I couldnt get it to work. I would appreciate if someone can assist me with this problem.

I see no sign of my category effect code is installed. It's hard to diagnose an issue when the code isn't installed.

I do see that you've correctly installed twcsl.

@creedon

Hi,

I had removed it after seeing its not applicable for fluid engine but just put it back on again.

hope you can check it now, thanks 


The CSS I had put in 

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

 

@paul2009

Hi,

I am using Site Title and a specific font-family.

Guessing it's not possible to do adjustments to the check out branding if its a site title ? 

Thanks 

11 minutes ago, NewbiefromUK said:

I am using Site Title and a specific font-family. Guessing it's not possible to do adjustments to the check out branding if its a site title ? 

Correct. For security reasons, the checkout only uses specified fonts. The workaround is to convert your text to an image and add it this way 🙂

1 hour ago, NewbiefromUK said:

The CSS I had put in

That CSS won't work as it was designed for @mbaydesign's specific setup. I don't have a CSS solution for your particular setup.

I can say that you will want to use [data-store-category="T-SHIRTS"] for the CSS as T-SHIRTS is what is entered for the name of the category.

1 hour ago, NewbiefromUK said:

I had removed it after seeing its not applicable for fluid engine

Fluid Engine Compatibility has four possible states Yes, No, Unknown and Not Applicable.

Not Applicable means that fluid engine is not applicable to the code. In this case the code is manipulating the body element of the HTML document and FE is not involved.

@creedon

Thank you for the explanation.

I also have nested category breadcrumbs or titles but I've just hidden them. Even with them visible I still cant see any new text or changes to the category page text. 

Would you have an idea of how the CSS can be designed for my shop ? There are currently 4 unique shops and are creating duplicate items in the search results. So I would love to be able to have only 1 shop which can have all products and put them into the relevant categories without duplications. 

Is there a way we can target the section where I currently have text with your code ? 

This would be very appreciated as its the reason thats holding me back from disabling all the other shops 😕

Thank you 

On 2/26/2024 at 12:13 AM, paul2009 said:

Correct. For security reasons, the checkout only uses specified fonts. The workaround is to convert your text to an image and add it this way 🙂

Hi @paul2009

I took on this task and converted to img and so far it's working great with 1 hiccup that I hope you might have a solution for. I tried to fix it but it wasn't doing anything unless it's not possible to do it.

I noticed the site logos is below the mega menu dropdown whereas the site title text was sitting above it when the drop down would appear. 

Tried to solve this with a z-index parameter but wasnt doing much and decided to ask for help If you have a solution for it.

Would appreciate if you can let me know if there is a way to sit the sit title logo img above the mega menu drop down when you hover over shop and collections.


www.limited-clothing.co.uk

Thanks

On 5/8/2021 at 10:16 PM, creedon said:

Please see Add Category Attribute to a Store Category Page.

Let us know how it goes.

Hi @creedon

I have carefully followed all the instructions, however [data-store-category] is still not found anywhere in the body. Not sure what I'm doing wrong.

9 minutes ago, abc said:

I have carefully followed all the instructions, however [data-store-category] is still not found anywhere in the body. Not sure what I'm doing wrong.

It appears you have installed correctly and my code is working.

@creedon

Hmm, I was looking for it under Sources, not Elements.

Yep, I see it under Elements. Not sure why searching for it under Sources yields no results. Thank you so much!

P.S. Tried donating twice using CC, but got error every time.

3 hours ago, abc said:

Not sure why searching for it under Sources yields no results.

Because Sources is the code before the page has been fully rendered in the browser. In other words it is the source code that is passed to the browser, which then is rendered by the browser into its final form.