Introduction:-

Welcome to our new blog for how to create a custom theme in Bagisto 2.0.

Our improved theme design enhances the look and feel of the store’s interface. By giving users complete control over themes, we enable seamless customization. This feature allows users to add images, text, and links to any section of their store with ease.

In the below screenshot, this is our default storefront and we are going to change its Content , Carousel, and CSS in our custom theme design.

So firstly, you need to create a package for your new theme, as you want to display your front end. You just clone the Shop package and modify the changes requested for your new one As we have created by the name of Store now change the namespaces according to this package because it was quite important and make the necessary steps to register your module in the composer.json, config/concord.php, and config/app.php file which is been presented in the root directory of Bagisto. now run the below command to register the package.

Now you also need to do the vite setup inside your new package in the vite.config.js file as shown below

import { defineConfig, loadEnv } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig(({ mode }) => {
    const envDir = "../../../";

    Object.assign(process.env, loadEnv(mode, envDir));

    return {
        build: {
            emptyOutDir: true,
        },

        envDir,

        server: {
            host: process.env.VITE_HOST || "localhost",
            port: process.env.VITE_PORT || 5173,
        },


 plugins: [
            laravel({
                hotFile: "../../../public/store-theme1-vite.hot",
                publicDirectory: "../../../public",
                buildDirectory: "themes/shop/theme1/build",
                input: [
                    "src/Resources/assets/css/app.css",
                    "src/Resources/assets/js/app.js",
                ],
                refresh: true,
            }),
        ],
        
        experimental: {
            renderBuiltUrl(filename, { hostId, hostType, type }) {
                if (hostType === "css") {
                    return path.basename(filename);
                }
            },
        },
    };
});

import { defineConfig, loadEnv } from "vite";

import laravel from "laravel-vite-plugin";

import path from "path";

export default defineConfig(({ mode }) => {

const envDir = "../../../";

Object.assign(process.env, loadEnv(mode, envDir));

return {

build: {

emptyOutDir: true,

envDir,

server: {

host: process.env.VITE_HOST || "localhost",

port: process.env.VITE_PORT || 5173,

plugins: [

laravel({

hotFile: "../../../public/store-theme1-vite.hot",

publicDirectory: "../../../public",

buildDirectory: "themes/shop/theme1/build",

input: [

"src/Resources/assets/css/app.css",

"src/Resources/assets/js/app.js",

refresh: true,

}),

experimental: {

renderBuiltUrl(filename, { hostId, hostType, type }) {

if (hostType === "css") {

return path.basename(filename);

}

};

});

To configure the store theme in Bagisto, follow these steps:

Go to your project’s root directory and locate the Config folder. Inside the Config folder, you will find a file named themes.php

 
 -config/themes.php

1 2	-config/themes.php

Open the themes.php file to examine its contents. This file contains all the necessary information for creating a custom theme in Bagisto.

Add a new theme entry to the themes array in the themes.php file as shown in the below file.

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Shop Theme Configuration
    |--------------------------------------------------------------------------
    |
    | All the configurations are related to the shop themes.
    |
    */

    'default' => 'default',

    'themes' => [
        'default' => [
            'name'        => 'Default',
            'assets_path' => 'public/themes/shop/default',
            'views_path'  => 'resources/themes/default/views',

            'vite'        => [
                'hot_file'                 => 'shop-default-vite.hot',
                'build_directory'          => 'themes/shop/default/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],

        'theme1' => [
            'name'        => 'theme1',
            'assets_path' => 'public/themes/shop/store',
            'views_path'  => 'resources/themes/theme1/views',

            'vite'        => [
                'hot_file'                 => 'store-theme1-vite.hot',
                'build_directory'          => 'themes/shop/store/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
    ],

    /*
    |--------------------------------------------------------------------------
    | Admin Theme Configuration
    |--------------------------------------------------------------------------
    |
    | All the configurations are related to the admin themes.
    |
    */

    'admin-default' => 'default',

    'admin-themes' => [
        'default' => [
            'name'        => 'Default',
            'assets_path' => 'public/themes/admin/default',
            'views_path'  => 'resources/admin-themes/default/views',

            'vite'        => [
                'hot_file'                 => 'admin-default-vite.hot',
                'build_directory'          => 'themes/admin/default/build',
                'package_assets_directory' => 'src/Resources/assets',
            ],
        ],
    ],
];

<?php

return [

|--------------------------------------------------------------------------

| Shop Theme Configuration

|--------------------------------------------------------------------------

| All the configurations are related to the shop themes.

'default' => 'default',

'themes' => [

'default' => [

'name' => 'Default',

'assets_path' => 'public/themes/shop/default',

'views_path' => 'resources/themes/default/views',

'vite' => [

'hot_file' => 'shop-default-vite.hot',

'build_directory' => 'themes/shop/default/build',

'package_assets_directory' => 'src/Resources/assets',

'theme1' => [

'name' => 'theme1',

'assets_path' => 'public/themes/shop/store',

'views_path' => 'resources/themes/theme1/views',

'vite' => [

'hot_file' => 'store-theme1-vite.hot',

'build_directory' => 'themes/shop/store/build',

'package_assets_directory' => 'src/Resources/assets',

|--------------------------------------------------------------------------

| Admin Theme Configuration

|--------------------------------------------------------------------------

| All the configurations are related to the admin themes.

'admin-default' => 'default',

'admin-themes' => [

'default' => [

'name' => 'Default',

'assets_path' => 'public/themes/admin/default',

'views_path' => 'resources/admin-themes/default/views',

'vite' => [

'hot_file' => 'admin-default-vite.hot',

'build_directory' => 'themes/admin/default/build',

'package_assets_directory' => 'src/Resources/assets',

];

So now install the Node modules inside our new package as we have created by the name of Store. To install the node modules hit the below command inside a Store package

npm install
npm run dev
npm run build

npm install

npm run dev

npm run build

So after hitting these commands node modules get installed and the build is also been created as shown in the below screenshot.

So Now you just need to override the view files inside your new package.So copy the file from your old package and paste it into the new package, following the same path structure. Like this

package -> src -> Store -> Providers->StoreServiceProvider.php

1	package -> src -> Store -> Providers->StoreServiceProvider.php

        $this->publishes([
            __DIR__ . '/../Resources/views' => resource_path('themes/theme1/views'),
    
        ]);

$this->publishes([

__DIR__ . '/../Resources/views' => resource_path('themes/theme1/views'),

]);

Now load the views from the package and apply the below code in the boot method inside the service provider.

     $this->loadViewsFrom(__DIR__ . '/../Resources/views', 'store');

1	$this->loadViewsFrom(__DIR__ . '/../Resources/views', 'store');

So once the provider entry is successfully added, please publish your override files inside the core files with the help of the command

php artisan vendor:publish --force

1	php artisan vendor:publish --force

Now you have the option to select the themes from the admin end inside the channel section. Just change the theme.

After changing the theme from the channel section, you can add your theme content (e.g., product carousel, static content, slider carousel, category carousel, footer links, service container) to your theme.

So After completing all the steps, we have successfully updated our new theme on the front of our website. And we have updated some of the changes in our blade file and changed the CSS, Carousel, and Content and it will look something like this.

By following these steps, you can create a customized theme in Bagisto 2.0, which will enhance the visual appeal of your e-commerce store.

So I hope this documentation will help you create or customize themes in Bagisto 2.0.

Thanks for reading this blog. Please comment below if you have any questions. Also, you can Hire Laravel Developers for your custom Laravel projects. Please explore our extensions.

Custom Theme in Bagisto Laravel eCommerce

Shaiv Roy

12 Jan, 2024
Updated by - Rishabh Yogi
11 Mar, 2024
Updated by - Rishabh Yogi

. . .

37 comments

ronal thapa 5 years ago

Not Clear. Can you provide a demo plz.

saurav pathak (Moderator) 5 years ago
Hi Ronal,

Greetings for the day!!! Of course, we can provide you with the demo. We will soon release a video tutorial too for that. If you have any further query regarding implementing theme, you can always raise a ticket at bagisto.uvdesk.com

Reply
- ronal thapa 5 years ago
  Thanks For Reply, It would be enough if you could just change the homepage with different design but having all previous features and functionality.
  
  Reply
- Rafin Karki 5 years ago
  Expecting video tutorial to be released soon!!!
  
  Reply
  - Murod Parmonov 4 years ago
    Did you release the video tutorial?
    
    Reply
    - Sanjana Singh (Moderator) 3 years ago
      Hello Murod,
      
      Greetings for the day!!
      
      Yes, we release video for the same please check the below link.
      
      https://youtu.be/Jx6K-GQ0E4k

Yaser AlAzm 5 years ago

Thank you,
Making a full video about how to customize the themes and add the files in the right directories would be very helpful.

saurav pathak (Moderator) 5 years ago
Hi Yaser,

Greetings for the day!!!

Thank you for your suggestion. We will do come up with video regarding customizing theme in bagisto soon.

Reply

Rafin Karki 5 years ago

Do not forget to cover all get routes of shop package having a parameter called ‘view’. ===> Where to cover this?

saurav pathak (Moderator) 5 years ago
Hi Rafin,

Greetings for the day!!!

Could you please clarify more on your query? However just for information purpose on “views”, the view is used as a variable to return view from the respected controller as in here: https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Shop/src/Http/routes.php

Reply

Paul 5 years ago

Any updates on the video for this?

saurav pathak (Moderator) 3 years ago
Hi Paul,

Are you getting any issues here? If yes, you can put the query on our forum so the dev can see to it and assist you: https://forums.bagisto.com/

Reply

Bharat 5 years ago

how to add categories dropdown in search in header

saurav pathak (Moderator) 5 years ago
Are you referring to sub-categories as a drop-down under the main category which appears on the header?

Reply

Jarek Bujok 5 years ago

Point 4. The path to views_path variable does not exist ! Look https://github.com/bagisto/bagisto/tree/master/resources
I am new Bagisto user. I wish you good luck and perseverance. I will probably have many more questions.

saurav pathak (Moderator) 5 years ago
Hi Jarek,

Thanks for your feedback and on your issue, we will check on this. I will request you to check this once too for creating a theme: https://devdocs.bagisto.com/1.x/themes/ Please let us know if you have any further query.

Reply

Arooba Arooj 5 years ago

Can you provide a video guide on how to create a custom theme ?

saurav pathak (Moderator) 4 years ago
Very soon we will be publishing the video. You can subscribe to our Youtube channel here: https://www.youtube.com/Bagisto

Reply

Vitor 4 years ago

It was not very clear, I can not find the themes folder within resources according to the path of the views_path variable

saurav pathak (Moderator) 4 years ago
You have to create folder by your own according to the path defined in view_path variable, according to the blog you have to create a new folder called theme under resources folder.

Reply

Raey 4 years ago

I have done it step by step as in this article, but I still can’t create a new theme. can this post be more detailed?

saurav pathak (Moderator) 4 years ago
Could you let us know if you got any error or somewhere in any step you have any doubt? We are working on the video part and will try to make the theme blog more detailed.

Reply

Flavio Ferreira 3 years ago

How can I create custom product detail pages and custom category pages (defined by a configuration at bagisto)

Something like use a custom config to display the “page” chosen by the store owner:
Jewellery will be displayed in the common page
Bikinis will have a different page with videos (Category and product page)

Prachi Chauhan (Moderator) 2 years ago
Hello There,

Please post your query here https://forums.bagisto.com/ our developer will guide you on the same.

Regards

Reply

Zak 3 years ago

Hello is this applying to 1.2 version? I followed step by step, the theme is successfully created frontpage is showing but there s an issue in product page, nothing is shown, the page has only header and footer. Whenever i can the theme everything goes back to normal

Sanjana Singh (Moderator) 3 years ago
Hello Zak,

Greetings for the day!!

Can you share the screenshot of the issue? So we can check and rectify it.

Reply

Victor Paredes 3 years ago

Great overview! Thanks for being clear about the file structure.

Joe 3 years ago

Hello! Thank for the great theme. I seem to have an issue; I followed the steps but my theme doesn’t show up in the dropdown where I should choose the theme; it only shows ‘default’ and ‘velocity’. I am on a local host with MAMP and I even restarted with ‘php artisan serve’.

saurav pathak (Moderator) 3 years ago
Hi Joe,

Please once put the query on our forum so the dev can see to it and assist you: https://forums.bagisto.com/

Reply

Yaduvendra Gurjar 3 years ago

I Want to make changes in Customer profile. How can change Text Profile to My Account in side menu Main Content And how to remove downloadable products section in side menu and also from every where ..?

Yaduvendra Gurjar 3 years ago
https://www.screencast.com/t/o7pwvUnalG79 here’s a link of image to explain my issue.

Reply
- saurav pathak (Moderator) 3 years ago
  Hi Yaduvendra,
  
  Kindly post this query once on our forum so our dev can look into it: https://forums.bagisto.com/
  
  Reply
saurav pathak (Moderator) 3 years ago
Hi Yaduvendra,

Please once put the query on our forum so the dev can see to it and assist you: https://forums.bagisto.com/

Reply

Progress Moyo 2 years ago

Hi i think you guys forgot to mention one more step to get the theme visible in the channels edit.
I ran the following commands and my custom theme became visible in the themes dropdown:
php artisan cache:clear
php artisan config:clear

andy globe 1 year ago

Thank you for sharing the awesome article with us. that’s very useful. Provides much-needed knowledge.

Hossein 2 months ago

Hi, Could you please share your new “Store” theme package source code on github to check our steps and changes with your verified source code and make sure everything is ok. It reduces the people questions.
Thanks.

Rishabh Yogi (Moderator) 2 months ago
Hello Hossein

Greetings of the day..!!
Now you can check the Repository and clone the Store package from the given link.
GitHub Repository – https://github.com/bagisto/custom-theme

Thanks & Regards..!!

Reply

How to create a custom theme in Bagisto

Introduction:-

To configure the store theme in Bagisto, follow these steps:

Leave a Comment Cancel Reply

37 comments

How to create a custom theme in Bagisto

Introduction:-

To configure the store theme in Bagisto, follow these steps:

Leave a Comment Cancel Reply

37 comments

Message Sent!