Storefront

Build a complete e-commerce storefront using hero sections, promotional banners, navigation bars, and mega footers with Flowbite Blade block components.

Default Storefront Hero

Blade code

<x-fwb.blocks.ecommerce.storefront-hero />

Custom Storefront Hero

Summer Sale!
Save Big Today!

Exclusive deals on electronics, fashion, and more.

Browse Deals

Blade code

<x-fwb.blocks.ecommerce.storefront-hero
    title="Summer Sale!<br>Save Big Today!"
    description="Exclusive deals on electronics, fashion, and more."
    primaryButtonText="Browse Deals"
    primaryButtonHref="/deals"
/>

Default Promotional Section

peripherals
Pre-order now

Blade code

<x-fwb.blocks.ecommerce.promotional-section />

Custom Promotional Section

peripherals

Get $200 off the new MacBook Pro.

Order now and receive free express shipping on all qualifying purchases.

Pre-order now

Blade code

<x-fwb.blocks.ecommerce.promotional-section
    title="Get $200 off the new MacBook Pro."
    description="Order now and receive free express shipping on all qualifying purchases."
/>

Default E-commerce Navbar

Blade code

<x-fwb.blocks.ecommerce.navbar />

Custom E-commerce Navbar

Blade code

<x-fwb.blocks.ecommerce.navbar
    brandName="MyShop"
    brandHref="/store"
    :cartCount="3"
    cartHref="/cart"
    searchAction="/search"
/>

Default Mega Footer

Blade code

<x-fwb.blocks.ecommerce.mega-footer />

Custom Mega Footer

Blade code

<x-fwb.blocks.ecommerce.mega-footer
    brandName="MyShop"
    copyright="&copy; 2024 MyShop&trade;. All Rights Reserved."
/>

Component Properties

Storefront Hero x-fwb.blocks.ecommerce.storefront-hero

PropTypeDefaultDescription
title string Limited Time Offer!... Hero headline text. Supports HTML.
description string Don't Wait - Limited Stock... Subheading text below the title.
primaryButtonText string Shop Now Label for the primary call-to-action button.
primaryButtonHref string # URL for the primary button link.
actions slot - Named slot to replace the default primary button with custom actions.
image slot - Named slot to replace the default hero illustration.
slot slot - Default slot to replace the brand logos section.

Promotional Section x-fwb.blocks.ecommerce.promotional-section

PropTypeDefaultDescription
title string Save $500 today... Promotional banner headline.
description string Reserve your new Apple... Description text below the title.
image slot - Named slot to replace the default product image.
actions slot - Named slot to replace the default pre-order button.

Navbar x-fwb.blocks.ecommerce.navbar

PropTypeDefaultDescription
brandName string Flowbite Brand name displayed next to the logo.
brandHref string / URL for the brand link.
brandLogoSrc string https://flowbite.s3... URL for the brand logo image.
cartCount int 0 Number of items in cart. Badge hidden when 0.
cartHref string # URL for the cart link.
searchAction string # Form action URL for the search form.
nav slot - Named slot for additional navigation items in the top bar.
actions slot - Named slot to replace the default user menu button.
slot slot - Default slot to replace the secondary category navigation.

Mega Footer x-fwb.blocks.ecommerce.mega-footer

PropTypeDefaultDescription
brandName string Flowbite Brand name displayed in the footer header.
copyright string © 2024 Flowbite... Copyright text. Supports HTML.
brand slot - Named slot to replace the default brand logo and name.
columns slot - Named slot to replace the default footer links section.
social slot - Named slot for social media icons row.