How to create the custom theme in CS-Cart?

Creating a custom theme in CS-Cart can help you design a store that matches your unique branding. This guide will show you how to create a custom theme in CS-Cart with detailed steps

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

Navigate to the “design/themes” directory in your CS-Cart Instance. Create a new folder named “timer” for your custom theme. This folder will hold all the files for your new theme.

Copy Base Cs-Cart Theme Files

Additionally, copy the base theme files properly to ensure your custom theme inherits the necessary features. For example, copy files from the “Responsive” theme directory to the “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.
• manifest.json: 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 the base theme files and folders, navigate to the CSS folder to locate the “styles.less” file.

This file contains the styles for your theme, written in the LESS preprocessor language. You can modify it 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 Less/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 required image files to the “media/images” folder of your custom theme.

For example, if you want to add a new logo to your website, create an image file named “logo.png” and place it in 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.

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” 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 define the structure and layout of your website. The default templates are located 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.

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”.

Add your custom code for the product in that file to modify the product listing template as needed.

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}

mainfest.json

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

{
    "title": "Timer",
    "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.",
    "developer": "Webkul Software",
    "parent_theme": "responsive",
    "gift_cert": "media\/images\/timer-logo.png",
    "theme": "media\/images\/cart.png",
    "favicon": "media\/images\/favicon.ico",
    "mail": "media\/images\/invoice_logo.png",
    "settings_overrides": {
        "General": {
            "enable_compare_products": true
        },
        "Appearance": {
            "enable_quick_view": true
        },
        "Thumbnails": {
            "product_lists_thumbnail_width": 330,
            "product_lists_thumbnail_height": 300,
            "product_details_thumbnail_width": 300,
            "product_details_thumbnail_height": 300,
            "product_quick_view_thumbnail_width": 220,
            "product_cart_thumbnail_width": 120,
            "product_cart_thumbnail_height": 120,
            "category_lists_thumbnail_width": 60,
            "category_details_thumbnail_width": 120
        }
    }
}

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

Select your new theme from the “Browse all available themes“ tab and click “Install“.

After installation, your theme will be presented in the “Installed theme” section. Now you can Activate your theme using the “Activate” button.

Another way to install a theme is:

First, after creating your custom theme directory and adding all the necessary files and folders, move the directory into the “var/theme_repository” folder.

This step is essential for CS-Cart to recognize and load your custom theme properly.

Next, create an “addon.xml” file under the “app/addons/timer” folder. The “timer” folder is the one you created for your custom theme.

This file contains essential information about your custom theme, such as its name, version, and description.

Then, for basic add-ons, refer to the instructions 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!!