Footer

Footer 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.

{"base64":" ","img":{"width":3276,"height":540,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":112205,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-footer-0.png"}}

Configuration

Import the vtex.store-footer's app to your theme's dependencies in the manifest.json, for example:


_10  dependencies: {
_10    "vtex.store-footer: 2.x"
_10  }

Define the footer block. For example:


_30{
_30  "footer": {
_30    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
_30  },
_30  "footer-layout.desktop": {
_30    "children": ["flex-layout.row#footer-desktop"]
_30  },
_30  "footer-layout.mobile": {
_30    "children": ["flex-layout.row#footer-mobile"]
_30  },
_30  "flex-layout.row#footer-desktop": {
_30    "children": ["social-networks", "accepted-payment-methods", "powered-by"]
_30  },
_30  "flex-layout.row#footer-mobile": {
_30    "children": ["social-networks", "accepted-payment-methods", "powered-by"]
_30  },
_30  "social-networks": {
_30    "props": {
_30      "socialNetworks": [
_30        { "url": "https://facebook.com/foo", "name": "Facebook" },
_30        { "url": "https://twitter.com/foo", "name": "Twitter" }
_30      ]
_30    }
_30  },
_30  "accepted-payment-methods": {
_30    "props": {
_30      "paymentMethods": ["mastercard", "visa", "diners club"]
_30    }
_30  }
_30}

social-networks:

Prop name	Type	Description
`title`	`string`	Text to show above of list of links
`socialNetworks`	`Array(SocialNetwork)`	Array of social networks
`showInColor`	`boolean`	Whether the icons are colored or not

SocialNetwork

Prop name	Type	Description
`url`	`string`	Link to the social network profile
`name`	`enum`	Possible values: `facebook`, `twitter`, `linkedin`, `youtube`, `pinterest`

accepted-payment-methods:

Prop name	Type	Description
`paymentMethods`	`Array`	Possible values: `mastercard`, `visa`, `diners club`
`showInColor`	`boolean`	Whether the icons are colored or not

powered-by:

Prop name	Type	Description
`showInColor`	`boolean`	Whether the icons are colored or not

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

footer-layout:

CSS Handles
`footerLayout`
`footerLayoutSpacer`

social-networks:

CSS Handles
`socialNetworksTitle`
`socialNetworksContainer`
`socialNetworkWrapper`
`socialNetworkLink`
`socialNetworkImage`

accepted-payment-methods:

CSS Handles
`acceptedPaymentMethodContainer`
`paymentMethodIcon`
`paymentMethodIconImage`

powered-by:

CSS Handles
`poweredBy`
`poweredByImage`
`poweredByLink`