VTEX Developer Portal

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.

imageimage

Configuration

  1. Import the vtex.store-footer's app to your theme's dependencies in the manifest.json, for example:
  dependencies: {
    "vtex.store-footer: 2.x"
  }
  1. Define the footer block. For example:
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-desktop"
    ]
  },
  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#footer-mobile"
    ]
  },
  "flex-layout.row#footer-desktop": {
    "children": [
      "social-networks",
      "accepted-payment-methods",
      "powered-by"
    ]
  },
  "flex-layout.row#footer-mobile": {
    "children": [
      "social-networks",
      "accepted-payment-methods",
      "powered-by"
    ]
  },
  "social-networks": {
    "props": {
      "socialNetworks": [
        { "url": "https://facebook.com/foo", "name": "Facebook" },
        { "url": "https://twitter.com/foo", "name": "Twitter" }
      ]
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["mastercard", "visa", "diners club"]
    }
  }
}

social-networks:

Prop nameTypeDescription
titlestringText to show above of list of links
socialNetworksArray(SocialNetwork)Array of social networks
showInColorbooleanWhether the icons are colored or not

SocialNetwork

Prop nameTypeDescription
urlstringLink to the social network profile
nameenumPossible values: facebook, twitter, linkedin, youtube, pinterest

accepted-payment-methods:

Prop nameTypeDescription
paymentMethodsArrayPossible values: mastercard, visa, diners club
showInColorbooleanWhether the icons are colored or not

powered-by:

Prop nameTypeDescription
showInColorbooleanWhether 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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Updated 2 months ago


Footer


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.