CS-Cart Ultima Responsive Theme Installation & 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 ultima.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 Ultima 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 Ultima theme in the list of available themes. Hover over the theme screenshot again and this time click Activate.
- Once the page loads the Ultima 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 ultima.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 ultima.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 Ultima 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 Ultima theme and while hovering over the option click on the Clone Theme icon. Give a name to the new style (i.e. Ultima2) and save it. You are now switched to your cloned Ultima2 style. No matter what changes you make in the editor under this style, the original Ultima 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 250px in width and 50px 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.
While you may already have had a homepage menu with your previous theme which was automatically generated using the list of your categories in this theme you will need to create it yourself in order to make use of the multi-color menu classes. In the admin panel navigate to Design and then Menus. Click on the Add menu plus icon on the right. Give it a name like "homepage menu" and click Create. Your menu is active but not yet visible or has any content. Hover over the newly created menu line and click on the gear icon that will appear, giving you a list of options. Select Manage Items to start populating the menu. On the page that follows click again the plus icon to add a new menu item. If you are going to have all your root categories (as in our demo) in the menu, fill in the Name of the category that you want to have first and then on the Generate submenu section select the root category that should correspond to it. Make sure that the Use the "Link text" and "URL" values from this item in the storefront option is checked. On the User-defined CSS-class section you get to decide what color you want to use by typing in the name of one of the following colors: gray, green, blue, orange, purple. Click Create and your menu as well as your menu category should be already visible in the storefront. By repeating the same step of creating menu items you can go ahead and populate your menu with the rest of the categories or links you want to include. Remember to use the color classes in any sequence you wish to make each menu item stand out. Now that you have your menu in place lets move on to banners.
In the admin panel navigate to Marketing and then Banners. Our demo comes with 2 homepage sliding banners (1 graphic banner of a single image and 1 text banner with 4 images in a multi-panel group). 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 1920x700 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 our next banner.
In case you want your next banner to be as our multi-panel text banner in our demo store go ahead and add a new banner only this time make it a text banner on the Type section. Give it a name (i.e. Slide 2). This time you will see that there is no option to load an image but rather type in HTML text. Don't be scared, just look for our text-banner.txt file in the theme files that you have received. It should be in the Resources/Banners/Text banners sub-folder. Open the file and copy all the HTML code. Back to the admin panel and on your text banner page, in the Description section you will see an icon that switches the rich text view to source code view or HTML view. It should look like this <>. Click on it and when you switch to the HTML view (you might recognize it by turning dark in background) paste the HTML code. This code contains the correct paths to all our demo images used in our demo text banner. If you want to replace these images with your own you can refer to the text-banner-help.pdf document for more information.
The remaining banner positions of our demo have 3 more graphic banners. A horizontal one above the Products On Sale block and two more (Left Banner and Right Banner), side-by-side below the Products On Sale 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 Horizontal, Left and Right banner blocks of the homepage until you are done.
As you may have noticed our demo presents some selected categories with images right under the Main banners. In order to use your own selection of categories to showcase in that position you will need to first upload some images on the categories or subcategories that you are planning to showcase. In the admin panel navigate to Products and then Categories and click on the first category that you want to showcase. Click on the desired category and in the Information group and Images section click on Local to find an image to upload. Make sure that the image is square (same width and height values). Our demo dimensions are 280x280 pixels so we suggest you go with this size. Once you are done hit Save and close and do the same for the rest of the categories or subcategories of your choice. Our demo has a total of 8 categories in that block in two rows but you can have as many as you like as long as they are 4 per row. Now that you are done adding images to your categories navigate to Design and then Layouts. Go to the Homepage tab/location and scroll until you find the Categories with images block. Click on the gear settings icon and on the Content tab while Filling is set to Manually select the categories you prepared by clicking the Add categories button. Add 4 or 8 categories (according to your preference) and once you save all actions refresh your store homepage and you will be able to see your Categories with images showcase under the homepage main sliding banners. If you have never changes your Thumbnail sizes then it is likely that you are not seeing the result you were expecting to see. So let's head to our next section which will fix that.
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: 280
Products list (category, search, etc) thumbnail height: 280
Product details page thumbnail width: 500
Product details page thumbnail height: 500
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. By default the number of columns for the product list is 3 and we want it changed to 4. Scroll until you find Number of columns in the product list and change the value to 4. 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 Ultima Template and then click Save on the top right side to apply the changes.
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 Ultima 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.