CS-Cart comes with several pre-built themes that you can use as a starting point for your custom theme. In this example, we will be using the “Responsive<\/span>“<\/strong> theme as our base theme.<\/p>\n\n\n\n Navigate to the “design\/themes<\/strong>” directory in your CS-Cart Instance. Create a new folder named “timer”<\/strong> for your custom theme. This folder will hold all the files for your new theme.<\/p>\n\n\n\n Additionally, copy the base theme files properly to ensure your custom theme inherits the necessary features. For example, copy files from the “Responsive”<\/strong> theme directory to the “Timer”<\/strong> directory.<\/p>\n\n\n\n In contrast, Inside the “Timer<\/strong>” directory, there will be the following subfolders:<\/p>\n\n\n\n Once you have created these folders, your folder structure should look like this:<\/p>\n\n\n\n Finally, we have our folder structure in place, let’s start adding some code.<\/p>\n\n\n\n Firstly, CSS files are used to style the look and feel of your website. After copying the base theme files and folders, navigate to the CSS folder to locate the “styles.less”<\/strong> file.<\/p>\n\n\n\n This file contains the styles for your theme, written in the LESS<\/strong> preprocessor language. You can modify it to change the colors, fonts, and layout of your site.<\/p>\n\n\n\n You can add as many Less\/CSS files as you need in this folder.<\/p>\n\n\n\n Next, image files are used to add visual elements to your website. Add all the required image files to the “media\/images”<\/strong> folder of your custom theme.<\/p>\n\n\n\n For example, if you want to add a new logo to your website, create an image file named “logo.png”<\/strong> and place it in the “media\/images”<\/strong> folder.<\/p>\n\n\n\n Next, JavaScript files are used to add interactivity and dynamic behavior to your website. Create a new file called “scripts.js”<\/strong> in the “js” folder of your custom theme.<\/p>\n\n\n\n For example, to create a button that changes the background color of your website to red, add the required JavaScript code to the “scripts.js”<\/strong> file.<\/p>\n\n\n\n You can add as many JavaScript files as you need in this folder.<\/p>\n\n\n\n Next, template files define the structure and layout of your website. The default templates are located in the “design\/themes”<\/strong> directory of your CS-Cart installation.<\/p>\n\n\n\n To create custom templates, copy the default templates to the “templates”<\/strong> folder of your custom theme.<\/p>\n\n\n\n For example, to customize the product listing template, create a new file in the “templates” folder. Name the file “design\/themes\/Timer\/templates\/blocks\/product_templates\/grid_list.tpl”<\/strong>.<\/p>\n\n\n\n Add your custom code for the product in that file to modify the product listing template as needed.<\/p>\n\n\n\n Next, The product listing template is used to display a list of products. Here’s an example of what the product listing template could look like:<\/p>\n\n\n\n Finally, We have also added a new “ To activate your new theme, go to the “Administration<\/span><\/strong>” panel of your CS-Cart installation and navigate to the “Website > Themes”<\/strong> section.<\/p>\n\n\n\n Select your new theme from the “Browse all available themes<\/span>“<\/strong>\u00a0tab\u00a0and click “Install<\/span><\/strong>“.<\/p>\n\n\n\n After installation, your theme will be presented in the “Installed theme<\/strong>” section. Now you can Activate your theme using the “Activate<\/strong>” button.<\/p>\n\n\n\n First, after creating your custom theme directory and adding all the necessary files and folders, move the directory into the “var\/theme_repository”<\/mark> folder.<\/p>\n\n\n\n This step is essential for CS-Cart to recognize and load your custom theme properly.<\/p>\n\n\n\n Next, create an “addon.xml”<\/strong> file under the “app\/addons\/timer”<\/strong> folder. The “timer”<\/strong> folder is the one you created for your custom theme.<\/p>\n\n\n\n This file contains essential information about your custom theme, such as its name, version, and description.<\/p>\n\n\n\n Then, for basic add-ons, refer to the instructions in the New Add-on<\/a> documentation provided by CS-Cart.<\/p>\n\n\n\n These instructions will guide you through the process of creating and installing your custom theme as an add-on for CS-Cart<\/strong>.<\/p>\n\n\n\n That’s it! You now have a custom theme for your CS-Cart store.<\/strong><\/p>\n<\/blockquote>\n\n\n\n <\/p>\n\n\n\n If you need custom CS-Cart Development services<\/a> then feel free to reach us<\/a> and also explore our exclusive range of CS-Cart Addons<\/a>.Create a New Cs-Cart Theme Directory<\/h2>\n\n\n\n
Copy Base Cs-Cart Theme Files<\/h2>\n\n\n\n
Folder Structure of CS-Cart theme<\/h2>\n\n\n\n
\n
![\"Steps](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/12\/structure.webp\" "\\"Theme")
Code<\/h2>\n\n\n\n
CSS Files<\/h3>\n\n\n\n
\/* Define colors *\/\n@primary-color: #007bff;\n@secondary-color: #6c757d;\n@success-color: #28a745;\n@danger-color: #dc3545;\n@warning-color: #ffc107;\n@info-color: #17a2b8;\n@light-color: #f8f9fa;\n@dark-color: #343a40;\n\n\/* Define fonts *\/\n@base-font-size: 16px;\n@base-font-family: 'Open Sans', sans-serif;\n@base-line-height: 1.5;\n\n\/* Define layout *\/\n@container-max-width: 1140px;\n@grid-gutter-width: 30px;\n\n\/* Import base theme styles *\/\n@import 'responsive\/styles.less';\n\n\/* Add custom styles *\/\nbody {\n font-family: @base-font-family;\n font-size: @base-font-size;\n line-height: @base-line-height;\n color: #ccc;\n}<\/pre>\n\n\n\nMedia Image Files<\/h3>\n\n\n\n
Javascript Files<\/h3>\n\n\n\n
document.querySelector('button').addEventListener('click', function() {\n document.body.style.backgroundColor = 'red';\n});<\/pre>\n\n\n\nTemplate Files<\/h3>\n\n\n\n
Product Listing Template<\/h3>\n\n\n\n
{* design\/themes\/timer\/templates\/blocks\/product_templates\/grid_list.tpl *}\n\n{strip}\n {foreach from=$products item="product"}\n <div class="product">\n <a href="{$product.product_url}">\n <img src="{$product.main_pair.icon}" alt="{$product.product}" class="product-image">\n <\/a>\n <h3 class="product-title">{$product.product}<\/h3>\n <p class="product-price">{$product.price|format_price}<\/p>\n {if $product.add_to_cart_link}\n <div class="product-buttons">\n <a href="{$product.add_to_cart_link}" class="btn btn-primary btn-block">{$lang.add_to_cart}<\/a>\n <\/div>\n {\/if}\n <\/div>\n {\/foreach}\n{\/strip}<\/pre>\n\n\n\nmainfest.json<\/h2>\n\n\n\n
manifest.json<\/span>\"<\/strong><\/code> file, which can be used to override the default settings for the theme.<\/p>\n\n\n\n{\n "title": "Timer",\n "description": "Enhance the look and feel of your CS-Cart store with CS-Cart Timer Theme. Simply create your own style, as the Timer theme has a complete recoloring power and you can recolor anything. Its responsive nature gives a beautiful look which looks great on any device. Timer is crafted to be simple to use so you can build your clean, modern online store quickly and easily with CS-Cart.",\n "developer": "Webkul Software",\n "parent_theme": "responsive",\n "gift_cert": "media\\\/images\\\/timer-logo.png",\n "theme": "media\\\/images\\\/cart.png",\n "favicon": "media\\\/images\\\/favicon.ico",\n "mail": "media\\\/images\\\/invoice_logo.png",\n "settings_overrides": {\n "General": {\n "enable_compare_products": true\n },\n "Appearance": {\n "enable_quick_view": true\n },\n "Thumbnails": {\n "product_lists_thumbnail_width": 330,\n "product_lists_thumbnail_height": 300,\n "product_details_thumbnail_width": 300,\n "product_details_thumbnail_height": 300,\n "product_quick_view_thumbnail_width": 220,\n "product_cart_thumbnail_width": 120,\n "product_cart_thumbnail_height": 120,\n "category_lists_thumbnail_width": 60,\n "category_details_thumbnail_width": 120\n }\n }\n}<\/pre>\n\n\n\n![\"Theme](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/12\/theme-menu-1-1200x571.webp\" "\\"Theme")
![\"Install](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/12\/browse-and-install-theme-1200x608.webp\" "\\"Cs-cart")
![\"Activate](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/12\/activate-theme-1200x611.webp\")
Another way to install a theme is:<\/strong><\/h2>\n\n\n\n
\n
!!Have a Great Day Ahead!!<\/p>\n","protected":false},"excerpt":{"rendered":"