The Share component allows shoppers to share a product URL via social media. This component can be imported and used by any VTEX app.

share-componentshare-component

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the share block as a child of the store.product template (Product Details Page template). For example:
  "store.product": {
    "children": [
      "share"
    ]
  }
  1. Then, declare the share block using the props stated in the Props table. For example:
  "share": {
    "component": "Share"
  }

Props

Prop nameTypeDescriptionDefault value
buttonsContainerClassStringButton container classes.true
classNameStringMain container classes.null
imageUrlStringImage url to share in social medias.
optionsOptionsShare button options, such as size.{}
shareLabelClassStringShare label classes.true
socialSocialPossible social media icons to be displayed.{Facebook: true, Twitter: true, WhatsApp: true, Pinterest: true}

options props:

Prop nameTypeDescription
sizeNumberThe size of the share button in pixels.

social props:

Prop nameTypeDescription
FacebookBooleanIf Facebook social media will be shown.
TwitterBooleanIf Twitter social media will be shown.
WhatsAppBooleanIf WhatsApp social media will be shown.

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
shareButtons
shareContainer
shareLabel
shareLoader
shareSocialButton
shareSocialIcon

Did this page help you?