CS-Cart Responsive Theme Modern2 Installation and Setup
Things to check or do before installing your theme
Take a backup of your files and database in case something goes wrong during the installation. Please create a backup of your store with either the help of your hosting provider or simply create a backup of your files under public_html and your current database. In the event of data loss we will not and cannot take any responsibility as you are strongly advised to do so.
Make sure that your CS-Cart store is running a compatible version with this theme. Your CS-Cart script should be running version 4.3.x in order to be compatible with this theme. If you are not sure which version you are currently running on your store either contact CS-Cart or check your installation changelog yourself by visiting yourstorename.com/changelog.txt. Your store version should be indicated along the top of this document.
Your store should already have the default Responsive theme by CS-Cart. Since CS-Cart themes are based on a parent theme it is important that you have not made any core changes to the default responsive theme and that is indeed intact and not deleted it from your store. Even after you have successfully installed our theme it is important that the parent responsive theme is in place.
While the installation of the theme is relatively easy to perform you are required of having some basic understanding of how CS-Cart works. You need to be familiar with adding categories and products, preparing product or banner images, creating menus as well as understanding content blocks and locations. If not, we strongly suggest that you frequently visit the CS-Cart Knowledge Base in order to familiarize yourself with all the great features of CS-Cart. Regarding understanding server FTP you will be required to upload some files on your server. The ideal method of uploading these files is through a FTP software like FileZilla.
- Login to your CS-Cart admin panel area. If you haven't already renamed your login page from "admin.php" to another filename, please do so by following the instructions on this link. (optional)
- Navigate to Add-ons then Manage add-ons and make sure that the My Changes add-on is installed and activated.
- Navigate to Design then Themes, then click the upload theme icon indicated by the plus sign icon found on the top right side of the page. On the pop-up dialog that will appear, click the Local search option and find the modern2.zip theme archive on your computer (at the location that you have saved it when you downloaded the theme). Finally click the Upload button in order to start the uploading process.
- You will be returned to the Themes page, and under the current theme section there is a tab with the available themes titled Browse All Available Themes. Navigate to this tab and you should find the Modern2 theme screenshot. Hover over the screenshot and click the Install button.
- You will be again returned to the Themes page only this time you will be able to see the Modern2 theme in the list of available themes. Hover over the theme screenshot again and this time click Activate.
- Once the page loads the Mordern2 theme should be set as the current theme. At this point you can go ahead and click at the view storefront button (indicated with a cart icon) at the top left side of the page or simply visit your store url to see if the new theme has been applied. Right at this point you are not supposed to have the theme looking as in the demo. Please keep on reading in order to complete the installation and then you will be followed with the theme setup steps in order to make it look as close as possible with the demo.
- Apart from the theme zip archive which you already uploaded on step 3 there are some more files that need to be uploaded to your server. Using a FTP software upload the extracted contents of root_files.zip in the public_html (root folder) of your CS-Cart installation. The actual contents of root_files.zip are two folders (images and js). These two folders should be uploaded in the public_html folder (which also contains two folders of the same file-name among the rest of its contents).
- Along with the theme files you have also received a .csv file named modern2.csv. This file contains extra language files that we have introduced in this theme in order to name new elements such as tool-tip descriptions or theme editor preset titles. While your theme is fully functional without them you should import these language files in order for text to appear correctly. While you are in the admin panel navigate to Administration then Import Data, then Translations. Navigate to the Language Variables tab and click on the Local button in order to locate and upload the modern2.csv file. The CSV Delimeter option should be left to its default state of Semicolon. Once you load the file click on the Import button and you should have the new language variable objects loaded. Please note that these language variables are in English and if you wish to translate them into your own language you will have to do it yourself using the respective article from CS-Cart's Documentation.
Congratulations! At this point you are ready to move on with the instructions on how to setup your newly installed theme.
How to setup your theme
Create a new style clone
You are strongly advised to create a new style for your theme. The default style of the theme is best to be kept intact so that you can always revert back to it if you are not happy with the results of your customization or if you happen to accidentally loose parts of the style code. While you are logged in at the admin panel navigate to Design then Themes. At the current theme section click on the Visual Editor blue button for the main layout. A new browser tab will open and the editor options will be on your left. Under Styles click on the drop down menu that by default contains the Custom theme and while hovering over the option click on the Clone Theme icon. Give a name to the new style (i.e. Custom2) and save it. You are now switched to your cloned Custom2 style. No matter what changes you make in the editor under this style, the original theme style will be kept safe and intact.
Most obviously the default logo for this theme is the demo logo. In order to replace it with your own. While you are logged in at the admin panel navigate to Design then Themes. At the current theme section click on the Visual Editor blue button for the main layout. A new browser tab will open and the editor options will be on your left. Under Customize select on the drop down the Logos option. Replace the demo logo with your own for Theme, Mail and Gift Certificates. For your information our demo logo is 217px in width and 58px in height. Keep in mind that extremely large logos might brake the design or simply make it look uneven so make sure to use dimension that make sense. Your favicon should be 16x16 pixels in dimension and you can change it under the General set of options in a similar manner.
In the admin panel navigate to Marketing and then Banners. Our demo comes with 2 homepage sliding banners of size 1920px width and 675px height. To create the first graphic banner click the plus icon to add a new banner. Give it a name (i.e. Slide-1) and on the Type section make sure that Graphic banner is selected. You can either load your own image if you click Local and search for one on your computer (our suggested dimensions are 1920x675 pixels) or since during the installation you already loaded our demo images you can go ahead and use our demo one if you click on Server and find Slide-1.jpg in the public files section. You can always fill in at any time the remaining options of having it link to a URL in your store and whether you want it to open in a new browser tab or not. Once you are finished with all the settings click Save and close to move on to the next sliding banner(s).
The remaining banner positions of our demo homepage have 4 more graphic banners. Three banners under the homepage slideshow and one horizontal below the On Sale product scroller block. All of these demo banner images are inside the public files location on the server. Simply create them using the Graphics banner process described above and you should now have all demo banners created...but not in place.
Now that you have you banners ready you should indicate where they should show. In the admin panel navigate to Design and then Layouts. Click on the Homepage tab/location. Scroll until you find the Main banners block and click on the gear icon to enter into its settings. Click on the Content tab and while Filling is set to Manually click on the Add Banners button and select Slide 1 and Slide 2 which should be the banners you created previously. Click on the Add banners and close button and you are done. Hit Save and then refresh your homepage to confirm that your homepage sliding banners are in place. In the same manner keep going with populating the Banner 1, Banner 2, Banner 3 and Horizontal banner blocks of the homepage until you are done.
Each themes has it's own thumbnail size variables that you now should customize in the following way. In the admin panel navigate to Settings and then Thumbnails. You don't need to change all the values but just the following:
Products list (category, search, etc) thumbnail width: 150
Products list (category, search, etc) thumbnail height: 150
Product details page thumbnail width: 400
Product details page thumbnail height: 400
Categories list thumbnail width: 280
Categories list thumbnail height: 280
Having these values on your thumbnails will give you a look exactly as in the demo.
On your admin panel navigate to Settings and then Appearance. A bit further down you will find the Product detailed page view with a drop down menu set to Default Template. Change that to the Modern2 Template.
Further down you will find the Products List Layouts Settings. In the available product list views you will have a total of 6 settings. Unselect the default 3 and select the 3 Modern2 ones. Right below in the Product list default view select the List without options Modern2 preset and then click Save on the top right side to apply the changes.
Navigate to Settings and then General. Scroll down until you find the Catalog section and unselect the option.
Setting up your categories layout
The Modern2 theme makes full use of some of the core features of CS-Cart which help you manipulate your blocks and assign them to specific categories with specific content. By default when clicking on either a root category or subcategory in CS-Cart you are landing on a page that shows all the products from subcategories of the selected categories with breadcrumbs, sorting options and filters and pretty much any category page looks the same.
What the Modern2 theme tries to achieve is give you the freedom of customizing each category the way you want it to be, allowing you to add custom promotional banners, have a beautiful grid of your subcategories with images and promote specific products for a specific category. This helps you showcase your category bestsellers, promote specific products by making them stand out and plan a better marketing strategy within your store.
Have a look at a comparison of the two layouts below. On the left side you get a complicated and busy layout with lots of detail, filters that won't really help you sort the products displayed since these filters come from several different to each other categories. The subcategory navigation cannot stand out, you get 11 pages of products which you are not likely to go through and you will probably end up using the top menu again in order to jump to a more specific category.
On the right side with the customized layout you get a beautiful banner position to promote your killer product or newest product in the category, a grid of subcategory images that stand out and help your customer decide where they wanna go next and a product scroller which can host your bestsellers, your latest arrivals or any other specific products you want to stand out for the selected category. Which one do you prefer?
Category image thumbnails
In order to achieve our demo look and help your customers have a better image of your subcategories you will have to navigate from within your admin panel to your categories and add images to them. Navigate to Products then Categories and by going through each category add a thumbnail sqaure image (same width and height) to them. Ideally you are going for a 280x280 pixels dimension.
Breadcrumbs sorting and filters
Not all your categories need to have breadcrumbs, sorting options and filters. Since you are only listing products to their selected categories you will have to enable these options for these specific categories alone. In order to do that nagivate from your admin panel to Design and then Layouts. Click on the Categories tab and there you will find three blocks, named Breadcrumbs, Sorting and Filters. By default they are disabled. Do not enable them but rather click on their cog icon and on the Status tab select the categories that you want these options to appear. Normally these categories would be the ones that have listed products in them. Do this for all three blocks and you will have these options only where they are needed.
Quick jump to block
In the categories layout we have created a block named Quick jump to. This block acts like a mini menu that your customers can use when they want to jump to another category that is related to the one that they are currently at. To give you an example say you have desktop computers. Most reasonably your customers may want to shop for a monitor or for peripherals that dont come with a desktop computer like a mouse or a keyboard. What you can do is navigate to your desktop category and assign these extra categories (monitors, peripherals etc) to the desktop category only. To do that, go to your desired cateogry from your admin panel by going to Products and then Categories. Select and edit the category. On the Layouts tab locate the Quick jump to block. Activate it and then click on the cog icon. On the content tab this time select the categories that you want your customers to be able to jump to from the category they are now. This will enable a mini menu on the selected category with the categories you selected.
Different banner to each category
Just the same way like you activated the quick jump to block for a specific category and with specific content, you can do the same with banners for categories. On our demo page almost all of subcategories under Electronics have a custom banner assigned to them. First you will have to create your banners. Go into Marketing then Banners and create every graphic banner you want to showcase for the categories you pick. After you have done this, navigate to Products then Categories and on the Layouts tab find the Categories banner block which should be disabled by default. Enable it and then click on the cog icon to select your specific banner for the category in the content tab.
Popular in this category block
In the same manner as the quick jump to and categories banner block the Popular in this category block allows you to showcase products to a specific category. Activate the block, select the products and you are done.
With these setup instructions your theme should now look really close to the demo layout. There might be some slight differences since you may have different products in your blocks or you may notice that your blog post items are not as many as in the demo, or even you don't have any reviews and the testimonials/reviews block is not showing up. All you need to do is just add the relevant content and these will appear.
In general we strongly suggest that you don't alter your theme's block locations or custom css classes. Doing so for some of them may result in unwanted results and then you will have to revert back to your backup default style.
As a final notice, it is recommended that you open a support ticket with us in case you are not sure of your editing results. We'll be happy to help.