📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

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.

image

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