Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts

Good day!

In the recent CS­-Cart 4 Final, we’ve introduced many new features and improvements in this version, including a new way to customize the look and feel of your store.

In this post, I’d like to give you a brief overview of our new approach to storefront appearance.

Themes and Presets

In CS-­Cart 4, you can easily change the appearance of your storefront by picking a theme and, if necessary, customizing it.

Selecting a theme is very easy under Design → Themes in your admin panel; you may have seen similar interfaces in other popular CMS, like WordPress:

Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts - CS-Cart Blog

On the right side of this page, you will see your active theme, preset, and layout.

Also, from this page, you can go directly to the built­-in template editor.

Note that your themes are highly customizable: click on the Customize theme button to modify your store favicon, backgrounds, colors, fonts, and more in real time via the built­-in WYSIWYG Theme editor:

Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts: photo 2 - CS-Cart Blog

Theme modifications can be saved to presets. A preset holds all your modifications and can be re­used in the future. The default CS­-Cart theme has three presets available out of the box: Satori (default,) Ocean, and Wooden; you are free to modify them and create your own presets based on them.

Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts: photo 3 - CS-Cart Blog

A few clicks on the Install themes tab (under Design → Themes in the admin panel) is all it takes to install a new theme in the admin panel. Currently, you must manually place a new theme in the var/themes_repository directory to make it installable, but we plan to allow installation of new themes directly from the marketplace when it’s created (read more about our roadmap.)

CS­-Cart 4.0.1 is shipped with a single highly customizable theme.


As with CS­-Cart 3, in CS-­Cart 4 you can arrange block placement for different store locations with simple drag & drop, under Design → Layouts. In the new version, layouts can be named, saved for future reuse, and easily changed similarly to theme presets.

The widget mode (planned for release in CS-­Cart 4.0.2) will rely heavily on layouts. If you think about it, a widget is just a special layout that fits a particular web page. We’ll be announcing this feature later and we’ll explain how you can use this feature to build CS­-Cart inside a Facebook page, a WordPress blog, or any other page.

We’ll be happy to answer any questions you might have right here in the comment area.

Stay tuned to CS-­Cart on Twitter and Facebook.


UPD: CS-Cart 4 customization is also explained in our new video tutorial.

22 thoughts on “Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts

  • July 31, 2013 at 18:30

    Where is the wysiwyg editor in the blocks for CS-Cart 4?

    • August 1, 2013 at 10:26


      The WYSIWYG layout manager (formerly known as Block manager) is under Design → Layouts in your CS-Cart 4 admin panel.

  • August 6, 2013 at 10:51

    Dear Fabrizio,

    All the client-side CSS is stored in the directory design/themes/basic/css (for the Basic theme).

    The back-end CSS is in design/backend/css.

  • August 22, 2013 at 15:11

    I really love this editor. but where is the option to change the top menu font colour.

    Does this alone needs to be changed via direct css?

    Correct me if I am wrong.


    • August 23, 2013 at 15:23


      You are right, the menu font cannot be changed via the theme editor. Sorry about that, I’ve already posted a bug about it.

      You can change the color by modifying the style files directly (design/themes/basic/css).

      • August 24, 2013 at 08:19

        Thanks for the positive reply looking forward for the change in next upgrade..

  • August 25, 2013 at 20:45

    How do I change the default layout to specify a different layout? My store shows the DEFAULT LAYOUT as “Main (basic clone)” and I can’t seem to change this to the layout I’ve been working with called simply “Main”?

    Here are the steps I performed:
    1) Before I started messing with any themes or layouts or anything, I cloned the theme titled “Basic” (just so I’d have it available, just in case).
    2) I then switched back to the original “Basic” theme to use this for my store, and am using this to make my customizations.
    3) made changes to the “Main” layout

    My site appears as I expected while I’m working on it and viewing it through the Themes editor, but when I go to the site outside of the development environment, it uses a different layout. When I go back into the Admin tool and browse the theme my store is using, it shows the correct Active Preset, but the Default Layout is always showing a value of “Main (basic clone)”, when it should be “Main”. I can understand if a Layout is tied to a Theme, but even in this situation, I’m using the “Basic” theme and would expect the layout it’s tied to would be the “Main” and not the “Main (basic clone)”.

    – Lost and confused

    • August 26, 2013 at 01:26

      Got this figured out…. Go to Design -> Layouts. Select the Layout that you want to be the default, and select “Edit Layout” from the configuration dropdown on the right. There’s a checkbox titled “Default”, which if checked, will set the layout you’re looking at as the default. Phew!

      • August 27, 2013 at 13:19

        Dear Scott,

        Sorry for the slow response.

        Yes, it does seem a bit too tricky, I will inform the designers and the developers, maybe we will be able to simplify it soon. Thanks for pointing it out!

        We really want to make CS-Cart admin panel easy to use, we’ve already done lots of usability improvements in the latest versions. It’s a shame when a user has to guess, we’ll try our best to improve the UI.


  • August 28, 2013 at 04:36

    When I change the logo or any other images via Theme Editor nothing happens. The image does not update, and I get no errors or confirmation of any kind. Is this possibly a permissions issue? Is there some upload folder that isn’t configured with the correct permissions? I’ve tried changing logo/images using both Safari and Chrome.

    • August 28, 2013 at 16:28


      After picking a logo, just save the changes in a preset. If there are any permission-related issues, you should see a notification about it.

      I understand this is a bit counter-intuitive that the logo is not previewed immediately, sorry for that. I’ve already told the developers about this issue.


      • August 28, 2013 at 20:53

        Ah, thank you for the quick response! Yes, some changes reflect right away where some do not display until you hit save. Should be consistent one way or the other— and ideally reflect changes as they happen. Sounds like that’s what you’re working towards. Thanks!

  • September 2, 2013 at 22:15

    Okay, so I had the presets when I started working and now the Ocean and the Wooden themes have vanished. How can I get them to appear as options again?

    • September 3, 2013 at 15:22

      Dear Straz,

      Let me please clarify what happened: you were modifying another preset, not Wooden or Ocean, and when you saved the changes in this preset, both Wooden and Ocean are no longer available. Is that correct?

      This should not happen—there is no way to implicitly destroy an existing preset really. You may want to contact the technical support team.

  • September 4, 2013 at 06:54

    Hi i have a custom design that i want to implement into CS4.
    However when i edit the CSS files in basic/css/ they are overridden by what seems to be a dynamically created standalone.css file.

    I’ve searched and can’t find any documentation for developers to create custom themes apart from this thread which shows you how to simply customize existing layouts with very limited options available…

  • September 11, 2013 at 11:09

    Dear Bosun,

    You should have added a new layout (with an option of copying data from your default layout enabled), and then you would have been able to edit the layout without risk, with a chance to get back to the default one.
    If you still seek for help, you may want to contact our support team.


  • September 16, 2013 at 06:06


    Please tell as to the admin page “Template editor” – dispatch=template_editor.manage set “Rebuild cache automatically” in the “On”

    Thank you.

    Best Regards Katrin.

  • September 16, 2013 at 15:01

    Good to hear you’ve solved the problem yourself. Sorry for the inconvenience, I hope everything’s OK now.


  • September 19, 2013 at 12:32

    I’m trying to add a main background image but it isn’t working, I get no errors or anything and the preset lists a background image but the css doesn’t.

  • September 19, 2013 at 13:12

    Its working now but how do I change the background color of the menu?

    • September 19, 2013 at 13:14

      I’ve found it but I can’t control the gradient – I can only select 1 colour so the gradient doesn’t match the background

Comments are closed.