Cartzilla - Display the vendor banner on frontend

functions.php

if ( ! function_exists( 'cartzilla_dokan_dashboard_page_title' ) ) {
    function cartzilla_dokan_dashboard_page_title( $user_id = null ) {
        if ( ! $user_id ) {
            $user_id = dokan_get_current_user_id();
        }

        $user_data = get_userdata( $user_id );
        $user_registered = $user_data->user_registered;
        $store_info = dokan_get_store_info( $user_id );
        $storename = isset( $store_info['store_name'] ) && ! empty( $store_info['store_name'] ) ? $store_info['store_name'] : ( is_object( $user_data ) ? $user_data->display_name : '' );
        $gravatar_url = get_avatar_url( $user_id );
        $orders_count = ! empty( dokan_count_orders( $user_id ) ) ? dokan_count_orders( $user_id )->total : 0;
        $rating = dokan_get_seller_rating($user_id);

        $store_time_enabled = isset( $store_info['dokan_store_time_enabled'] ) ? $store_info['dokan_store_time_enabled'] : '';
        $store_open_notice = isset( $store_info['dokan_store_open_notice'] ) && ! empty( $store_info['dokan_store_open_notice'] ) ? $store_info['dokan_store_open_notice'] : esc_html__( 'Store Open', 'cartzilla' );
        $store_closed_notice = isset( $store_info['dokan_store_close_notice'] ) && ! empty( $store_info['dokan_store_close_notice'] ) ? $store_info['dokan_store_close_notice'] : esc_html__( 'Store Closed', 'cartzilla' );
        $show_store_open_close = dokan_get_option( 'store_open_close', 'dokan_appearance', 'on' );

        $store_banner = isset( $store_info['banner'] ) && ! empty( $store_info['banner'] ) ? wp_get_attachment_url( $store_info['banner'] ) : '';

        ?>
        <div class="page-title-overlap bg-accent pt-4<?php if( ! empty( $store_banner ) ) echo esc_attr( ' pt-5 has-store-banner' ); ?>"<?php if( ! empty( $store_banner ) ) echo ' style="background-image: url(' . esc_url( $store_banner ) . ');"' ?>>
            <div class="container d-flex flex-wrap flex-sm-nowrap justify-content-center justify-content-sm-between align-items-center pt-2">
                <div class="media media-ie-fix align-items-center pb-3">
                    <div class="img-thumbnail rounded-circle position-relative" style="width: 6.375rem;">
                        <?php if ( dokan_is_store_page () ) : ?>
                            <img class="rounded-circle w-100" src="<?php echo esc_url( $gravatar_url ); ?>" alt="<?php echo esc_attr( $storename ); ?>">
                        <?php else : ?>
                            <a href="<?php echo esc_url( dokan_get_store_url( $user_id ) ); ?>">
                                <img class="rounded-circle w-100" src="<?php echo esc_url( $gravatar_url ); ?>" alt="<?php echo esc_attr( $storename ); ?>">
                            </a>
                        <?php endif; ?>
                    </div>
                    <div class="media-body pl-3">
                        <?php if ( dokan_is_store_page () ) : ?>
                            <h3 class="text-light font-size-lg mb-0">
                                <?php echo esc_html( $storename ); ?>
                            </h3>
                        <?php else : ?>
                            <a href="<?php echo esc_url( dokan_get_store_url( $user_id ) ); ?>">
                                <h3 class="text-light font-size-lg mb-0">
                                    <?php echo esc_html( $storename ); ?>
                                </h3>
                            </a>
                        <?php endif; ?>
                        <span class="d-block text-light font-size-ms opacity-60 py-1">
                            <?php echo sprintf( esc_html__( "Member since %s.", 'cartzilla' ), date( "M Y", strtotime( $user_registered ) ) ); ?>
                        </span>
                        <?php if ( $show_store_open_close == 'on' && $store_time_enabled == 'yes') : ?>
                            <?php if ( dokan_is_store_open( $user_id ) ) : ?>
                                <span class="badge badge-success">
                                    <i class="czi-check mr-1"></i>
                                    <?php echo esc_attr( $store_open_notice ); ?>
                                </span>
                            <?php else : ?>
                                <span class="badge badge-danger">
                                    <i class="czi-close mr-1"></i>
                                    <?php echo esc_attr( $store_closed_notice ); ?>
                                </span>
                            <?php endif; ?>
                            </li>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="d-flex">
                    <div class="text-sm-right">
                        <div class="text-light font-size-base">
                            <?php esc_html_e( 'Total sales', 'cartzilla' ); ?>
                        </div>
                        <h3 class="text-light"><?php echo esc_html( $orders_count ); ?></h3>
                    </div>
                    <?php if( ! empty( $rating ) && $rating['count'] > 0 ) : ?>
                        <div class="text-sm-right ml-5">
                            <div class="text-light font-size-base">
                                <?php esc_html_e( 'Seller rating', 'cartzilla' ); ?>
                            </div>
                            <div class="star-rating">
                                <?php for ($i=0; $i < 5 ; $i++) : ?>
                                    <i class="sr-star <?php echo esc_attr( $rating['rating'] > $i ? 'czi-star-filled active' : 'czi-star' ); ?>"></i>
                                <?php endfor; ?>
                            </div>
                            <div class="text-light opacity-60 font-size-xs">
                                <?php
                                    $rating_count = absint( $rating['count'] );
                                    echo sprintf( _n( 'Based on %d review', 'Based on %d reviews', $rating_count, 'cartzilla' ), number_format_i18n( $rating_count ) );
                                ?>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php
    }
}

style.css

.has-store-banner {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.has-store-banner > .container {
    position: relative;
}

.has-store-banner:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgb(0, 0, 0, .3);
}