Best way to add page specific CSS

Shopify Partner
4 0 0

Hi I'm fairly new to Shopify and am struggling wth adding custom CSS. I have a few different pages that I would like to add custom CSS to. What's the best way to accomplish this? 

I was considering doing separate files for each page but wasn't sure how to link them using liquid.

Any suggestions?

Thanks!

0 Likes
Astronaut
1890 1 393

I recommend keeping all of your custom styles together in a single file.  You should already have at least one CSS/SCSS file.  Pick one of them and add the custom styles to the end of the file.  (If have both timber.scss and theme.scss, choose theme.scss.)

Chances are that your theme already gives each page a unique id and class.  For example, in theme.liquid, you might find:

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}" >

The result would be, for example:

<body id="about-us" class="template-page" >

No other page is going to have this combination of id and class.  Use this to create styles that are unique to this page.

#about-us.template-page {
  p {
    font-size: 20px;
  }
  a {
    color: green;
  }
}

 

1 Like
Shopify Partner
4 0 0

Thank you so much, that clears it up!

0 Likes
New Member
1 0 0

Hi Alex,

Is it possible to do that way to embed a Google conversion pixel in the code of a specific page?

I need to track thank you page openings eveytime a form is submitted ...

Regards

0 Likes
New Member
6 0 0

I'm able to do it by simply going to the specific page and entering this somewhere on the page in code view (click the little "</>" symbol):

 

(If I wanted all my paragraph tags on a single page all red)

<style>

p {color: red;}

</style>


0 Likes