Krayin CRM
Read Story

How to Create a custom theme in Bagisto

Creating a custom theme for Bagisto had been a hot topic lately. More and more users are actively trying our framework and we’re genuinely overwhelmed by it.

Coming on how to create a custom theme for Bagisto. It’s super easy!!!. With just a few lines of configuration code. Similarly following the traditional way of creating view files in Laravel would be enough.

Create a custom theme in Bagisto

Please follow the below steps on how to create a custom theme in Bagisto.

themes.php file inside the config directory of Bagisto’s root.

Contents of themes.php file having information of currently active theme named default.

Let’s go through the parameters of this theme’s file. Because the understanding of those parameters will help you in creating a custom theme.

An explanation for these parameters:

  1. default: Declared at the top signifies the currently active or default theme in Bagisto. It is assigned with the value ‘default’. The (string)default indicates the name of the currently active theme.

    Default parameter showing your currently active theme.

     

  2. themes: This parameter is where you’ve to define all essentials for your own custom theme. Multiple themes can also be created and used at the same time in Bagisto.
  3. Inside ‘themes’ there is another array by name ‘default‘ which is your currently active theme. Containing some key-value pairs.
    1. default‘: When you look inside this array name ‘default‘ it holds few more key-value pairs. such as ‘view_path‘, ‘assets_path‘, ‘name’ all those are explained below:

      Bagisto’s default theme parameters.

      1. views_path: It’ll take the path of your views or blade files that you wanna put up in your custom theme.
      2. assets_path: Responsible for your assets i.e images, CSS and javascript files, etc.
      3. name: Defines a global name for your theme inside Bagisto.
      4. parent: This is a magic parameter that you can find in the commented code below the sub array ‘default‘. Using this parameter you can make use of existing themes inside Bagisto and just customize them even further. This parameter will take the value of the ‘name’ parameter listed in point 3rd above.

        parent parameter allows you to use previously existing theme files.

         

4. Now we need to create a view file for our theme, the location of view file is according to the path given to views_path variable.

While creating view files, be careful about the directory structure. The directory structure of the shop package’s view file & your themes view file should be same.

5. Now we need to create an asset file for our theme & we will do it as same as we did for creating the view.

6. Now you need to select a default theme for your channel and you can do it while editing channel.

Finally, define your own paths and name of your custom theme inside ‘themes.php’ file. And start creating view files. Do not forget to cover all get routes of shop package having a parameter called ‘view’.

All storefront routes are inside this file.

Make sure the name of the blade file should be same as passed in this GET route file like this:

For all views check all GET routes as they hold a view parameter with the value of view to be used.

Note:- We use vue component in our package, if you are using our component then you have to add our js file in your theme’s master layout.

Like – <script type=”text/javascript”

src=”{{ asset(‘themes/default/assets/js/shop.js’) }}”></script>

We will consistently update this blog post, so don’t forget to keep a check on it regularly.

 

Video Tutorial:-

. . .

Comments (31)

Add Your Comment

  • ronal thapa
    Not Clear. Can you provide a demo plz.
    • saurav pathak
      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

      • ronal thapa
        Thanks For Reply, It would be enough if you could just change the homepage with different design but having all previous features and functionality.
      • Rafin Karki
        Expecting video tutorial to be released soon!!!
        • Murod Parmonov
          Did you release the video tutorial?
          • Sanjana Singh
            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
    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
      Hi Yaser,

      Greetings for the day!!!

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

  • Rafin Karki
    Do not forget to cover all get routes of shop package having a parameter called ‘view’. ===> Where to cover this?
  • Paul
    Any updates on the video for this?
    • saurav pathak
      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/

  • Bharat
    how to add categories dropdown in search in header
    • saurav pathak
      Are you referring to sub-categories as a drop-down under the main category which appears on the header?
  • Jarek Bujok
    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
      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.

  • Arooba Arooj
    Can you provide a video guide on how to create a custom theme ?
    • saurav pathak
      Very soon we will be publishing the video. You can subscribe to our Youtube channel here: https://www.youtube.com/Bagisto
  • Vitor
    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
      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.
  • Raey
    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
      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.
  • Zak
    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
      Hello Zak,

      Greetings for the day!!

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

  • Victor Paredes
    Great overview! Thanks for being clear about the file structure.
  • Joe
    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
      Hi Joe,

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

  • Yaduvendra Gurjar
    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 ..?
  • css.php