Skip to content
VTEX Footer app for IO Stores
Branch: master
Clone or download
rerissondaniel Merge pull request #66 from vtex-apps/fix/diners-vtex-logos
Fix VTEX logo reference and Diners image name
Latest commit 3aa6c58 May 9, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add PR and issue template Sep 19, 2018
messages Fix messages keys May 7, 2019
react Fix VTEX logo reference and Diners image name May 9, 2019
store Allow adding flex-layout to footer Apr 12, 2019
.gitignore Add test coverage Mar 26, 2019
.travis.yml Add test coverage Mar 26, 2019
.vtexignore Add test coverage Mar 26, 2019 Release v2.11.5 May 9, 2019 Update May 3, 2019

VTEX Footer


The VTEX Footer app is a store component that shows information about the store such as address, social networks and payment methods. Furthermore, it is possible to add hyperlinks for privacy policy, FAQ, benefits and attendance. This app is used by store theme.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-21 2.x
[1.x] Maintenance LTS 2018-09-20 2018-11-21 March 2019 1.x

See our LTS policy for more information.

Table of Contents


This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    " 2.x"

Then, add footer block into our app theme, like we do in our Store theme app.

Now, you can change the behavior of the footer block. See an example of how to configure:

"footer": {
  "props": {
    "socialNetworks": [
      { "links":[
        { "url":"", "title":"Facebook" },
        { "url":"", "title":"Twitter" }
    "sectionLinks": [
      {"title": "About us", "links":[
        { "url":"", "title":"FAQ", "target": "_blank" },
        { "url":"", "title":"Talk to us", "target": "_self" }
    "storeInformations": ["CNPJ n.º 1231132.231.1231/000", "All the rights reserved."],
    "badges": [
    "paymentForms": [
      {"title": "Payment form", "paymentTypes": ["MasterCard"]}
    "showPaymentFormsInColor": true,
    "showSocialNetworksInColor": true,
    "showVtexLogoInColor": true,
    "logo": "My store logo",

Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the footer.

  "footer": {
    "component": "index"


Through the Storefront, you can change the footer's behavior and interface. However, you also can make in your theme app, as Store theme does.

Store Footer:

Prop name Type Description Default Value
socialNetworks Array(Social Network) Array of social networks [{socialNetwork: 'Facebook', url: '#'},]
sectionLinks Array(Section Link) Array of section links []
storeInformations Array(String) Array of informations about the store []
badges Array(Badge) Array of badges []
paymentForms Array(Payment Form) Array of payment forms [{title: `Payment Form/Forma de pago/Forma de pagamento`, paymentTypes: ['MasterCard']}]
showPaymentFormsInColor Boolean Set color of payment forms false
showSocialNetworksInColor Boolean Set color of social networks false
showVtexLogoInColor Boolean Set color of VTEX logo false
logo String Link of Store logo -

Social Network:

Prop name Type Description
links Array(Link) Array of links

Section Link:

Prop name Type Description
title String! Title of the section
links Array(Link) Array of links


Prop name Type Description
url String URL
title String Title of the link
target Enum Target of the link. (values: _self or _blank)


Prop name Type Description
image String URL of the badge

Payment Form:

Prop name Type Description
title String! Title of payment form
paymentTypes Array(String) Array of strings containing the payment types

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  1. Create a file called vtex.footer.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;

Also, create a vtex.footer.css file in styles/css for your handlers customization.

CSS namespaces

Below, we describe the namespaces that are define in the Footer.

Class name Description Component Source
footer The main content of the footer index
container The generical container of the footer index
linksContainer The wrapper containing the matrices of links index
matrixContainer The container that holds all the listContainers FooterLinksMatrix
matrixItem The wrapper for an item of the matrix. (e.g, listContainer) FooterLinksMatrix
listContainer The wrapper containing the listTitle and a list footerList
listContainerHorizontal The properties to be applied when the listContainer is horizontal footerList
listContainerRightAligned The properties to be applied when the listContainer is right aligned footerList
listTitle The title of a item list. (e.g, Institutional) footerList
list The container for a list of listItem footerList
listHorizontal The properties to be applied to the list when the horizontal props is true footerList
listItem The item of a list footerList
listLink The link inside a list footerList
listItemHorizontal The properties to be applied to the item list when the horizontal props is true footerList
socialNetworkContainer The social networks container index
socialNetworkItem The image of a social network FooterSocialNetworkList
paymentMatrix The wrapper that holds all the paymentMatrixItems FooterPaymentFormMatrix
paymentMatrixItem The image of a social network FooterPaymentFormMatrix
paymentFormItem The image of the payment form FooterPaymentFormList
textContainer The container for the text informations of the store index
badgeList The wrapper for all the bagdes FooterVtexLogo
badge One store badge FooterVtexLogo
vtexLogoItem The 'Powered by VTEX' logo FooterVtexLogo
logoImage The image of one logo of the store FooterVtexLogo
textInformation Information at the footer's bottom index
links The wrapper for FooterLinksMatrix index
socialNetworkContainer The wrapper for the FooterSocialNetworkList index
textContainer The wrapper for all the information at the footer's bottom index
navigation The wrapper for the navigation area in footer index
payment The wrapper for FooterPaymentFormMatrix index

When the footer is displayed in mobile view, the matrixContainer constricts itself and displays a list of matrixItemSmall, each one containing an accordion. Below, we describe the tokens, their explanation and the component where it is located.

Class name Description Component Source
matrixItemSmall The item of the matrix FooterLinksMatrix
accordionTitle The accordion title Accordion
accordion The accordion container for a list of accordionItem Accordion
accordionItem The item inside the accordion (e.g, listLink) FooterLinksMatrix
accordionIcon The accordion icon Accordion


You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.


Check it out how to contribute with this project.


To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status Coverage Status

You can’t perform that action at this time.