Share is a VTEX component that allows to share a product url via social medias. This component can be imported and used by any VTEX app.

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

Table of Contents


You should follow the usage instruction in the main README.

Then, add share block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within Share and describes if they are required or optional.

  "share": {
    "component": "Share"

For now this block does not have any required or optional blocks.


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

Prop nameTypeDescriptionDefault value
classNameStringThe main container classesnull
shareLabelClassStringThe share label classestrue
buttonsContainerClassStringThe button container classestrue
optionsOptionsShare button options, like "size"{}
socialSocialThe possible social medias to be displayed{Facebook: true, Twitter: true, WhatsApp: true, Pinterest: true}
imageUrlStringImage url to share in social medias


Prop nameTypeDescription
sizeNumberThe size of the share button in pixels


Prop nameTypeDescription
FacebookBooleanIf facebook social media will be shown
TwitterBooleanIf twitter social media will be shown
WhatsAppBooleanIf whatsApp social media will be shown

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the Share.

Class nameDescriptionComponent Source
shareContainerThe main container of Shareindex
shareLoaderThe share loaderindex
shareLabelThe share labelindex
shareButtonsThe main container of social media buttonsindex
shareSocialButtonThe share social media buttonindex
shareSocialIconThe share social media iconindex