3 Quick steps to create your own 3 Quick steps to create your own theme in cs-cart-4.0.3theme in cs-cart-4.0.3

Some practical pieces of adviceSome practical pieces of advice

The first thing – don’t make changes in the basic theme. If you do The first thing – don’t make changes in the basic theme. If you do some incorrect changes, they can go to the core files of the whole some incorrect changes, they can go to the core files of the whole template. Thus you will have problems with recovering the whole template. Thus you will have problems with recovering the whole your site. If you clone basic theme and something goes wrong your site. If you clone basic theme and something goes wrong with your custom theme, you can always delete this theme and with your custom theme, you can always delete this theme and clone basic theme again. The same procedure has to be done clone basic theme again. The same procedure has to be done with layout and theme presets. with layout and theme presets.

1. Clone Basic theme1. Clone Basic theme

So, first of all you should clone basic theme in admin: Design -> So, first of all you should clone basic theme in admin: Design -> Themes -> press Clone theme.Themes -> press Clone theme.

In the window write name and press Save. After this your custom In the window write name and press Save. After this your custom theme will be automatically displayed in the Front End of your theme will be automatically displayed in the Front End of your site.site.

2. Create a new preset2. Create a new preset

For sure, you will need to change the view of your site, logo etc. So, For sure, you will need to change the view of your site, logo etc. So, next step is to change colors, backgrounds, fonts, store logo, store next step is to change colors, backgrounds, fonts, store logo, store favicon.favicon.Now you are in Design -> Themes. Press button Customize theme. Now you are in Design -> Themes. Press button Customize theme. After that your Front end will be opened in a Template editor. You After that your Front end will be opened in a Template editor. You can also see your web site in the Template editor from menu in can also see your web site in the Template editor from menu in admin: Design -> Template editor.admin: Design -> Template editor.

Above all, it would be useful to see how each preset looks. Choose Above all, it would be useful to see how each preset looks. Choose some of presets in the left drop down menu PRESETS.some of presets in the left drop down menu PRESETS.

For example, we choose Reddish. Now you can see that your site For example, we choose Reddish. Now you can see that your site was changed to orange color scheme.was changed to orange color scheme.

If you press button CLOSE, situated under the button with arrow, If you press button CLOSE, situated under the button with arrow, this chosen preset Reddish will be set in your Front end.this chosen preset Reddish will be set in your Front end.

It is ok, but you need also to change logo, favicon, colors etc. And, for It is ok, but you need also to change logo, favicon, colors etc. And, for sure, you need to save all your own changes and have an opportunity sure, you need to save all your own changes and have an opportunity to switch it for some of your other theme (if you will install or buy one).to switch it for some of your other theme (if you will install or buy one).So, you should choose layout that is maximally good for you and press So, you should choose layout that is maximally good for you and press clone button. After that, enter your name in the appeared window and clone button. After that, enter your name in the appeared window and press OK.press OK.To this moment all changes are saved in this preset. If you don’t like it To this moment all changes are saved in this preset. If you don’t like it you can always clone other preset and use it. Don’t forget to press you can always clone other preset and use it. Don’t forget to press button SAVE after some changes have been done.button SAVE after some changes have been done.

In the preset drop down choose these items one by one: backgrounds, In the preset drop down choose these items one by one: backgrounds, colors etc., make changes, and press SAVE. You can press Reset colors etc., make changes, and press SAVE. You can press Reset button in the bottom of each group of properties.button in the bottom of each group of properties.

You should also keep in mind that in cs-cart 4.0.3 the additional field You should also keep in mind that in cs-cart 4.0.3 the additional field Custom CSS is appeared in the Theme editor. You can write css Custom CSS is appeared in the Theme editor. You can write css styles directly here. These styles will be used prior to all other styles directly here. These styles will be used prior to all other styles.styles.

So, remember that you need to have at least basic css skills. These So, remember that you need to have at least basic css skills. These new css styles are written to some file. You can also edit it. This file new css styles are written to some file. You can also edit it. This file is created automatically, when you create some new preset.is created automatically, when you create some new preset.

3. Create new layout3. Create new layout

Despite the fact that you can set viewing of blocks in presets, Despite the fact that you can set viewing of blocks in presets, position and sort order of blocks you need to set in Design -> position and sort order of blocks you need to set in Design -> Layouts.Layouts.It would be better not to change Main layout also. So, in the first It would be better not to change Main layout also. So, in the first place you need to switch layout to layout of your theme in the left place you need to switch layout to layout of your theme in the left menu.menu.New layout is already created. It’s created immediately with the New layout is already created. It’s created immediately with the new theme cloning.new theme cloning.

In the layout you can make settings specially for each page of your web site.In the layout you can make settings specially for each page of your web site.The whole layout you can see in tabs:The whole layout you can see in tabs:Default – used for all pages. Most of them include header and footer blocks which Default – used for all pages. Most of them include header and footer blocks which

are the most common for each page.are the most common for each page.

Let’s see, for example, block Main banners on the Homepage. Let’s see, for example, block Main banners on the Homepage. Each block has its own settings, type, and content. Below Main Each block has its own settings, type, and content. Below Main banners you can find the button Block options and press it. banners you can find the button Block options and press it. Then change settings in the window like you want.Then change settings in the window like you want.

In the default cs-cart template, in the Main banners block, banners In the default cs-cart template, in the Main banners block, banners from menu Marketing -> Banners are used.from menu Marketing -> Banners are used.

We will not describe all blocks, because there are a plenty of they. You We will not describe all blocks, because there are a plenty of they. You can always read about each standard cs-cart block on the official cs-can always read about each standard cs-cart block on the official cs-cart site.cart site.

Each block can be dragged with a mouse to another place. But Each block can be dragged with a mouse to another place. But remember – do all changes carefully to not break the whole layout. remember – do all changes carefully to not break the whole layout. However, if something is broken, you can set Main layout again, copy However, if something is broken, you can set Main layout again, copy it and make changes in the new layout.it and make changes in the new layout.

In the window choose all settings from default layout.In the window choose all settings from default layout.

So, in the end you have your own theme: with theme’s files, So, in the end you have your own theme: with theme’s files, theme’s preset and own layout.theme’s preset and own layout.

The The source of this publication source of this publication