Product Page Custom Layout

Hi, so i'm new to CS-cart and so far i love it. I'm now trying to customize the way things look. my question for everyone out there is.

  1. what is the best way to edit browse the smarty engine used by CS-Cart, so i don't feel like i'm chasing my tail…
  2. IF i have a layout and the design all done. I even have all the static html ready how would I go about using this layout as the single .tpl file used for a product's details page. and then plug in the shop product/add to cart form.

    My usual way of customizing a shopping cart is to use static files only and then just plugging in the shop's product form in to my static pages. This by itself usually makes the speed and ease of customization supper fast. I of course do not touch the system pages, the cart, my account, checkout etc. just the catalog pages and the shop landing pages. I'm looking for a way to access just the product's form block and then insert it into my own custom pages.

    well i guess that's it thanks.

If you look at the file named


you will see that the whole content area is wrapped in a {hook name=“product:layout_content”} tag.

What this means is that you can prepend (pre), append (post) or replace (override) that content area by providing a file such as:

skins/customer/addons/my_changes/hooks/products/layout_content.override.tpl (or pre or post instead of override).

The contents of that file (in this case 'override') will replace the standard content for the product detail page.

This same concept applies to any template 'hook' within the system. You can also review this document:

This document was written before my_changes was part of the product so simply change references from 'local' to 'my_changes' and the concepts will still all apply.

You might have to scavenge the cart's Add to Cart button or review the file common_templates/product_data.tpl for objects to use and the “captured” html elements if you want to reuse them (like to get pricing to update when different options are selected, etc.)

But using this hook at this level will prevent you from having the ability to use different layouts for different products. But there are plenty of hooks at lower levels to adjust the look and feel of the product details page.

Hi, Thanks for taking the time to lay it all out for me. I have seen you all over this forum and i appreciate all the work you have done to help people with understanding and debugging their cs-cart.