How to load custom CSS for individual product

Question

I need to create a product page that looks different from the rest of my site. It needs to be an actual product in my catalogue so a custom CMS page won’t work.

I’ve set the page layout in the design tab as empty to give me a blank canvas. How do I now apply CSS to the page?

I was under the impression that I could add CSS to the Custom Layout Update box but I now understand that this is only for XML.

Is there a way I can apply custom CSS for just one page?

Answer 1

You can create a new theme folder, with your custom CSS, and then apply that theme only to your product by setting the Custom Design value in the Design tab of your product.

In this way you can easily reuse your new theme for other products and define all the changes via code, without the need of editing the product values.

Answer 2

Go to admin, and edit your product.

In Custom Layout Update, add following XML code :

<reference name="head">
    <action method="addItem"><type>skin_css</type><name>css/new-style.css</name><params/></action>
</reference>

Here new-style.css, is a CSS file that will be available on this product only.

Add this CSS file at /skin/frontend/PACKAGE/THEME/css/new-style.css. Now you can add your custom stylings (CSS) in this file.