https://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red

️ Warning

The Newsletter block has been deprecated in favor of the Newsletter app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Specification's blocks in order to keep up with the component's evolution.

The newsletter block displays a newsletter form.

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 newsletter block to any template of your choice. For example:
    "store.home": {
      "children": [
+       "newsletter",
      ]
    },
  1. Then, declare the newsletter block using the props stated in the Props table.

Props

Prop nameTypeDescriptionDefault value
hideLabelBooleanHide label.false
labelStringLabel of the form used by the component.Subscribe to our newsletter (translated text)
placeholderStringPlaceholder of the email input.Enter your email address (translated text)
submitStringLabel of the submit button.Sign up (translated text)

Customization

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

CSS Handles
buttonContainer
confirmation
confirmationText
confirmationTitle
container
error
form
inputGroup
label
newsletter

Did this page help you?