Change existing CSS and JS files for the storefront in Bagisto

Massive surge in popularity of Bagisto these days, thanks for your love. Here we are going to discuss how you can change existing CSS and JS files for the storefront in bagisto.

Storefront design of Bagisto is a very sensitive issue when it comes to people who are very strict on design wide through form factors of devices and accessibility. Many would think to change the theme of Bagisto’s storefront is time taking thing in situations when storefront design is not too much emphasis to be given.

Change existing CSS and JS files for the storefront in Bagisto

There are loads of ways to change the storefront of Bagisto. Below is the list of ways to do that:

1. Change the existing storefront CSS files of Bagisto.
2. Change the existing theme of Bagisto.
3. Make your own shop package views.

We are going to narrow down the scope of this article to point one above. Just change the CSS for the storefront of Bagisto. In order to perform you would need to pen down the steps below:

1. Make a package below with a single service provider that will only publish your CSS file with name shop.css to the location of shop.css file already present as production code in public directory of Bagisto.
2. More so ever you can also use webpack.mix.js for copying CSS file in your package and overwrite the existing CSS file of Bagisto.

To make this easier, I have made a repository which is having a basic structure for just overriding Bagisto’s default CSS. Please take a look below:

https://github.com/bagisto/bagsito-custom-css

Just by installing this package in Bagisto you can change the CSS of shop or storefront and make your own changes as you would need.

Prashant Singh

• 16 Aug, 2019
  Created by - Prashant Singh