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:

CS-Cart 4 Theme Select

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:

Real-Time Theme Customization

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.

Clone & Save Presets

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.

Layouts

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.

Thanks!

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

26 Responses to “Dive into CS-Cart 4 Customization: Themes, Presets, and Layouts”

  1. Earline says:

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

  2. Fabrizio says:

    where are stored a css in the new ver.4 ?

  3. rav says:

    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.

    thanks,

  4. ScottO says:

    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

    • ScottO says:

      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!

      • 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.

        Cheers!

  5. Logo and other image changes not working says:

    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.

    • Hello,

      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.

      Thanks!

      • Logo and other image changes not working says:

        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!

  6. Straz says:

    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?

    • 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.

  7. Ketut says:

    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…

  8. Hi ,
    I tried to edit the layout of my categories page and found out that it isn’t flexible as the i’ve not be able to revert to the default set up . I will like you to assist me in restoring the categories page back to the default layout . I will be really glad if you can help me with a solution soon enough.

    Thank you.

    Best Regards
    Bosun

    • Denis Borisov (CS-Cart) says:

      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.

      Thanks.

  9. Katrin says:

    Hello

    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.

  10. Katrin says:

    Thank you.
    I set a “Rebuild cache automatically” in position “On”.
    I switched to “All stores” and the button was activated.

  11. NJ says:

    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.

  12. NJ says:

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

    • NJ says:

      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