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?


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.

Design tab in product edit screen


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>

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.