Customizing the Footer in Bagisto 2.4.1 (Default Theme)
File name & location
The footer is not controlled by a plain CSS file. Bagisto's default theme uses Tailwind CSS utility classes written directly in the Blade template.
The footer is not controlled by a plain CSS file. Bagisto's default theme uses Tailwind CSS utility classes
written directly in the Blade template.
packages/Webkul/Shop/src/Resources/views/components/layouts/footer/index.blade.php
The custom colors it references (lightOrange, navyBlue) are defined here:
packages/Webkul/Shop/tailwind.config.js
Changing the Background Color
The footer has two background areas:
a) The main footer area line 24 uses the class bg-lightOrange:
<footer class="mt-9 bg-lightOrange max-sm:mt-10">
b) The bottom copyright bar line 140 uses bg-[#F1EADF]:
<div class="flex justify-between bg-[#F1
To change them, either swap the classes inline (e.g. bg-lightOrange bg-[#1a1a1a]), or change the color value
centrally in tailwind.config.js:
// packages/Webkul/Shop/tailwind.config.js
colors: {
navyBlue: "#060C3B",
lightOrange: "#F6F2EB", // change this hex to recolor the whole footer
}
Text & Link Color
Copyright text (line143): text-zinc-6e.
Newsletter heading (line 96): text-navyBlue.
Footer links (lines 42 & 76): they currently inherit the default text color there's no color class on the <a> tags. To recolor them, add a text-color class:
<a href="{{ $link['url'] }}" class="text
{{ $link['title'] }}
</a>
3.Two important notes
Rebuild assets after editing. Because th runtime CSS), you must recompile afterany change:
cd packages/Webkul/Shop
npm install # first time only
npm run build # or: npm run dev
If you add a brand-new arbitrary class like bg-[#123456], Tailwind will pick it up on the next build. Also clear the view cache: php artisan view:clear.
Don't edit the vendor package directly if you can avoid it changes inside packages/Webkul/... are overwritten
when you update Bagisto. The upgrade-safheme (Admin < Settings < Themes) or publish/override just this footer view into a custom theme folder, then edit the copy there.
Remember to run npm run build afterward.