Need: limit custom Shopify CSS so it affects only specific sections, especially “Shop by Category,” instead of the entire store. The original issue is that the current CSS was added globally, so it changes headings, buttons, and product form elements site-wide and also causes layout/design problems in that section.
Main guidance given:
Global CSS files apply everywhere in the theme.
To scope styling, place the code inside the target section’s custom CSS area or directly in that section’s Liquid file.
A more precise fix is to wrap the target area in a dedicated class, then prefix all selectors with that class.
Concrete solution proposed:
Add a wrapper class such as .shop-category-section to the main div of the intended section.
Update all CSS selectors to start with .shop-category-section so styles apply only there.
Outcome: a practical scoped-CSS solution was provided, but the thread does not confirm whether it was implemented successfully. Attached screenshots appear to show the affected store section and design issue.
I’m currently using a custom script to improve the design and behavior of my Shopify store, but I only want it to apply in specific areas, not across the entire site.
In particular, I would like to use these improvements only in certain sections like “Shop by Category” to make them look more premium, while keeping the rest of the store unchanged. Right now, the code is affecting everything and also causing issues with the “Shop by Category” section.
If anyone can help me adjust the code so it only works in selected sections or categories, I would really appreciate it.
@PeppePro02 this is a css code, if you save it in css file of the theme, it will get applied for the entire site. If you want to add it for particular section then please add it in custom css section of that particular section.
Or you can add it to the liquid file of that particular section, this will need bit of coding knowledge to pin point exact file being used for section.