How to create the custom theme in CS-Cart?

Creating a custom theme in CS-Cart is a great way to give your store a unique and professional look.

In this blog post, we will walk you through CS-Cart customization, and the steps to create a custom theme in CS-Cart, including the folder structure and code.

Choose a Base CS-Cart Theme

Firstly, The first step in creating a custom theme in CS-Cart is to choose a base theme for CS-Cart customization.

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“ theme as our base theme.

Create a New Cs-Cart Theme Directory

In addition, The next step is to create a new directory for your custom CS-Cart theme. To do this, navigate to the "design/themes" directory in your CS-Cart installation and create a new directory with the name of your custom theme. Let’s call this folder “timer“.

Copy Base Cs-Cart Theme Files

Additionally, it is important to ensure that you copy the base theme files correctly so that your custom theme will inherit all the necessary functionality and features. In our example, we will be copying the files from the “Responsive” theme directory to our “Timer” directory.

Folder Structure of CS-Cart theme

In contrast, Inside the “Timer” directory, there will be the following subfolders:

• “css“: This folder will contain all the CSS files for your theme.
• “layouts“: This folder will get the layout from blocks.
• “media“: This folder will contain all the image files for your theme.
• “js“: This folder will contain all the JavaScript files for your theme.
• “templates“: This folder will contain all the template files for your theme.
• config.local.php: This file will contain the setting of our theme.

Once you have created these folders, your folder structure should look like this:

Code

Finally, we have our folder structure in place, let’s start adding some code.

CSS Files

Firstly, CSS files are used to style the look and feel of your website. After copying base theme files and folders, In css folder, there will be “styles.less” file. This file contains the styles for your theme, written in the LESS preprocessor language. You can modify this file to change the colors, fonts, and layout of your site.

/* Define colors */
@primary-color: #007bff;
@secondary-color: #6c757d;
@success-color: #28a745;
@danger-color: #dc3545;
@warning-color: #ffc107;
@info-color: #17a2b8;
@light-color: #f8f9fa;
@dark-color: #343a40;

/* Define fonts */
@base-font-size: 16px;
@base-font-family: 'Open Sans', sans-serif;
@base-line-height: 1.5;

/* Define layout */
@container-max-width: 1140px;
@grid-gutter-width: 30px;

/* Import base theme styles */
@import 'responsive/styles.less';

/* Add custom styles */
body {
  font-family: @base-font-family;
  font-size: @base-font-size;
  line-height: @base-line-height;
  color: #ccc;
}

You can add as many CSS files as you need in this folder.

Media Image Files

Next, Image files are used to add visual elements to your website. Add all the image files you need in the “media/images” folder of your custom theme. For example, if you want to add a new logo to your website, you can create a new image file called “logo.png” and add it to the “media/images” folder.

Javascript Files

Next, JavaScript files are used to add interactivity and dynamic behavior to your website. Create a new file called “scripts.js” in the “js” folder of your custom theme and add your custom JavaScript code. For example, let’s say we want to create a button that changes the background color of our website to red. We can do this by adding the following code to our “scripts.js” file.

document.querySelector('button').addEventListener('click', function() {
  document.body.style.backgroundColor = 'red';
});

You can add as many JavaScript files as you need in this folder.

Template Files

Next, Template files are used to define the structure and layout of your website. You can find the default templates in the “design/themes” directory of your CS-Cart installation. To create custom templates, copy the default templates to the “templates” folder of your custom theme and make your changes. For example, let’s say we want to customize the product listing template. We can create a new file called “design/themes/Timer/templates/blocks/product_templates/grid_list.tpl” in the “templates” folder of our custom theme and add our custom code.

Product Listing Template

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:

{* design/themes/timer/templates/blocks/product_templates/grid_list.tpl *}

{strip}
   {foreach from=$products item="product"}
      <div class="product">
         <a href="{$product.product_url}">
            <img src="{$product.main_pair.icon}" alt="{$product.product}" class="product-image">
         </a>
         <h3 class="product-title">{$product.product}</h3>
         <p class="product-price">{$product.price|format_price}</p>
         {if $product.add_to_cart_link}
         <div class="product-buttons">
            <a href="{$product.add_to_cart_link}" class="btn btn-primary btn-block">{$lang.add_to_cart}</a>
         </div>
         {/if}
      </div>
   {/foreach}
{/strip}

Config.local.php

Finally, We have also added a new “config.local.php" file, which can be used to override the default settings for the theme.

<?php

return array(
    'appearance' => array(
        'themes' => array(
            'timer' => array(
                'type' => 'theme',
                'name' => 'Timer',
                'version' => '1.0.0',
                'vendor' => 'Webkul',      
                'demo'   => 'https://store.webkul.com/CS-cart-Responsive-Theme-Timer.html',
                'author' => 'Webkul',
                'icon' => 'design/themes/timer/media/images/logo.png',
                'description' => 'Timer theme for CS-Cart',
                'priority' => 1,
            ),
        ),
    ),
);

To activate your new theme, go to the “Administration” panel of your CS-Cart installation and navigate to the “Design > Themes” section.

Select your new theme from the list of available themes and click “Save“.

Another way to install a theme is:

First, after you have created your custom theme directory and added all the necessary files and folders, you need to move the directory into the "var/theme_respository" folder. This will allow CS-Cart to recognize your custom theme.

Next, you need to create an “addon.xml” file under the “app/addons/timer” folder. The “timer” folder is the folder you created for your custom theme. This file contains important information about your custom themes, such as their name, version, and description.

Then, for basic add-ons, you can follow the instructions outlined in the New add-on documentation provided by CS-Cart. These instructions will guide you through the process of creating and installing your custom theme as an add-on for CS-Cart.

That’s it! You now have a custom theme for your CS-Cart store.

If you need custom CS-Cart Development services then feel free to reach us and also explore our exclusive range of CS-Cart Addons.

!!Have a Great Day Ahead!!