How to add Custom CSS to specific sections on specific pages

Shopify Discussion

Topic summary

Goal: Apply custom CSS to a single Shopify page (Sense 3.0.0) without affecting other pages, e.g., change a specific collection banner’s font size and background.

Key approaches proposed:

  • Scope CSS by template/body classes (e.g., template-product) found on the tag to limit styles to certain templates.
  • Use a page/section-specific selector (unique section ID) to target only that instance of the section.
  • Add a conditional in theme.liquid that checks the collection URL and injects CSS only on that collection page (place styles inside an {% if collection.url == “/collections/…” %} … {% endif %} block).

Outcome so far:

  • The conditional-in-theme.liquid solution was implemented successfully and used to adjust other pages/sections as well.
  • The section-ID CSS attempt did not work for the requester; further debugging pending due to an unavailable store URL.

New questions raised (unresolved):

  • How to change the “Buy it now” button text (“Comprar ahora”) sitewide, with an example product URL provided.
  • Whether similar per-page scoping can be achieved using only the theme’s Custom CSS (to preserve automatic theme updates) rather than editing theme code.

Side request:

  • Another user asked help to color a “tiktok” homepage section; needs clarification/preview URL. Discussion remains open.
Summarized with AI on January 3. AI used: gpt-5.
12

Hello @gomezmau ,

The store url seems unavailable at the moment [ I have tried www.minimaall.com ]. Could you please send updated store url or check the previous one and correct it. I will check why it’s not working and help you to make that work.

Thank you