Newsletter by vtex

This page is about version 3.172.1 of the app, which is not the most recent version. The latest stable version is 3.178.5.

{"base64":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://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

Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the newsletter block to any template of your choice. For example:


_10    "store.home": {
_10      "children": [
_10+       "newsletter",
_10      ]
_10    },

Then, declare the newsletter block using the props stated in the Props table.

Props

Prop name	Type	Description	Default value
`hideLabel`	`Boolean`	Hide label.	`false`
`label`	`String`	Label of the form used by the component.	`Subscribe to our newsletter` (translated text)
`placeholder`	`String`	Placeholder of the email input.	`Enter your email address` (translated text)
`submit`	`String`	Label 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`