Skip to main content

Footer

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:

QG11

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:

KeyTypeDescription
is_logged_inBooleanwhether user logged in or not
logoURLURL of the logo used in header (in desktop)
mobile_logoURLURL of the logo used in mobile view header for smaller screens
app_infoArrayvarious information about application including footer links and social links and business highlights
cart_item_countNumbercount of how much items have been added into the cart
supportObjectinformation of application including contact number, email id, app id
navigationArraylist of multiple objects of different navigation of application
nameStringname of the application
descriptionStringdescription of the application's business
user_pincodeNumberuser's current pincode saved in local storage
all_navigationArraylist 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.