Footer

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Overview

Footer contains business highlights, social links, copyright notices, site description and contact info. It's a place to put common information. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content and can also contain the links to the various page of website itself. A default footer looks like this:

Context

Context is a object which includes various other key value pairs, object, and list of various variables, which we can use in creating header, it includes:

Key	Type	Description
is_logged_in	Boolean	whether user logged in or not
logo	URL	URL of the logo used in header (in desktop)
mobile_logo	URL	URL of the logo used in mobile view header for smaller screens
app_info	Array	various information about application including footer links and social links and business highlights
cart_item_count	Number	count of how much items have been added into the cart
support	Object	information of application including contact number, email id, app id
navigation	Array	list of multiple objects of different navigation of application
name	String	name of the application
description	String	description of the application's business
user_pincode	Number	user's current pincode saved in local storage
all_navigation_details	Array	list of all orientations in the navigation of the application

In footer we mostly need app_info object to display the major part of footer, the structure of app_info object is as follows:

theme/templates/components/footer.vue

{
    "address": {
        "loc": null,
        "address_line": [
            "Shopsense Retail Technologies Pvt. Ltd.",
            "CIN: U52100MH2012PTC236314 Registered Office: 1st Floor, Wework Vijay Diamond, Opp. SBI Branch, Cross Road B, Ajit Nagar, Kondivita, Andheri East, Mumbai 400093 Customer Service e-mail: [email protected]"
        ],
        "phone": [
            {
                "code": "+91",
                "number": "8433859662"
            }
        ],
        "city": "Mumbai , Maharashtra , India",
        "country": "India",
        "pincode": 400093
    },
    "support": {
        "phone": [],
        "email": [],
        "timing": ""
    },
    "social_links": {
        "facebook": {
            "title": "Facebook",
            "icon": "https://hdn-1.fynd.com/system/svg/social-media/icon/original/hQAbAKdvHK-facebookfooteraopcjq.svg",
            "link": "https://www.facebook.com/gofynd"
        },
        "instagram": {
            "title": "Instagram",
            "icon": "https://hdn-1.fynd.com/system/svg/social-media/icon/original/UZYsGWOqXp-instagramfooterl3utrr.svg",
            "link": "https://www.facebook.com/gofynd"
        },
    },
    "links": [
        {
            "title": "Shipping",
            "link": "https://fynd.freshdesk.com/support/solutions/folders/33000111577"
        },
        {
            "title": "Returns",
            "link": "https://fynd.freshdesk.com/support/solutions/folders/33000111600"
        },
        {
            "title": "Privacy",
            "link": "https://fynd.freshdesk.com/support/solutions/articles/33000214398-privacy-policy"
        },
        {
            "title": "Terms",
            "link": "https://fynd.freshdesk.com/support/solutions/articles/33000214399-terms-services"
        }
    ],
    "copyright_text": "#MadeInIndia 🇮🇳 | © 2021 Shopsense Retail Technologies",
    "_id": "6110b472d4beb6a0168f89a2",
    "business_highlights": [
        {
            "_id": "6110b472d4beb6506f8f89a3",
            "title": "Fresh Fashion",
            "icon": "https://hdn-1.addsale.com/x0/company/1/applications/000000000000000000000001/business-highlights/pictures/square-logo/original/X7lfvlarL-ZRC9TqJlT-business-logo-icon.png",
            "sub_title": "Shop fresh fashion straight from brand stores."
        },
        {
            "_id": "6110b472d4beb6059c8f89a4",
            "title": "Superfast Delivery",
            "icon": "https://hdn-1.addsale.com/x0/company/1/applications/000000000000000000000001/business-highlights/pictures/square-logo/original/b18IM5fNf-8XiwtQIHP-business-logo-icon.png",
            "sub_title": "We have the industry’s fastest average delivery time."
        },
        {
            "_id": "6110b472d4beb61fa68f89a5",
            "title": "Easy Returns",
            "icon": "https://hdn-1.addsale.com/x0/company/1/applications/000000000000000000000001/business-highlights/pictures/square-logo/original/saVMBEiAa-e5NDaBvjO-business-logo-icon.png",
            "sub_title": "Changed your mind? No Worries, we got you covered!"
        }
    ],
    "application": "000000000000000000000001",
    "created_at": "2021-08-09T04:52:02.742Z",
    "modified_at": "2021-08-09T04:52:02.742Z",
    "__v": 0
}

---

Config & Schema

Footer contains few part to be designed including, the business highlights, application name, logo and description, navigation links to various pages, social links, and then links to common pages, and copyright info.

Business Highlights: To display business highlights you can use context.app_info.business_highlights key, e.g.

Navigation Links: To display navigation links you can use context.navigation array.

Application Common Pages links: This includes links to shipping, return and privacy and terms & condition links, you can use context.app_info.links array to display this.