I’m trying to customize my Shopify store and need to modify the styling for a specific element on my cart page. The class I want to change is called “top-labels” but when I look through my theme’s main CSS file, I can’t seem to locate it anywhere.
I’ve searched through the entire stylesheet multiple times but this class just doesn’t appear to be there. This is really confusing because the element is clearly using this class name when I inspect it in my browser.
Where else could these styles be defined? Are there other CSS files I should be checking? Maybe they’re inline styles or coming from a different source?
Any guidance on how to track down these missing styles would be really appreciated. I’m fairly new to Shopify theme development so I might be missing something obvious.
Had this exact problem last month with a client’s store. You’re probably dealing with CSS that’s loading through Shopify’s asset pipeline or getting generated dynamically. Check if your theme uses SCSS files instead of regular CSS - most modern themes compile SCSS into the final stylesheet, so look for files with .scss.liquid extensions. Also check your theme settings in the admin panel. Some themes let you add custom CSS there, which gets injected separately from the main files. The styles might also come from a Shopify app you’ve installed - cart apps especially love injecting their own CSS. Test this by disabling apps one by one to see if the class disappears. Still stuck? Search your entire theme folder for ‘top-labels’ using your code editor’s search function. It might be hiding in a partial file or buried in a liquid template you haven’t checked.
Had the same issue with a vintage theme recently. The styles might be stuck right in your liquid files as inline CSS - some devs throw critical styles between <style> tags to avoid render blocking. Could also be that Javascript is creating the class dynamically. I’ve seen cart themes that generate CSS classes on the fly through DOM stuff. Do a global search for “top-labels” across your whole theme folder, not just CSS files. Check snippet files too, especially cart ones like cart-item.liquid or cart-form.liquid. They usually have both HTML and styles mixed in. Still can’t find it? The class might inherit styles from a parent instead of having its own rules.
This is a common issue with Shopify themes. The class you’re looking for could be defined in a section-specific CSS file rather than the main stylesheet. Make sure to check your assets folder for files like cart.css, cart-drawer.css, or section-cart.css, as these may contain the styles for the cart page. Additionally, it’s worth inspecting the liquid template files like cart.liquid or cart-drawer.liquid, as some developers might include CSS directly within tags there. In some cases, JavaScript can also modify styles dynamically, so if there are any apps or custom scripts in your theme, they might be creating and applying the class and its styles. As a quick debugging method, you can add a temporary style rule in your main CSS with background: red !important for that class. If this changes the background of the element, then the class exists, but its original styles are likely hidden elsewhere.
check the computed styles tab in dev tools - it’ll show u exactly which file the css is coming from. sometimes shopify themes split styles across multiple liquid files or use @import statements u might’ve missed.