How to apply CSS to a specific element on just one page?

Store Design
23

@Spintiller thanks, this was helpful. Can you please update which answer is accepted as a solution? Such as your 2020-06-03 reply or this one?

For the sake of people who aren’t as familiar with coding, I’ve rewritten detailed instructions below, based on Spintiller’s description above and what I found with my store when trying to add content that only appears on the Cart page. Some aspects may vary depending on what theme and apps are installed on any given store:

  1. Visit the page you want the content to appear on
  2. Right click near the top of the page and select “inspect”
  3. Look for the tag that starts with “<body”, which should appear near the top after after “…” (it might be “” or it might be something like
    1. If there is already an id and class defined in the tag (in my case, id=“your-shopping-cart”), take note of that. Mine says:
​
    • Note: If your store has multiple languages, you’ll have to note the id of the body tag for each language. The class should be the same regardless of language.
    • Note: If there are multiple classes (separated by spaces), you only need to use the one that is applicable to this page.
    1. If your body tag does not have an id or class defined:
    2. In your Shopify Admin, go to Online Store > Themes > button with “…” > Edit Code
    3. On the left, select theme.liquid
    4. Click in the code section and ctrl+f to search for “<body” to find the body tag
    5. Change the “” tag to:
​
    • Repeat step 3 to take note of how this appears on the front end for the desired page
    1. On the page, right click on the section that you want to be affected, and click “inspect”
    2. In the inspector, make sure the desired tag is selected in the code viewer, then click the “computed” tab and take note of what appears for “display” (e.g. “display:block”)
    1. Edit the CSS page for your store:
    2. Back in your code editor, on the list on the left, scroll down and expand the “Assets” folder
    3. Open the one that starts with “theme” and contains “css” (e.g. theme.scss.liquid, though any global css file would do)
    1. Go to the end of the CSS file (doesn’t have to be the end, just a clear spot) and add the following code:
// Add a note here for future reference of what this code is intended to do
.css-class-to-hide {
  display: none;
}

#page-body-id.page-body-class {
  .css-class-to-hide {
    display: block !important;
  }
}​
  • Where “css-class-to-hide” is the class you add to the tag on your template for the element you want to only appear on the desired page/template, e.g.
Content to be hidden goes here
​
  • Where “page-body-id” is the class element in the body tag noted in step 3.
  • Where “page-body-class” is the class element in the body tag noted in step 3
  • Where “display: block” is the default display status of the element noted in step 5 (always keep the “!important” part because this is what overrides the default hidden behaviour)
  • If you have multiple languages, separate multiple entries with commas, like this (the class should be the same regardless of language):
#page-body-id-language1.page-body-class, #page-body-id-language2.page-body-class {
 ...
}​
    1. Lastly, test to make sure that the content only appears on the page you want it to appear on.

Anyone who can’t get this to work should probably hire a developer.

Cheers

1 Like